Selector de color: obtén códigos de color exactos de cualquier imagen o pantalla

Cómo usar el selector de color

1. Carga una imagen. Suelta un archivo, elige uno o pega una captura de pantalla desde el portapapeles. PNG, JPEG, WebP, GIF, AVIF, BMP y SVG de hasta 40 MB funcionan en todas partes; HEIC solo donde tu navegador pueda abrirlo, y un archivo que no pueda abrir recibe un mensaje claro en lugar de una pantalla en blanco. La herramienta muestrea el mapa de bits a resolución completa, no la copia reducida que ves en pantalla. Solo las imágenes de más de 16,7 megapíxeles se leen desde una copia reducida, y la herramienta te lo avisa. También enumera los colores dominantes de la imagen con su proporción.
2. Apunta con la lupa. La lupa muestra la cuadrícula de píxeles alrededor del puntero del ratón o de tu dedo, así que puedes ver si estás sobre una zona plana o sobre un borde suavizado. Con el teclado, las teclas de flecha mueven el punto de selección un píxel (Mayús: diez) y Intro lo elige.
3. Elige un tamaño de muestra. 1 píxel da el valor en bruto; un promedio de 3×3 o 5×5 suaviza el ruido de los JPEG y el grano de las fotos. Yo uso 1 píxel para logotipos e interfaces, y un promedio para fotos.
4. O toma el color de la pantalla. En los navegadores Chromium de ordenador (Chrome, Edge, Opera), el botón del cuentagotas te deja hacer clic en cualquier píxel de tu pantalla, incluso fuera de la ventana del navegador. Firefox y Safari no tienen esta función; la herramienta te lo dice y te remite a la vía de la imagen.
5. O escribe un código. Pega #1d4ed8 (3, 4, 6 u 8 dígitos), rgb(29 78 216), hsl(224 76% 48%), un valor hsv(), oklch() o cmyk(), o un nombre de color CSS, y se actualizan todos los demás formatos. Un interruptor cambia la salida entre el CSS moderno separado por espacios y el clásico con comas.
6. Reúne y exporta. Añade las muestras al tablero de la paleta, que se guarda en tu navegador, y cópialo o descárgalo como propiedades personalizadas de CSS, SCSS, JSON o una simple lista HEX.

HEX, RGB, HSL, HSV y OKLCH: qué código usar

OKLCH procede del módulo CSS Color de nivel 4 y es la forma cilíndrica del espacio Oklab. Su eje L está pensado para seguir lo brillante que parece un color, justo lo que la luminosidad de HSL hace mal. El amarillo puro y el azul puro tienen ambos L 50% en HSL, y sin embargo uno parece casi blanco a la vista y el otro oscuro:

Por eso construyo toda escala de tonos en OKLCH: pasos iguales de L se ven como pasos iguales en todos los tonos, y el contraste del texto resulta mucho más predecible.

Ejemplo resuelto: convertir #1D4ED8

De HEX a RGB. Divide en pares y lee cada uno en base 16:

De RGB a HSL. Pasa a la escala 0–1: R = 0,1137; G = 0,3059; B = 0,8471. El máximo es 0,8471 (azul), el mínimo 0,1137 y la diferencia d = 0,7333.

De RGB a HSV. V = máx = 84,7%; S = d / máx = 0,7333 / 0,8471 = 86,6%; el tono es el mismo, 224,3°, así que hsv(224.3 86.6% 84.7%).

De RGB a CMYK. K = 1 − máx(R, G, B) = 1 − 0,8471 = 15,3%; después C = (1 − R − K) / (1 − K) = 86,6%, M = 63,9%, Y = 0%, que se muestra como cmyk(87% 64% 0% 15%). Es aritmética simple, no un perfil de tintas.

De RGB a OKLCH. Cada canal se linealiza (se deshace la gamma sRGB), se convierte a Oklab mediante dos matrices fijas con una raíz cúbica en medio, y luego a y b pasan a ser croma y tono. El resultado es oklch(48.82% 0.2172 264.38), que CSS también acepta como oklch(0.4882 0.2172 264.38). El tono OKLCH (264°) difiere del tono HSL (224°) porque las ruedas de tonos están dispuestas de forma distinta.

Por qué un color elegido puede diferir en unos pocos valores

Dos personas que eligen el mismo color de marca pueden obtener #1D4ED8 y #1E4FD6 sin que ninguna herramienta se equivoque:

• La compresión JPEG guarda el color con menor resolución y en bloques de 8×8, así que los píxeles vecinos de una zona plana varían unas pocas unidades. Si nueve valores de rojo son 27, 29, 31, 28, 30, 29, 26, 32 y 29, su promedio es 261 ÷ 9 = 29, que es el valor que lo más probable es que usara quien diseñó.
• Las capturas escaladas mezclan píxeles. Una captura Retina reducida a la mitad mezcla cada bloque de 2×2, de modo que el texto fino y los bordes se convierten en colores intermedios.
• El suavizado de bordes en contornos y tipografía crea píxeles de transición que no pertenecen a ninguno de los dos colores. Elige del centro de un relleno plano, nunca del borde.
• El cuentagotas de pantalla devuelve lo que se muestra, después de la gestión del color y de funciones como Night Shift o True Tone, y entrega un HEX sRGB. El valor del archivo puede ser distinto; para valores exactos, elige directamente de la imagen.

