Hex, RGB, HSL y CMYK: los códigos de color explicados como es debido
Cuatro formas de escribir el mismo color, y la única que vuelve fácil construir una paleta. Cómo leer un código hex a ojo, por qué el CMYK no puede igualar tu pantalla y qué exige realmente el contraste.
Actualizado el 22 de agosto de 20268 min de lectura
Hex, RGB, HSL y CMYK son cuatro notaciones para lo mismo, igual que un medio, 0,5 y 50% son tres notaciones para una sola cantidad. Convertir entre las tres primeras es aritmética exacta y no se pierde nada. Lo interesante no es la conversión: es que uno de estos modelos vuelve casi mecánico el diseño de una paleta, y casi nadie lo usa porque los códigos hex son lo primero que les dieron.
Las cuatro notaciones
| Notación | Ejemplo | Qué dice | Dónde te la encuentras |
|---|---|---|---|
| Hex | #3B82F6 | Rojo, verde y azul en base 16 | CSS, herramientas de diseño, manuales de marca |
| RGB | rgb(59, 130, 246) | Los mismos tres números, de 0 a 255 | CSS, editores de imagen, código |
| HSL | hsl(217, 91%, 60%) | Tono, saturación, luminosidad | Diseño de paletas, temas |
| CMYK | 76, 47, 0, 4 | Porcentajes de tinta para cuatro planchas | Imprenta, y solo imprenta |
Hex y RGB son la misma información escrita de dos maneras. Un código hex son seis dígitos en tres pares —rojo, verde, azul—, y cada par es un número de 00 a FF, que en cuentas normales es de 0 a 255. Así, #3B82F6 es rojo 3B (59), verde 82 (130), azul F6 (246). El conversor de hex a RGB lo hace al instante, pero conviene conocer la estructura porque te permite leer un código aproximadamente a ojo.
Los códigos hex de tres dígitos son una abreviatura en la que cada dígito se duplica: #F60 significa #FF6600. Y un código de ocho dígitos añade un cuarto par para el canal alfa, así que #3B82F680 es ese mismo azul al 50% de opacidad. Ambos aparecen en hojas de estilo reales y desconciertan a quien espera seis dígitos.
Por qué HSL es el que vale la pena aprender
RGB describe el color tal y como lo produce una pantalla —tres luces con tres intensidades—, lo cual es una descripción del hardware y no de lo que ves. Es casi inútil para tomar decisiones de diseño. Pide una versión un poco más oscura de #3B82F6 y RGB no da ninguna respuesta obvia. Pregunta cuál de dos colores está más saturado y tienes que ponerte a pensar.
HSL describe el color como habla de él la gente. El tono es la posición en la rueda de color, de 0 a 360 grados: rojo en 0, verde en 120, azul en 240. La saturación va del 0% (gris) al 100% (vivo). La luminosidad va del 0% (negro) pasando por el 50% (el color puro) hasta el 100% (blanco). Cada uno es un mando aparte, y cada mando hace exactamente una cosa.
- Un tono más oscuro del mismo color. Mantén tono y saturación y baja la luminosidad.
hsl(217, 91%, 60%)pasa ahsl(217, 91%, 45%): un estado hover, resuelto. - Una versión apagada para fondos. Mantén tono y luminosidad y baja la saturación al 15%. Seguirá leyéndose como parte de la misma familia.
- Un acento complementario. Suma 180 al tono. Suma 30 para un vecino que armonice en lugar de contrastar.
- Una escala completa de tintes para un sistema de diseño. Un tono, una saturación y luminosidades de 95, 90, 80, 65, 50, 40, 30 y 20. Eso son ocho pasos a partir de una sola decisión.
- Una paleta que encaja. Elige tres o cuatro tonos repartidos por igual en la rueda y mantén constantes saturación y luminosidad. Los colores escogidos así combinan solos.
Nada de eso está disponible en hex o RGB sin convertir, que es el argumento práctico para pasar tu color de marca por el conversor de RGB a HSL una vez y pensar en ese espacio. El generador de paletas aplica la misma lógica de rotación del tono —en un espacio de color perceptual, para que la luminosidad se mantenga realmente igual— si prefieres partir de un resultado en lugar de de la aritmética.
Hex, RGB, HSL y CMYK en todas las direcciones: convertidos en tu dispositivo, sin enviar nada a ninguna parte.
Convertir un código de colorEl CMYK es otro tipo de conversión
Las tres primeras notaciones son descripciones intercambiables de lo mismo. El CMYK no lo es, y aquí es donde el color realmente se pierde en lugar de solo reescribirse. El RGB es aditivo: una pantalla emite luz roja, verde y azul, y las tres al máximo dan blanco. El CMYK es sustractivo: las tintas cian, magenta, amarilla y negra absorben luz del papel blanco, y más tinta significa más oscuro.
La consecuencia es que el conjunto de colores que puede producir la tinta es menor que el que puede emitir una pantalla, y la diferencia es mayor justo donde a los diseñadores les gusta trabajar. Los azules vivos, los verdes eléctricos, los naranjas intensos y todo lo neón existen en pantalla y no tienen equivalente en tinta. Una conversión tiene que sustituirlos por el color imprimible más cercano, y sobre papel eso se ve más plano que lo que aprobaste en el monitor.
| Color | En pantalla | Impreso en CMYK |
|---|---|---|
Azul puro #0000FF | Eléctrico, saturado | Bastante más apagado y más violáceo |
Verde brillante #00FF00 | Vivo | Considerablemente más oscuro y grisáceo |
| Tonos neón y fluorescentes | Luminosos | Inalcanzables sin una tinta directa |
| Negro intenso para texto | Sólido | Correcto, pero usa negro rico en áreas grandes |
| Tonos de piel, tierras y pasteles | Normales | Se reproducen muy bien |
De ahí salen dos hábitos prácticos. Comprueba tus colores de marca clave en el conversor de RGB a CMYK antes de comprometerte con ellos para algo que se vaya a imprimir, para descubrir un problema de gama en la fase de diseño y no en la de pruebas. Y para grandes áreas negras no uses negro de una sola plancha: un negro rico que mezcle algo de cian, magenta y amarillo evita el gris deslavado que produce el negro solo en una superficie grande.
Sacar colores de una imagen
Muchas veces el color que quieres ya existe en una fotografía, en la captura del sitio de un competidor o en un logotipo que alguien te envió como PNG sin manual de marca. El generador de paletas tiene un cuentagotas que lee el valor exacto de cualquier píxel de la imagen que abras; pega ese código en el selector de color para obtener las cuatro notaciones a la vez.
Dos precauciones al tomar color de fotografías. La compresión JPEG altera el color sutilmente, sobre todo en los bordes y en zonas planas, así que el píxel que muestreas puede ser un artefacto de compresión y no el color verdadero: muestrea del centro de una región plana amplia y no cerca de un límite. Y una fotografía arrastra la iluminación con la que se tomó, así que un rojo de marca fotografiado con luz cálida de interior se muestrea como naranja. Para un logotipo, pide el archivo vectorial o el código hex real; el muestreo es para cuando no existe nada mejor.
El contraste y los números que importan
Uses la notación que uses, las decisiones de color están limitadas por la legibilidad. Las guías de accesibilidad lo expresan como una relación de contraste entre el texto y su fondo: al menos 4,5:1 para texto corrido normal y 3:1 para texto grande —unos 24 px, o 19 px en negrita— y para los límites visuales de controles como botones y campos de formulario.
Aquí HSL solo sirve como guía aproximada, porque el cálculo se basa en la luminancia relativa —lo brillante que se ve realmente un color—, no en la luminosidad de HSL. Con la misma luminosidad HSL, el amarillo es mucho más brillante que el azul: #FFFF00 sobre #0000FF da en torno a 8:1. Y dos colores plenamente saturados con la misma luminosidad —un rojo puro y un verde puro al 50%— se ven violentamente distintos pero solo alcanzan unos 2,9:1, que no llega ni al mínimo de 3:1 y resulta aún peor para quien tiene daltonismo rojo-verde. Ese solo fallo explica buena parte de las interfaces inaccesibles; comprobar la relación real en lugar de fiarse de la diferencia de tono lo evita.
Preguntas frecuentes
¿Cómo convierto un código hex a RGB?
Divide los seis dígitos en tres pares y lee cada uno como un número en base 16 de 00 a FF, es decir de 0 a 255. Así `#3B82F6` es rojo 59, verde 130, azul 246. Un código de tres dígitos como `#F60` es la abreviatura de `#FF6600`, con cada dígito duplicado, y uno de ocho dígitos añade un cuarto par para la transparencia alfa.
¿HSL es mejor que RGB?
Para describir un color a una pantalla son equivalentes: cada valor HSL corresponde exactamente a un valor RGB. Para tomar decisiones de diseño, HSL es mucho mejor, porque separa tono, saturación y luminosidad en mandos independientes, de modo que los tonos más oscuros, las variantes apagadas y las paletas que combinan pasan a ser un cambio de un número en lugar de una conjetura sobre tres.
¿Por qué mis colores se ven distintos al imprimirlos?
Las pantallas emiten luz y las impresoras la absorben, y la tinta sencillamente no alcanza algunos colores que una pantalla puede producir: azules vivos, verdes brillantes y cualquier cosa neón, en particular. La conversión sustituye por el color imprimible más cercano, que se lee más apagado. Comprobar los colores clave en CMYK antes de comprometerte evita la sorpresa en la prueba de imprenta.
¿Qué relación de contraste necesito para que un texto sea legible?
Al menos 4,5:1 entre texto y fondo para texto corrido normal, y 3:1 para texto grande de unos 24 px o 19 px en negrita, así como para los límites de los controles interactivos. Lo que impulsa ese número es la luminancia relativa —lo brillante que se ve realmente cada color—, así que dos colores con tonos distintos pero brillo parecido fallarán por muy diferentes que parezcan. La luminosidad de HSL es solo una guía aproximada: un rojo puro y un verde puro comparten el 50% de luminosidad y aun así solo alcanzan unos 2,9:1.