Convertidor de color

HEX y RGB son lo mismo escrito de otra forma. `#663399` son tres pares de dígitos hexadecimales — 102, 51 y 153 — y `rgb(102 51 153)` son esos números en decimal. Convertir entre ambos no puede perder nada, porque lo único que cambia es la base.

HSL y HSV describen el mismo color desde el punto de vista de una persona y no del de una pantalla. En lugar de cuánto rojo, verde y azul mezclar, dan el tono como un ángulo en un círculo cromático, luego la saturación y la luminosidad. Por eso los diseñadores recurren a ellos: aclarar un color un diez por ciento es un número en HSL y tres nada evidentes en RGB.

Todo lo demás en esta página es una reordenación de los mismos tres números. El CMYK no: describe tinta sobre papel, y cómo se ve realmente una mezcla de cian, magenta, amarillo y negro depende de la máquina, del papel y del perfil de color con el que trabaje la imprenta. Ninguna fórmula tiene acceso a eso.

Lo que obtienes aquí es la conversión nominal de siempre, la misma que hace cualquier herramienta que ofrezca CMYK sin preguntarte por un perfil. Sirve como punto de partida y no es un valor listo para imprenta. Si el color importa de verdad, la imprenta querrá el hex y hará la separación con su propio perfil.

El alfa se conserva: `#663399cc`, `rgba(102, 51, 153, 0.8)` y `rgb(102 51 153 / 80%)` significan el mismo color al 80% de opacidad, y las tres se leen correctamente. La forma hex de ocho dígitos es la que menos se ve y la que descoloca a más herramientas, cuando no es más que la de seis con un cuarto par de dígitos para la opacidad.

En CMYK no hay equivalente, porque la tinta se pone en el papel o no se pone. Cuando el color que introduces es parcialmente transparente, las cifras CMYK lo describen como si fuera opaco, que es la única lectura razonable.

Debajo de las notaciones hay dos números: la relación de contraste de tu color sobre blanco y sobre negro. Salen de la definición WCAG, que no es un promedio de brillo — los canales están ponderados, porque el ojo es mucho más sensible al verde que al azul, y cada uno se lineariza antes.

Su uso práctico es decidir qué color de texto poner sobre un fondo. 4,5 es el umbral del texto corrido y 3 el de los titulares grandes, así que un fondo cuya mejor relación baje de 4,5 pide letra más grande u otro fondo. Es la forma más rápida de descubrir que un color corporativo que queda bien en una maqueta no pasará una auditoría de accesibilidad.

Un color que no se puede leer se declara ilegible en vez de sustituirse en silencio. Suena obvio y es poco habitual: la manera corriente de construir esta página es darle la cadena al navegador y leer lo que haya calculado, cuatro líneas de código que responden a `#12345` con el color que hubiera antes.

Así, un dígito que falta parece una conversión correcta, y te enteras cuando el tono no encaja en otro sitio. Aquí se analiza de forma explícita. Cuesta una tabla con las ciento cuarenta y ocho palabras clave de CSS y te da una queja en lugar de una respuesta equivocada y verosímil.