HSL é a maneira amigável de escolher uma cor; RGB é o que telas, APIs de canvas e código de imagem realmente consomem. Este conversor transforma qualquer tripla de hue, saturation e lightness em canais exatos de 0–255.
Como funciona a conversão de HSL para RGB
- Converta S e L em frações e calcule a croma C = (1 − |2L − 1|) × S.
- Divida o hue por 60 para encontrar seu segmento na roda de cores e calcule o valor intermediário X = C × (1 − |(H/60 mod 2) − 1|).
- Atribua C, X e 0 às posições R, G e B de acordo com esse segmento.
- Adicione o offset de lightness L − C/2 aos três canais e multiplique por 255.
Exemplo prático
O resultado é exato até o arredondamento final para canais inteiros. Valores fracionários de hue ou saturation são suportados e simplesmente caem no triplo RGB mais próximo.
HSL e RGB explicados
O que é HSL?
HSL divide uma cor em matiz (0–360° na roda de cores), saturação (quão colorida, 0–100%) e luminosidade (quão clara, 0–100%). Como cada parte corresponde à forma como as pessoas descrevem cor, HSL é o formato mais fácil para criar tons, sombras e paletas consistentes — manualmente ou em código.
- Sintaxe:
- hsl(H, S%, L%)
- Intervalo:
- 0–360°, 0–100%, 0–100%
- Melhor para:
- paletas, tons e sombras, theming
O que é RGB?
RGB descreve uma cor como três canais de luz — vermelho, verde e azul — cada um de 0 a 255. Espelha como os ecrãs realmente funcionam: todos os três a 255 produzem branco, todos a 0 produzem preto. RGB é a escolha certa sempre que precisas de calcular com uma cor, e rgba() adiciona transparência por cima.
- Sintaxe:
- rgb(R, G, B)
- Intervalo:
- 0–255 por canal
- Melhor para:
- código, canvas, transparência com rgba()
Tabela de referência HSL para RGB
As cores CSS mais comuns, convertidas de HSL para 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) |