Transparencia. En #1D4ED880 el último par es el alfa: 80 hex = 128, y 128 ÷ 255 = 0,502, es decir, una opacidad de alrededor del 50%. En CSS el alfa va al final; el ARGB de Android lo pone primero, una confusión habitual. Lo que ves depende del fondo: sobre blanco, cada canal pasa a ser 0,502 × color + 0,498 × 255, lo que da aproximadamente #8EA6EB. La herramienta conserva el alfa de PNG, WebP y otros formatos que lo tienen, y te avisa cuando el píxel que elegiste no es totalmente opaco. Un píxel totalmente transparente se indica como transparente en lugar de leerse mal como negro, y los promedios se ponderan por el alfa para que los píxeles translúcidos no arrastren el resultado hacia el negro.

Sombras, tintes y paletas

En la teoría clásica, un tinte es un color mezclado con blanco, una sombra es un color mezclado con negro y un matiz es un color mezclado con gris. Mezclar en RGB da pasos desiguales, así que la escala de aquí mantiene el tono y el croma en OKLCH y mueve la luminosidad en diez pasos iguales, de L 96% a 24%, reduciendo el croma solo donde un color saldría de la gama sRGB; se marca el paso más cercano a tu color. Las filas de tintes, sombras y matices son mezclas sRGB simples con blanco, negro y gris medio en pasos del 10%, útiles para estados rápidos de hover y de desactivado. Puedes copiar la escala como variables CSS o seguir en el propio CSS con la sintaxis de color relativo, por ejemplo oklch(from var(--brand) calc(l + 0.15) c h).

Para cada color, la herramienta también nombra el más cercano de los 148 colores con nombre de CSS, todos ellos sRGB, midiendo la distancia en OKLab, y te dice si la coincidencia es exacta (#663399 es exactamente rebeccapurple, #808080 es gray, que también se escribe grey) o solo la más cercana (#1D4ED8 es lo más cercano a royalblue).

Las seis armonías de color se construyen girando el tono: complementaria, análoga, triádica, complementaria dividida, tetrádica y cuadrada. Aquí la tetrádica es el rectángulo (+60°, +180°, +240°), que no es el cuadrado (+90°, +180°, +270°). Para #1D4ED8, el complementario es #D8A71D, el segundo color tetrádico es #A71DD8 y el segundo color del cuadrado es #D81DAC. Cada conjunto se copia como variables CSS.

Comprobar el contraste según WCAG

La relación de contraste de WCAG es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia es 0,2126 R + 0,7152 G + 0,0722 B sobre canales sRGB linealizados, y por eso el verde cuenta diez veces más que el azul.

• AA: 4,5:1 para texto normal, 3:1 para texto grande (de al menos 18 pt, o 14 pt en negrita).
• AAA: 7:1 para texto normal, 4,5:1 para texto grande.
• Contraste de elementos que no son texto, como iconos, bordes de campos y anillos de foco: 3:1.

WCAG indica que la relación calculada no se debe redondear, así que 4,499:1 no cumple 4,5:1. El caso clásico son dos grises vecinos sobre blanco. Para #767676: 76 hex = 118; 118 ÷ 255 = 0,4627; linealizado ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812; relación 1,05 / 0,2312 = 4,54:1. Para #777777: valor lineal 0,1845; relación 1,05 / 0,2345 = 4,48:1.

El comprobador de la herramienta usa exactamente esta fórmula. Muestra la relación, cinco insignias de cumple o no cumple (AA y AAA para texto normal y grande, más 3:1 para elementos de interfaz e iconos), un medidor y una vista previa en vivo. La relación lleva dos decimales, pero cuando el redondeo cruzaría un umbral muestra tres, de modo que #007BC8 sobre blanco aparece como 4,499:1 y no cumple, en lugar de mostrar un engañoso 4,50. El texto semitransparente se mezcla con el fondo antes de medir. Cuando un par no cumple AA, la herramienta sugiere el color más cercano que sí cumple: mantiene el tono y el croma OKLCH y mueve solo la luminosidad, de modo que #777777 sobre blanco pasa a ser #767676.

Nuestro azul de ejemplo #1D4ED8 sobre blanco da 6,70:1: de sobra para texto de cuerpo en AA, pero sin llegar a AAA. En mi propio trabajo busco 4,5:1 en todo el texto, incluso en los titulares grandes, porque el margen cubre pantallas baratas y habitaciones muy luminosas.

Cómo funciona el selector de color y cómo se comprueba

Las imágenes se decodifican en un lienzo en tu dispositivo y se leen píxel a píxel; no se envía nada a ningún servidor, y el tablero de la paleta (hasta 48 colores) vive solo en tu navegador. El cuentagotas de pantalla usa la API EyeDropper, que necesita una página segura (HTTPS) y un clic para empezar, y solo funciona en navegadores basados en Chromium; en Firefox y Safari usa la vía de la imagen. Las conversiones siguen las fórmulas de CSS Color 4 para sRGB, HSL, HSV y OKLCH. Los valores se redondean solo para mostrarlos (HSL y HSV con un decimal; la luminosidad OKLCH como porcentaje con dos decimales, el croma con cuatro y el tono con dos); el cumplimiento del contraste se decide con la relación sin redondear. CMYK usa la fórmula simple K = 1 − máx(R, G, B) sin perfil ICC, así que trátalo como aproximado.

Para profundizar

• Cómo elegir un color de una imagen
• HEX, RGB, HSL y OKLCH explicados
• Contraste de color y accesibilidad