Cómo usarla
- Elige una imagen o suéltala en el recuadro.
- Mueve el puntero sobre la imagen; la lupa muestra los píxeles alrededor.
- Haz clic o toca para elegir el color y copiarlo como HEX, RGB o HSL.
- Desplázate hacia abajo para ver los colores dominantes, elige cuántos quieres y cópialos o descárgalos como variables CSS.
Cómo funciona
La imagen se dibuja en un lienzo en tu navegador y se lee el color del píxel exacto bajo el puntero. La lupa muestra un área de 11 × 11 píxeles ampliada, con el píxel seleccionado resaltado. Las imágenes con más de 4096 píxeles por lado se reducen primero, por lo que en fotos muy grandes un píxel seleccionado es el promedio de unos pocos píxeles originales.
Los colores dominantes se calculan mediante agrupación k-means: primero se agrupan los píxeles en 32 768 pequeños grupos de color y luego se fusionan esos grupos en el número de colores que elijas, ponderados por cuántos píxeles contiene cada uno. Los puntos de partida se eligen de forma determinista, por lo que la misma imagen siempre da la misma paleta.
Los colores se leen en el espacio sRGB que usa el navegador para mostrar. Si una imagen tiene un perfil de color de gama amplia incrustado, los valores pueden diferir ligeramente de lo que muestra un editor de fotos. En navegadores compatibles (Chrome y Edge en escritorio), el botón 'Seleccionar de la pantalla' usa el gotero integrado EyeDropper para tomar un color de cualquier parte de la pantalla.
Ejemplos
Igualar un color de marca
Sube una captura de pantalla de un logotipo, haz clic en su color principal y copia #1a73e8 o rgb(26, 115, 232) en tu CSS.
Paleta de una foto
Una foto de playa dividida en 6 colores da tonos de arena, mar y cielo, cada uno con la proporción de la imagen que cubre, ordenados de mayor a menor.
Comprobar un tono
Acerca con la lupa para seleccionar el píxel exacto de una línea fina en lugar del borde suavizado que está al lado.
Preguntas frecuentes
¿Por qué el color difiere ligeramente del de mi editor de fotos?
Los navegadores convierten las imágenes a sRGB para mostrarlas. Las fotos con un perfil de gama amplia (Display P3, Adobe RGB) pueden mostrar valores ligeramente diferentes en un editor que conserve el perfil original.
¿Por qué falta el botón «Seleccionar de la pantalla»?
Requiere la EyeDropper API, que solo admiten algunos navegadores; actualmente, Chrome y Edge en escritorio. Elegir el color desde la imagen cargada funciona en todos.
¿Cómo se eligen los colores dominantes?
Mediante agrupamiento k-means de todos los píxeles, ponderado por la frecuencia con la que aparece cada color. Los detalles pequeños pero intensos pueden fusionarse con un color cercano que tiene más presencia; se puede aumentar el número de colores para separarlos.
¿Se sube la imagen?
No. Esta página lo decodifica y analiza en tu navegador y nunca sale de tu dispositivo.
Privacidad
La imagen se procesa completamente en tu navegador. No se sube y los colores seleccionados no se envían ni se almacenan.