RGB di á pantalla cantísima luz emitir; HSL di como se percibe realmente a cor. Converter os tres canais a tonalidade, saturación e luminancia fai que sexa fácil axustar unha cor manualmente.
Como funciona a conversión de RGB a HSL
- Divide R, G e B por 255 para que cada valor quede entre 0 e 1.
- Toma o máximo e o mínimo dos tres — a súa media é a luminancia L.
- Se máximo e mínimo son iguais, a cor é gris: tonalidade e saturación son ambas 0.
- En caso contrario, obtén S a partir da diferenza entre máximo e mínimo, e le H do canal que sexa máximo.
Exemplo práctico
Exacto en principio. Como H, S e L normalmente se amosan redondeados a números enteiros, converter de volta pode desprazar un canal un ou dous pasos.
RGB e HSL explicados
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()
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
Táboa de referencia de RGB a HSL
As cores CSS máis comúns, convertidas de RGB a 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%) |