HEX, RGB, HSL, CMYK y cómo comprobar el contraste del texto

Un código de color es un mismo color escrito con otra notación. HEX, RGB y HSL describen la misma luz en una pantalla, así que se convierten entre sí de forma exacta, salvo por el redondeo. CMYK describe la tinta sobre papel, por lo que su conversión a partir de valores de pantalla es solo una estimación. La ratio de contraste WCAG es un número aparte que compara lo claros que son dos colores, y determina si el texto se lee bien. Pega un color en el convertidor de colores para ver todos los formatos a la vez.

Convertidor de coloresNecesito un color en otro formatoÚsalo gratis

Si el color que necesitas está dentro de una foto, un logotipo o una captura de pantalla, primero sácalo del píxel con el selector de color de imagen y después pega el HEX aquí. Cómo elegir un color exacto de una imagen explica los pasos.

HEX y RGB son los mismos números

Un código HEX son tres pares de dígitos hexadecimales. #34D6A0 contiene un valor de rojo, otro de verde y otro de azul. Cada par es un número de 00 a FF, es decir, de 0 a 255 en decimal. Así, 34 es 52, D6 es 214 y A0 es 160, y la forma RGB es rgb(52, 214, 160).

Escribir el número en hexadecimal solo cambia su aspecto. La notación abreviada #abc equivale a #aabbcc, con cada dígito duplicado. Un código de ocho dígitos añade al final un par alfa, desde 00 para totalmente transparente hasta FF para totalmente opaco, de modo que #34D6A080 es aproximadamente medio transparente. RGBA expresa ese mismo alfa como un número de 0 a 1.

CSS también acepta nombres de color. rebeccapurple equivale a #663399. El convertidor lee los nombres a través del propio navegador, así que funcionará cualquier nombre que el navegador reconozca.

HSL describe un color como lo describimos las personas

HSL significa tono (matiz), saturación y luminosidad. El tono es un ángulo sobre la rueda de color: el rojo es 0 grados, el verde 120 y el azul 240. La saturación indica cuánto se aleja el color del gris, y la luminosidad, cuánto se aleja del negro o del blanco.

El mismo #34D6A0 es hsl(160, 66%, 52%). Su tono está entre el verde y el azul, su saturación es alta y su luminosidad está justo por encima del punto medio. HSL es la forma más fácil de editar a mano, porque puedes mantener el tono y mover solo la luminosidad para obtener un tono más claro u oscuro.

HSV es parecido a HSL, pero usa el brillo (value), es decir, la intensidad del canal más fuerte, en lugar de la luminosidad. Algunos selectores de color lo usan, así que puede que lo encuentres en otras herramientas. El convertidor lo muestra junto a HSL para que puedas compararlos.

CMYK es para la tinta, así que es una estimación

Las pantallas suman luz: el rojo, el verde y el azul juntos forman el blanco. Las impresoras restan luz con tinta: cian, magenta, amarillo y negro sobre papel blanco. Los dos sistemas no pueden coincidir exactamente, así que un valor CMYK es siempre una traducción.

El convertidor usa la fórmula sencilla. El negro es K, es decir, uno menos el mayor de los valores de rojo, verde y azul en una escala de 0 a 1. El cian, el magenta y el amarillo se calculan después a partir de lo que deja K. La fórmula ignora la tinta, el papel y el perfil de color que usa la impresora. Por eso el resultado impreso será distinto, y los colores muy brillantes pueden quedar fuera de lo que las tintas CMYK son capaces de imprimir. Usa el valor CMYK para empezar la conversación con una imprenta y pide una prueba antes de una tirada grande.

El contraste depende de la luz, no del tono

La ratio de contraste WCAG compara dos colores según su luminancia relativa. La luminancia se calcula a partir de los valores de rojo, verde y azul tras la corrección gamma, y el verde pesa más porque el ojo humano es más sensible a él. Primero se convierte cada canal desde la escala de 0 a 255, y la luminancia es 0,2126 por rojo, más 0,7152 por verde, más 0,0722 por azul.

La ratio es la luminancia más clara más 0,05, dividido entre la luminancia más oscura más 0,05. El negro sobre blanco da 21 a 1, el máximo posible. Dos colores pueden parecer bastante distintos en tono y aun así tener una ratio baja si tienen la misma luminosidad, y precisamente para detectar ese caso existe la comprobación. El mismo contraste bajo es la razón por la que los códigos QR no se escanean.

Los umbrales

WCAG 2.x establece dos niveles, y la ratio que exige depende del tamaño del texto.

• Nivel AA: 4,5 a 1 para texto normal, y 3 a 1 para texto grande.
• Nivel AAA: 7 a 1 para texto normal, y 4,5 a 1 para texto grande.

El texto grande mide 24 píxeles o más, o 18,66 píxeles y en negrita. Cualquier cosa más pequeña cuenta como texto normal. El texto gris sobre blanco es un fallo habitual. Un gris medio como #777777 sobre blanco da unos 4,48 a 1. No cumple AA para texto normal por un margen pequeño, pero sí cumple AA en títulos grandes.

El convertidor muestra la ratio redondeada a dos decimales, pero cada aprobado o suspenso usa la cifra exacta. Por tanto, un valor que aparece como 4,50 puede fallar si queda ligeramente por debajo. La comprobación mide solo una cosa. No tiene en cuenta el grosor de la fuente, el interlineado ni cómo ven el diseño las personas con daltonismo, así que prueba también la página real con sus tamaños reales.

Tintas y sombras

La franja bajo el convertidor muestra nueve pasos alrededor del color: cuatro tintas mezcladas hacia el blanco, el propio color y cuatro sombras mezcladas hacia el negro. Al hacer clic en uno se copia su código HEX. Esto resulta útil cuando necesitas un conjunto de colores relacionados, como un fondo claro, un estado al pasar el ratón y un color de texto oscuro, todos sacados de un mismo color de marca. Comprueba cada par que elijas en la sección de contraste antes de usarlo.

Cómo hacerlo con fixmint

1. Pega un color en el campo Color como HEX, RGB, HSL o un nombre CSS como rebeccapurple.
2. Lee las filas HEX, RGB, HSL, HSV y CMYK. Pulsa Copiar junto a la que necesites. CMYK aparece marcado como aproximado.
3. Escribe el color de fondo en Fondo o usa su muestra, y lee la ratio debajo de Sobre blanco, Sobre negro y Sobre tu fondo.
4. Comprueba las cuatro marcas bajo cada ratio: AA y AAA, cada una para texto normal y grande.
5. En Tintas y sombras, toca una muestra para copiarla.

Respuestas rápidas

¿El valor CMYK es exacto?

No. Es una conversión aritmética sencilla que ignora la impresora, el papel y el perfil de color. Tómalo como punto de partida y pide una prueba.

¿Una ratio de contraste aprobada hace accesible un diseño?

Significa que los colores del texto cumplen un umbral medible. La accesibilidad también depende del tamaño, el espaciado, el movimiento y la construcción de la página, así que la ratio es una guía, no una revisión completa.

¿Qué formato debo guardar en una hoja de estilos?

El que te resulte más fácil de leer y editar. HEX es compacto y muy común. HSL es más fácil de ajustar a mano, porque cambias la luminosidad sin alterar el tono.