HEX, RGB y HSL

Cada formato enfatiza modelos mentales distintos. Conocer la matemática a alto nivel evita bugs silenciosos de redondeo.

HEX

#RRGGBB empaqueta tres canales de byte en hexadecimal:

• #2563EB → rojo 0x25 (37), verde 0x63 (99), azul 0xEB (235)

La forma abreviada #RGB duplica nibbles: #26E → #2266EE.

HEX es compacto en entregas de diseño y diffs de Git. Es incómodo para ediciones «10% más oscuro» sin conversor.

RGB

rgb(37, 99, 235) nombra canales directamente — fácil de validar contra hojas de especificación de diseño que listan valores 0–255.

La notación funcional también soporta alpha:

rgba(37, 99, 235, 0.85)

CSS moderno prefiere rgb(37 99 235 / 0.85) con canales separados por espacios.

HSL

hsl(hue, saturation, lightness) se alinea con el lenguaje de diseñadores:

• Hue — ángulo en la rueda de color (0–360)
• Saturation — vívido vs gris
• Lightness — claro vs oscuro

Ejemplo: hsl(221, 83%, 53%) coincide con #2563EB.

HSL ayuda a generar estados hover/active: mantén el tono, baja ligeramente la claridad.

Cuidado: la «lightness» de HSL no es uniformidad perceptual. Dos tonos al 50% de claridad pueden verse desiguales — usa herramientas de contraste para pares de texto.

Redondeo y deriva

Convertir HEX → HSL → HEX puede no round-tripear idénticamente. Para design tokens, elige una forma canónica almacenada (a menudo HEX u OKLCH en sistemas modernos) y deriva otras en tiempo de build.

Cuándo usar cuál

Formato	Bueno para
HEX	Tokens, exportación Figma, almacenamiento compacto
RGB	Especificaciones de assets Android/iOS, pipelines de imagen
HSL	Ajustes de tema, paletas programáticas

Conclusión clave

Usa conversores para moverte entre vistas, pero almacena un valor autoritativo por token. Documenta si alpha pertenece al mismo token o a una escala de opacidad separada.