RGB diz a um ecrã quanta luz emitir; HSL diz-te como a cor realmente aparece. Converter os três canais em matiz, saturação e luminosidade torna a cor fácil de ajustar manualmente.
Como funciona a conversão de RGB para HSL
- Divide R, G e B por 255 para que cada valor fique entre 0 e 1.
- Toma o máximo e o mínimo dos três — a média deles é a luminosidade L.
- Se máximo e mínimo forem iguais, a cor é cinzenta: matiz e saturação são ambos 0.
- Caso contrário, deriva S a partir da diferença entre máximo e mínimo, e lê H a partir do canal que for máximo.
Exemplo prático
Exato em princípio. Como H, S e L normalmente são mostrados como números arredondados, converter de volta pode deslocar um canal por um ou dois passos.
RGB e HSL explicados
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()
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
Tabela de referência RGB para HSL
As cores CSS mais comuns, convertidas de RGB para HSL.
| Cor | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |