Qué significa cada formato
- HEX: el color en hexadecimal, como #3B82F6. Es el formato típico de los diseños y de CSS.
- RGB: cuánto rojo, verde y azul hay en el color, de 0 a 255 (rgb(59, 130, 246)). Es como trabajan las pantallas.
- HSL: tono (0-360°), saturación y luminosidad en porcentaje. Es el formato más cómodo para crear variaciones: cambia el tono y giras la rueda de color.
- HSV (también llamado HSB): tono, saturación y valor (brillo). Muy usado en selectores de color de programas de diseño.
Cómo se convierte
Las conversiones son las fórmulas estándar: HEX es RGB escrito en base 16, y el paso a HSL y HSV calcula primero el máximo, el mínimo y la diferencia entre canales para obtener tono, saturación y luminosidad o brillo. Los valores se redondean al entero de 8 bits más próximo, el mismo que usa la pantalla.
Fórmula
L = (máximo + mínimo) ÷ 2 · S = (máximo − mínimo) ÷ (1 − |2L − 1|) · H = sector del canal máximo × 60°
Son las definiciones de HSL; para HSV se usa S = (máximo − mínimo) ÷ máximo y V = máximo.
Ejemplo completo
| Formato | Valor |
|---|---|
| HEX | #FF8040 |
| RGB | rgb(255, 128, 64) |
| HSL | hsl(20.1, 100%, 62.5%) |
| HSV (HSB) | hsv(20.1, 74.9%, 100%) |
La muestra con texto blanco y negro encima te ayuda a decidir qué color usar para el texto sobre ese fondo, antes de pasarlo por el comprobador de contraste.