¿Qué son HEX, RGB y HSL?
HEX (#RRGGBB) representa cada canal de color (rojo, verde, azul) en hexadecimal de dos dígitos, del 00 al FF. Es el formato más común en HTML y CSS. RGB (red, green, blue) usa valores enteros de 0 a 255 por canal; es el modelo nativo de las pantallas. HSL (hue, saturation, lightness) describe el color por su tono en grados (0–360), saturación en porcentaje y luminosidad en porcentaje; es el más intuitivo para ajustar colores manualmente porque separar "qué color es" de "qué tan brillante es" resulta natural.
Cómo se convierte HEX a RGB y HSL
HEX a RGB: cada par de dígitos hexadecimales se convierte a decimal. Ej. #3B82F6 → R=59 (3B), G=130 (82), B=246 (F6) → rgb(59, 130, 246). RGB a HSL: se normalizan los canales a [0,1], se calculan el máximo y mínimo para obtener la luminosidad (L = (max+min)/2), la saturación (S = delta / (1 − |2L−1|)) y el tono (H en grados, según qué canal es el máximo).
Ejemplo: color azul de Tailwind CSS
El azul primario de Tailwind (blue-500) es #3B82F6. Convertido: RGB = rgb(59, 130, 246). HSL = hsl(217, 91%, 60%). En HSL se aprecia que es un tono azul (217°), muy saturado (91%) y de luminosidad media-alta (60%). Para oscurecerlo en CSS basta con reducir la L: hsl(217, 91%, 40%) da el equivalente aproximado a blue-700.
Cuándo usar cada formato en CSS
Usa HEX cuando copias colores de un diseño en Figma o Sketch; es el más compacto. Usa RGB (o rgba) cuando necesitas transparencia: rgba(59, 130, 246, 0.5). Usa HSL cuando quieres crear variantes de un color por código: cambiar solo la luminosidad en una variable CSS genera paletas completas sin calcular nada. En CSS moderno, oklch() es el sucesor de HSL para paletas más uniformes perceptualmente.