HSL é a forma amigable de escoller unha cor; RGB é o que as pantallas, as APIs de canvas e o código de imaxe realmente consumen. Este conversor transforma calquera tripla de tinte, saturación e luminosidade en canles exactas de 0–255.
Como funciona a conversión de HSL a RGB
- Converte S e L a fraccións e calcula a croma C = (1 − |2L − 1|) × S.
- Divide o tinte por 60 para atopar o seu segmento na roda de cores e calcula o valor intermedio X = C × (1 − |(H/60 mod 2) − 1|).
- Asigna C, X e 0 ás ranuras R, G e B segundo ese segmento.
- Engade o desprazamento de luminosidade L − C/2 ás tres canles e multiplica por 255.
Exemplo práctico
O resultado é exacto ata o redondeo final ás canles enteiras. Valores fraccionarios de tinte ou saturación están soportados e simplemente caen na tripla RGB máis próxima.
HSL e RGB explicados
Que é HSL?
HSL divide unha cor en tonalidade (0–360° na roda de cores), saturación (o nivel de cor, 0–100%) e luminosidade (o brillo, 0–100%). Como cada parte coincide coa forma en que a xente describe a cor, HSL é o formato máis sinxelo para crear tintas, sombras e paletas coherentes — manualmente ou en código.
- Sintaxe:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mellor para:
- paletas, tintas e sombras, tematización
Que é RGB?
RGB describe unha cor como tres canles de luz — vermello, verde e azul — cada unha de 0 a 255. Reflicte como funcionan realmente as pantallas: as tres a 255 dan branco, todas a 0 dan negro. RGB é a opción axeitada sempre que precises calcular cunha cor, e rgba() engade transparencia por riba.
- Sintaxe:
- rgb(R, G, B)
- Rango:
- 0–255 por canal
- Mellor para:
- código, canvas, transparencia con rgba()
Táboa de referencia de HSL a RGB
As cores CSS máis comúns, convertidas de HSL a RGB.
| Cor | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |