Conversor de colores

El mismo color, en el idioma de cada herramienta

Los diseñadores te dan un código hex, una hoja de estilos quiere HSL, un trabajo de imprenta pide CMYK, un token de diseño usa OKLCH y un editor de imágenes habla en RGB. Un solo color tiene muchas caras, y pasar de una a otra a mano es propenso a errores. Este conversor toma cualquier color que puedas escribir en CSS y muestra a la vez todas las representaciones habituales.

Los formatos

• HEX es el más común en la web: #3b82f6, con un par alfa para la transparencia.
• RGB da los componentes rojo, verde y azul de 0 a 255, en la sintaxis moderna separada por espacios y en la forma antigua con comas.
• HSL describe un color por tono, saturación y luminosidad, lo que es más fácil de razonar cuando quieres una versión más clara o más apagada del mismo color.
• HSV o HSB es el modelo detrás de muchos selectores de color, con valor o brillo en lugar de luminosidad.
• HWB mezcla un tono con una cantidad de blanco y de negro.
• CMYK es el modelo de impresión, en cian, magenta, amarillo y clave (negro). La conversión de aquí es la matemática simple, no el resultado de un perfil de impresión, así que es orientativa y no para imprenta.
• OKLCH es un modelo perceptual moderno en el que pasos iguales se ven igual de distintos, así que es bueno para construir paletas coherentes. CSS lo admite de forma nativa.

Qué puedes escribir

Cualquier cosa que el navegador entienda como color CSS: hex de tres, seis u ocho dígitos, con o sin almohadilla, rgb() y hsl() en cualquiera de las dos sintaxis, hwb(), lab(), lch(), oklab(), oklch(), color() y los unos 140 colores con nombre. También se ofrece un selector. La muestra enseña el color, con un damero detrás para que se vea la transparencia.

El contraste de un vistazo

Dos cifras muestran la relación de contraste del color con el blanco y con el negro, con la fórmula de WCAG. Dan una idea rápida de qué color de texto poner encima: hace falta una relación de 4,5:1 o más para que un texto normal se considere accesible. Para una comprobación completa de un par de texto y fondo, usa el comprobador de contraste.

Lo que no hace

Los valores redondeados pueden diferir en una unidad de lo que muestra otro programa. Los colores fuera del rango RGB estándar, como los de espacios de gama amplia, se convierten al más cercano representable. No hay gestión de color ni perfiles, así que los valores CMYK deben comprobarse en tu flujo de impresión.