El azul de tu marca es el mismo color en la pantalla, en el CSS y en el folleto impreso, pero se escribe de cuatro maneras que no se parecen en nada. Saber qué dice cada notación, y cuál te conviene en cada momento, ahorra mucho tiempo.
Dos físicas opuestas: luz que suma, tinta que resta
Una pantalla emite luz. Cada píxel tiene tres diodos, rojo, verde y azul, y el color nace de sumar esas tres emisiones: los tres al máximo dan blanco y los tres apagados dan negro. Es la síntesis aditiva, y de ahí salen HEX, RGB y HSL, que no son más que tres formas de decir cuánta luz enciende cada diodo.
El papel funciona al revés. No emite nada: refleja la luz de la habitación, y cada tinta que depositas resta una parte de esa luz. Se parte del blanco del papel y se va oscureciendo con cian, magenta y amarillo. En teoría esos tres juntos darían negro; en la práctica dan un marrón sucio y encharcan el papel, así que se añade una cuarta tinta: la K de CMYK, de key, la plancha clave que aporta el detalle y el texto.
HEX y RGB dicen lo mismo con otra caligrafía
Toma el azul #2563eb. Detrás de esa cadena hay tres números en base 16: 25 para el rojo, 63 para el verde y eb para el azul. Traducidos a decimal son 37, 99 y 235, que es justo lo que escribe la otra notación, rgb(37, 99, 235). Mismo color, distinta forma de anotarlo. Y cuando las tres parejas repiten carácter, el código se abrevia: #ffffff se queda en #fff.
El hexadecimal gana por comodidad: es corto y es lo que devuelven casi todos los cuentagotas. La notación funcional resulta más útil cuando necesitas transparencia, porque el cuarto valor del canal alfa se lee de corrido y permite superponer una capa translúcida sin inventarte un color nuevo.
HSL: el único que se puede ajustar a ojo
Ese mismo azul en HSL es hsl(221, 83%, 53%), y aquí los números sí significan algo. El primero es el tono, una posición en la rueda de color de 0 a 360 grados: rojo en el 0, verde en el 120, azul en el 240. El segundo es la saturación, del gris total al color más puro. El tercero, la luminosidad: 0 % es negro, 100 % es blanco y 50 % es el color en su punto más vivo.
La ventaja salta a la vista en cuanto necesitas una familia de colores en lugar de un color suelto. Manteniendo el tono en 221 y la saturación en 83 %, basta con mover la luminosidad para obtener el fondo suave de una tarjeta al 92 %, el botón en reposo al 53 %, el estado de puntero al 45 % y el texto sobre fondo claro al 32 %. Intenta eso en hexadecimal y estarás probando códigos a ciegas hasta que uno pegue.
Antes de mandar nada a imprenta
Los dos espacios no cubren la misma cantidad de colores. Un verde fosforito o un naranja eléctrico que en pantalla resultan deslumbrantes sencillamente no existen en tinta, y al convertirlos se apagan; de ahí que muchas identidades definan versiones distintas del logotipo para pantalla y para papel. Tampoco hay una fórmula única de RGB a CMYK: el resultado depende del perfil de color, del papel y de la máquina, así que los valores definitivos los da la imprenta, nunca una conversión rápida.
Elegir el color no termina hasta comprobar el contraste
Un color puede ser precioso y aun así dejar un texto ilegible. Las pautas de accesibilidad WCAG fijan una relación de contraste mínima entre el texto y su fondo: 4,5:1 para el texto de tamaño normal y 3:1 cuando la letra es grande, a partir de unos 24 píxeles o de 19 en negrita. Los bordes de los campos y los indicadores de foco piden también 3:1.
El azul del ejemplo lo ilustra bien. Texto blanco sobre #2563eb ronda el 5,2:1 y cumple de sobra; texto negro sobre ese mismo fondo se queda en torno al 4:1 y no llega al mínimo, justo al revés de lo que dicta la intuición. La luminosidad de HSL ayuda a corregirlo sin perder la identidad: baja unos puntos el valor del fondo y el texto blanco gana margen de sobra.
Y una regla que no depende del contraste: el color nunca debe ser el único portador de información. Si un campo erróneo solo se marca en rojo, quien no distingue el rojo del verde —cerca de un 8 % de los hombres— no verá el error.
Sigue trabajando con tu paleta
Elige el color con el selector o pega su código y copia el formato que necesites. A partir de ahí puedes montar un fondo con el generador de gradientes CSS, aplicar el color de marca sobre una foto con la marca de agua para imágenes o preparar los archivos finales con el conversor de imágenes y el compresor de imágenes. Para juzgar solo los valores de luminosidad de una foto, pásala por escala de grises. Todas las utilidades están en herramientas de archivos.