Códigos de color hex, RGB, HSL y OKLCH: qué significan

Los códigos de color hex, como #7c3aed, son la forma más habitual de escribir un color en pantalla: una # seguida de seis caracteres que indican la cantidad de rojo, verde y azul. RGB escribe los mismos números en decimal, HSL los reordena en tono, saturación y luminosidad, y OKLCH describe el color como lo percibe el ojo. Son notaciones distintas para los mismos colores, y cada una es mejor en un trabajo distinto.

Cómo funcionan los códigos de color hex

Un código hex son tres pares de dígitos en base 16: #RRGGBB. La base 16 cuenta del 0 al 9 y luego de la a a la f, así que cada par va de 00 (nada) a ff (255, máximo). En #7c3aed, el rojo es 7c (124), el verde es 3a (58) y el azul es ed (237): mucho azul, bastante rojo y poco verde, que es violeta. Tres canales de 256 valores dan 16.777.216 colores posibles.

• Forma abreviada: #f0c es lo mismo que #ff00cc. Cada dígito se duplica, así que solo sirve para colores cuyos pares se repiten.
• Transparencia: un código de ocho dígitos añade el alfa al final. #7c3aed80 es el violeta con cerca del 50% de opacidad, porque 80 es 128 de 255.
• Las mayúsculas no importan: #7C3AED y #7c3aed son idénticos.
• Los grises tienen tres pares iguales: #767676, #1a1a1a y #f4f4f4 son todos neutros.

RGB: los mismos números en decimal

RGB escribe los tres canales como números normales de 0 a 255. El CSS moderno los separa con espacios y añade la transparencia tras una barra; la sintaxis antigua con comas y rgba() siguen funcionando en todas partes. RGB es útil cuando una herramienta o una API pide números, o cuando quieres leer de un vistazo la composición de un color.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: tono, saturación y luminosidad

HSL describe un color por su tono como un ángulo en la rueda de color (0 es rojo, 120 verde, 240 azul), su saturación de gris (0%) a color pleno (100%) y su luminosidad de negro (0%) pasando por el color puro (50%) hasta blanco (100%). Es fácil de retocar a mano: para un violeta más oscuro, baja el último número.

El problema es que la luminosidad de HSL es una fórmula, no una medida de lo claro que se ve un color. El amarillo con un 50% de luminosidad se ve mucho más brillante que el azul con un 50%. Si creas una paleta manteniendo igual la luminosidad HSL, los colores no se verán igual de claros, y por eso los arcoíris por defecto parecen rayados. Mira los degradados arcoíris para ver el resultado.

OKLCH: el color tal como lo ves

OKLCH viene de Oklab, un espacio de color publicado por Björn Ottosson en 2020 y que ya forma parte del CSS. Usa tres valores: L es la luminosidad percibida de 0% a 100%, C es el croma, lo colorido que es, de 0 para el gris hasta cerca de 0,37 para los colores más vivos, y H es el ángulo del tono. Los mismos valores de L se ven de verdad igual de claros, así que puedes cambiar una cualidad sin alterar las demás.

OKLCH brilla en los degradados. Al mezclar en sRGB simple, el valor por defecto de los colores hex, se traza una línea recta por el cubo RGB, y los colores de lados opuestos de la rueda se encuentran en gris. Mezclar en OKLCH mantiene el croma y recorre la rueda de tonos.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Qué código de color usar en cada caso

Para probar cualquiera de estos valores, oklch.com muestra un color en todas las notaciones y avisa cuando queda fuera del rango de una pantalla, y la referencia de color de MDN cubre todas las sintaxis. Si estás eligiendo colores en lugar de escribirlos, cómo elegir los colores de una marca es el siguiente paso, y el contraste de color te enseña a comprobar que el texto sigue siendo legible.