Conversor de color y comprobación de contraste WCAG

Funciones

• Conversiones entre HEX, RGB, HSL, HSV, HWB y CMYK mostradas juntas, cada una copiable por separado
• Junto a ellas, OKLCH, OKLab, LCH, Lab y XYZ: todos impresos como CSS válido (lab / oklch / color())
• Temperatura de color correlacionada (CCT) con Duv, para ver si un neutro está a 2700 K o a 6500 K
• ⚠️ Un color saturado no tiene temperatura de color; esa fila lo dice y explica por qué, en lugar de fabricar un número
• Una tira de referencia con siete temperaturas habituales (vela, blanco cálido, neutro, luz de día, nublado), cada una pulsable para cargarla como primer plano
• El color ANSI 16 y ANSI 256 de terminal más cercano, con una secuencia de escape lista para usar
• También el color inverso (canales invertidos) y el complementario (tono +180°): dos respuestas distintas a «el color opuesto»
• HEX de 3, 4, 6 y 8 dígitos, además de la transparencia rgba / hsla
• El selector, los campos de texto y la vista previa se mantienen sincronizados; un clic intercambia primer plano y fondo
• Contraste WCAG con cuatro veredictos: AA 4,5:1, AAA 7:1, texto grande AA 3:1 y texto grande AAA 4,5:1
• Sugiere el color de texto más legible sobre el fondo elegido, con su proporción
• Indica claramente cuándo el contraste se calcula sobre el valor opaco porque el primer plano tiene transparencia

Cómo se usa

1. Escribe un valor de color o elige uno con la muestra
2. Define el primer plano y el fondo por separado; la vista previa queda entre ambos
3. Lee abajo los valores convertidos y los cuatro veredictos de contraste
4. Usa el botón de copiar de cualquier fila para llevarte ese formato

Preguntas frecuentes

¿Qué diferencia hay entre el color inverso y el complementario?

El inverso invierte cada canal (`r → 255 - r`), que es lo que una pantalla entiende por «negativo»: el filtro de un editor de fotos. El complementario gira el tono 180° y mantiene la saturación y la luminosidad, que es la oposición que entiende una paleta. En un tono saturado y medio quedan cerca; en colores pálidos, oscuros o grises se separan mucho. Conviene notar en particular que el gris no tiene complementario (no hay tono que girar, así que vuelve igual) pero sí tiene inverso; por eso se muestran ambas filas. Además, el complementario conserva la luminosidad de HSL, no la luminancia relativa de WCAG: el complementario del amarillo es un azul violáceo, y ambos difieren varias veces en términos de luminancia, así que al emparejar fondo oscuro con texto claro hazle caso a la columna de contraste, no a la rueda de color.

¿Qué significa «no aplicable» en la fila de temperatura de color?

La temperatura de color describe el color de un cuerpo negro: blanco, gris y el blanco cálido de una bombilla incandescente. Responde a «¿este neutro es cálido o frío?». Un verde saturado no tiene temperatura de color: forzar su cromaticidad sobre el lugar del cuerpo negro devuelve un número de aspecto plausible (el amarillo puro sale a 3927 K) que no significa nada. Por eso esos colores dicen «no aplicable» en vez de recibir una cifra. Un color solo un poco fuera del lugar sí recibe temperatura y su Duv (la desviación), y por encima de 0,02 lleva además una nota de que la cifra solo se sostiene formalmente.

¿Qué diferencia hay entre HSL y HSV?

Ambos son tono más dos componentes, pero el segundo componente cambia: la L de HSL es la luminosidad, donde L=100% es siempre blanco; la V de HSV es el valor, donde V=100% es el tono puro. Los paneles de selección suelen trabajar en HSV porque es más fácil de apuntar, mientras que en CSS se tiende a usar HSL.

¿Es exacta la conversión a CMYK?

No, y no puede serlo, por eso la herramienta lo dice y usa la fórmula ingenua, sin perfil de color. CMYK describe cuánta tinta se deposita, y el aspecto de esa tinta sobre el papel depende de la tinta, el papel, la prensa y el perfil de color (SWOP, FOGRA…); el mismo `C 0 M 100 Y 100 K 0` se imprime como rojos distintos según el perfil. Peor aún: un color de pantalla no tiene un único equivalente CMYK, el negro pleno puede imprimirse como `C0 M0 Y0 K100` o como un negro rico `C60 M40 Y40 K100`, y la fórmula ingenua solo da el primero. Usa estos números para estimar la cobertura de tinta, no para igualar color.

