HEX, RGB, HSL: qué formato de color elegir en CSS y por qué
Diferencias prácticas entre HEX, RGB, HSL y OKLCH, cuándo usar cada uno y cómo convertir entre ellos sin dolor.
Cuatro notaciones, un mismo color
CSS acepta #3b82f6, rgb(59 130 246), hsl(217 91% 60%) y oklch(62% 0.19 259) como el mismo azul. Cada notación existe por una razón distinta y elegir bien impacta en legibilidad, mantenibilidad y accesibilidad.
HEX: el estándar histórico
#RRGGBB es compacto (7 caracteres), soportado en todas partes desde 1996 y familiar para diseñadores. Su versión de 4 caracteres #RGB es un atajo perezoso: #f00 equivale a #ff0000. La transparencia se añade como #RRGGBBAA (por ejemplo #3b82f680 es azul al 50%).
Cuándo usarlo: tokens de diseño, exports de Figma, cualquier lugar donde queremos el string más corto posible.
RGB(A): matemático y directo
rgb(59 130 246 / 50%) deja claro qué canal es cada valor. Los valores son 0-255 (o 0-100%) y el alfa 0-1 o porcentaje. Es la notación que mejor cuadra cuando manipulas píxeles por código (canvas, procesado de imágenes) porque coincide 1:1 con lo que hay en memoria.
Cuándo usarlo: cuando calculas colores en JavaScript o cuando quieres alfa dinámico sin duplicar el color base.
HSL: pensado para diseñadores
hsl(217 91% 60%) describe matiz (0-360°), saturación (0-100%) y luminosidad (0-100%). Sus superpoderes:
- Cambiar el matiz sin tocar S/L da paletas armónicas: 217, 337, 97 son triadas.
- Bajar la luminosidad genera variantes hover/active con una línea.
- Es intuitivo:
hsl(0 0% 20%)es "un gris oscuro" sin pensar en canales RGB.
Cuándo usarlo: sistemas de diseño con tokens semánticos (--primary: hsl(217 91% 60%) y variantes derivadas).
OKLCH: el futuro y el presente
oklch() (soporte estable desde 2023) usa un espacio de color perceptualmente uniforme: un cambio de 10 unidades de L significa el mismo cambio de brillo percibido para cualquier matiz. HSL falla ahí: un amarillo con L=50% brilla mucho más que un azul con L=50%.
Cuándo usarlo: paletas nuevas, gradientes suaves, escalas de color accesibles. Tailwind v4 lo adoptó como formato interno.
Cómo convertir de forma fiable
A ojo es imposible: #3b82f6 no te dice si es azul cian o azul violeta. Un conversor HEX/RGB/HSL hace la conversión matemática exacta con vista previa. Para OKLCH usa color-mix() en CSS moderno.
Buenas prácticas
- Un solo formato por proyecto para tokens: si eliges HSL, todos los
--color-*en HSL. - Guarda el color sin alfa en la variable y aplica el alfa al usarlo:
color-mix(in oklch, var(--primary) 40%, transparent). - Contraste WCAG: sea cual sea la notación, mide con una herramienta (contrast ratio mínimo 4.5:1 para texto normal).
- Dark mode: define dos paletas completas, no inviertas colores automáticamente. Un simple
filter: invert()casi nunca queda bien.
En resumen: HEX para compartir, RGB para calcular, HSL para razonar, OKLCH para el futuro.