Convertidor RGB a HSL

Convierte colores RGB a HSL (Tono, Saturación, Luminosidad). Ideal para CSS moderno y manipulación intuitiva de color.

Valores RGB

R
G
B
RGB(66, 139, 230)
HSL(213°, 78%, 58%)
H: 213°S: 78%L: 58%
CSS: hsl(213, 78%, 58%)

Cómo Usar el Convertidor RGB a HSL

1Ajusta RGB — Mueve los deslizantes de Rojo, Verde y Azul (0-255).
2Lee los valores HSL — H (tono, 0°-360°), S (saturación, 0%-100%) y L (luminosidad, 0%-100%) se calculan automáticamente.
3Copia el CSS — Haz clic en "Copiar CSS hsl()" para obtener la función CSS lista para pegar en tus estilos.

Entender el Modelo HSL

HSL representa el color de forma intuitiva usando tres propiedades independientes:

PropiedadRangoDescripciónEjemplo
H (Hue/Tono)0° – 360°El "color" en la rueda cromática0°=Rojo, 120°=Verde, 240°=Azul
S (Saturación)0% – 100%Intensidad del color0%=Gris, 100%=Color vibrante
L (Luminosidad)0% – 100%Claridad u oscuridad0%=Negro, 50%=Color puro, 100%=Blanco

Tip CSS: HSL es el modelo ideal para generar variantes de un color. Para crear un botón hover, simplemente resta 10% de L: hsl(213, 78%, 48%). Para un fondo suave, baja S y sube L: hsl(213, 20%, 95%).

¿Por Qué Convertir RGB a HSL?

CSS Moderno

La función hsl() permite manipular colores intuitivamente en CSS. Hover, disabled, active: solo cambia L o S sin repensar todo el color.

Paletas de Color

Crear paletas armónicas es trivial en HSL: mantén S y L fijos, rota H. Complementario (H+180°), análogo (H±30°), triádico (H+120°, H+240°).

🧩 Design Tokens

Los sistemas de diseño modernos definen tokens en HSL para generar escalas de color programáticamente. Una variable H define el tono, luego S y L se escalan para crear la rampa completa.

Accesibilidad

El componente L de HSL se relaciona con la luminosidad percibida, facilitando verificar contraste WCAG. L<50% sobre fondo claro, L>70% sobre fondo oscuro es una regla rápida.

HSL vs HSV: ¿Cuál Usar?

CriterioHSLHSV/HSB
Usado enCSS, sistemas de diseño webPhotoshop, Illustrator, selectores
L/V = 100%BlancoColor más brillante (no blanco)
Color puroS=100%, L=50%S=100%, V=100%
Ideal paraManipulación programática, CSSSelección visual de color

Preguntas Frecuentes

¿Cuál es la diferencia entre HSL y HSV/HSB?
Ambos usan Hue (tono) y comparten el cilindro de color, pero difieren en cómo definen "claro" y "saturado". HSL: L=50% es el color puro, L=100% es blanco. HSV/HSB: V=100% es el color más brillante (no blanco). CSS usa HSL; Photoshop usa HSB.
¿Puedo usar hsl() directamente en CSS?
Sí, la función hsl() es soportada en todos los navegadores modernos. Sintaxis: hsl(210, 80%, 50%) o en CSS moderno: hsl(210 80% 50%) sin comas. También soporta alfa: hsl(210 80% 50% / 0.5).
¿Por qué HSL es mejor que RGB para manipulación de color?
Porque HSL separa el tono (qué color), la saturación (cuán intenso) y la luminosidad (cuán claro). Esto permite operaciones intuitivas: oscurecer = bajar L, desaturar = bajar S, cambiar tono = ajustar H, sin afectar las otras propiedades.
¿La conversión RGB→HSL pierde información?
No, la conversión es reversible sin pérdida. Cada color RGB tiene un equivalente HSL exacto y viceversa. Son dos representaciones del mismo espacio de color sRGB.
¿Cómo creo una paleta armónica con HSL?
Fija la S y L, luego rota el H: Complementario: H ± 180°; Análogo: H ± 30°; Triádico: H + 120° y H + 240°; Split complementario: H + 150° y H + 210°. Esto produce paletas naturalmente armónicas.