¿Qué contraste necesito?

WCAG 2 nivel AA exige al menos 4,5:1 para el texto de cuerpo y 3:1 para el texto grande (aproximadamente 24px, o 18,66px en negrita y más). El nivel AAA sube a 7:1 y 4,5:1. La proporción sale de la luminancia relativa de los dos colores y es independiente de la fuente y del tamaño.

¿Por qué difiere un poco de otras herramientas?

Por el redondeo. Esta herramienta usa la fórmula tal como está escrita en la especificación WCAG y muestra dos decimales. Cuando una proporción queda justo en 4,5 o en 7, esa pequeña diferencia puede darle la vuelta al veredicto; en ese caso, quédate con la lectura más conservadora.

¿Cómo se trata el contraste de un color semitransparente?

Se calcula sobre el valor opaco, y la herramienta lo avisa. Lo que se ve realmente depende de lo que haya detrás del color, así que una cifra estricta exigiría componerlo antes con el fondo; toma el número como orientación.

¿Para qué sirven OKLCH, Lab y LCH, y en qué se diferencian de HSL?

La diferencia está en qué significan los números. HSL y RGB dependen del dispositivo: describen cuánta luz debe emitir una pantalla sRGB, así que el mismo `hsl(200 50% 50%)` se ve algo distinto en otra pantalla. Lab, LCH, OKLab y OKLCH son perceptualmente uniformes: las distancias entre valores se corresponden aproximadamente con diferencias que el ojo percibe de verdad. Dos consecuencias prácticas: la diferencia de color conviene juzgarla en los segundos (convierte los dos colores y compara los números, que siguen el juicio humano mucho mejor que comparar bytes RGB), y los degradados conviene construirlos en los segundos (un degradado de azul a amarillo en RGB pasa por un tramo de gris turbio, la llamada zona muerta; en OKLCH no). CSS ya admite `oklch()` y `lab()`, así que estos valores se pegan tal cual en una hoja de estilos. ¿Cuál elegir? OKLCH es la recomendación actual: evita el plegado del tono de CIE Lab en la zona del azul y su luminosidad sigue mejor al ojo. Lab y LCH siguen ahí porque Photoshop, Figma y la industria de la impresión llevan décadas usándolos. ⚠️ Una trampa habitual: la luminosidad de `lab()` va de 0 a 100 y la de `oklab()` de 0 a 1. La misma letra con un rango cien veces distinto, y confundirlas no da ningún error: solo un color completamente diferente.

¿Por qué los valores Lab difieren un poco de los de otro sitio?

Normalmente por el punto blanco. Definir Lab exige nombrar un punto blanco, es decir, qué cuenta como blanco puro. El de sRGB es D65 (algo azulado); el `lab()` de CSS exige D50 (más cálido, heredado de la impresión y la gestión de color). Esta herramienta sigue a CSS y usa D50, así que los números coinciden con lo que renderiza el navegador. Algunas herramientas se saltan la adaptación y usan D65 directamente, lo que convierte el rojo de `54.29 80.8 69.89` en `53.24 80.09 67.2`: números de aspecto plausible que simplemente no concuerdan con el navegador ni con tu software de diseño. OKLab y OKLCH no tienen esa ambigüedad: el punto blanco va integrado en las matrices.

¿Son fiables las filas de color ANSI de terminal?

«Qué celda es la más cercana» está bien definido; «qué color ves» no. Las paletas del terminal las configura cada cual, así que la misma secuencia de escape se ve distinta en el terminal de otro; la aplicación no puede controlarlo. Por eso estas filas responden a «la celda más cercana con la paleta convencional» (la de VGA / consola de Windows), que es lo que quieres para elegir colores de un tema de terminal o para darle a la salida de un CLI un color que encaje aproximadamente. Si necesitas un color fijo en un script, usa color real (HEX de 24 bits), que es independiente de la paleta del usuario. Conviene saber que el cubo de 256 colores avanza de 0/95/135/175/215/255 en vez de un 0/51/102/… uniforme: eso es lo que hacen los terminales, y esta herramienta lo sigue.