Selector de color de imágenes: extrae el código de color de una imagen

Carga la imagen en Image Color Picker y haz clic donde esté el color que necesitas. La herramienta muestra al instante los valores HEX, RGB y HSL de ese píxel; usa «Copiar» para obtener el valor. Si haces clic en el sol de la imagen de ejemplo, obtendrás #ffd166. En el código HEX, cada par de dígitos representa el rojo, el verde y el azul (ff = 255, d1 = 209, 66 = 102). Por tanto, #ffd166 equivale a rgb(255, 209, 102) y hsl(42, 100 %, 70 %).

Un cuentagotas, también llamado selector de colores o Eyedropper, obtiene el color de un punto y muestra su código. Este Image Color Picker es un cuentagotas online para imágenes que funciona en el navegador, también en el móvil: no necesitas ninguna aplicación. En el móvil, toca un punto y arrastra el dedo; la lupa muestra los píxeles que hay debajo. Con el teclado, mueve la selección 1 píxel con las flechas (10 si mantienes pulsada Mayús) y guarda el color en el historial con Intro.

No. La imagen se coloca en un lienzo dentro de tu navegador y se analiza allí. No se sube ni se guarda; incluso el historial de colores seleccionados permanece solo en esta pestaña. Puedes comprobarlo en la pestaña de red de las herramientas de desarrollo: no se generan solicitudes al cargar la imagen ni al hacer clic.

Haz una captura de pantalla (Windows: Windows+Mayús+S; Mac: Cmd+Mayús+4 con Ctrl para copiarla al portapapeles) y pégala en la herramienta con Ctrl+V (Mac: Cmd+V). Después, haz clic en el punto que quieras y copia el código de color. Así puedes extraer colores de una web, una aplicación o un juego sin extensiones del navegador.

Hay cuatro motivos frecuentes. Primero, las imágenes JPG almacenan los colores con pérdida de información, por lo que los píxeles vecinos pueden variar ligeramente. Segundo, el navegador puede convertir los perfiles de color incrustados (por ejemplo, Display P3) a sRGB, mientras que otros programas muestran el valor original. Tercero, una captura de pantalla muestra el color después de la gestión del color de tu pantalla. Cuarto, la herramienta analiza las imágenes de más de 36 megapíxeles a una resolución reducida. Por eso, para las fotos, configura el promedio en 3 × 3, 5 × 5 u 11 × 11 píxeles: la herramienta calcula la media de 9, 25 o 121 píxeles alrededor del puntero en lugar de tomar un valor atípico. Para colores uniformes, como los de un logotipo, «1 píxel» es la opción adecuada.

Carga la imagen y la paleta aparecerá justo debajo. Puedes elegir entre 2 y 12 colores y ver el código HEX de cada uno y su proporción en la imagen. Para ello, la herramienta analiza al menos 90.000 píxeles distribuidos uniformemente (las imágenes más pequeñas, completas), omite los transparentes y agrupa los colores mediante el algoritmo de corte mediano. En las fotos, la paleta es aproximada. Con «Copiar lista HEX» obtienes una lista; con «Copiar variables CSS», líneas como --color-1: #08203a; para un bloque :root, que puedes usar con var(--color-1).

Además de los valores de color, la herramienta muestra el nombre de color CSS correspondiente o, si no hay una coincidencia exacta, el más cercano junto con su valor HEX. Para #ffd166 es khaki (#f0e68c), por lo que solo es una aproximación. La herramienta no proporciona valores RAL, Pantone, NCS ni CMYK. Además, el color en pantalla depende de la luz y la cámara; por eso, comprueba siempre la pintura con una muestra física. Color Picker te muestra los valores HSV y CMYK de un color conocido.

La herramienta calcula la relación de contraste WCAG del color respecto al blanco y al negro. El texto normal necesita al menos 4,5:1 (nivel AA); 7:1 es excelente (AAA), y para el texto grande basta con 3:1. Sobre #ffd166, el texto negro alcanza 14,56:1 y el blanco solo 1,44:1. Para comprobar dos colores cualesquiera, utiliza el Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP y SVG, según los formatos que admita tu navegador. En los GIF se analiza el primer fotograma. Los archivos HEIC y HEIF, como los que guardan los iPhone, solo se abren en Safari; en otros navegadores, exporta antes la foto como JPG. Los archivos pueden tener un tamaño máximo de 40 MB. En los píxeles semitransparentes, la herramienta muestra además el valor HEX con canal alfa, por ejemplo, #ff000080. Los píxeles totalmente transparentes no tienen color, y la herramienta te lo indica.