HSL és la manera amigable d'escollir un color; RGB és el que consumeixen realment les pantalles, les APIs de canvas i el codi d'imatge. Aquest convertidor transforma qualsevol triple de matís, saturació i lluminositat en canals exactes 0–255.
Com funciona la conversió de HSL a RGB
- Converteix S i L a fraccions i calcula la croma C = (1 − |2L − 1|) × S.
- Divideix el matís per 60 per trobar el seu segment a la roda de colors i calcula el valor intermedi X = C × (1 − |(H/60 mod 2) − 1|).
- Assigna C, X i 0 als slots R, G i B segons aquell segment.
- Afegeix l'offset de lluminositat L − C/2 als tres canals i multiplica per 255.
Exemple resolt
El resultat és exacte fins a l'arrodoniment final als canals sencers. Es donen suport valors fraccionaris de matís o saturació i simplement s'aproximen al triple RGB més proper.
HSL i RGB explicats
Què és HSL?
HSL divideix un color en to (0–360° a la roda de colors), saturació (quant de colorat, 0–100%) i lluminositat (quant de clar, 0–100%). Com que cada part coincideix amb la manera com la gent descriu el color, HSL és el format més fàcil per crear tintes, ombres i paletes coherents — a mà o en codi.
- Sintaxi:
- hsl(H, S%, L%)
- Rang:
- 0–360°, 0–100%, 0–100%
- Millor per:
- paletes, tintes i ombres, tematització
Què és RGB?
RGB descriu un color com tres canals de llum — vermell, verd i blau — cadascun de 0 a 255. Reflecteix com funcionen realment les pantalles: tots tres a 255 donen blanc, tots tres a 0 donen negre. RGB és la opció correcta quan necessites calcular amb un color, i rgba() afegeix transparència a sobre.
- Sintaxi:
- rgb(R, G, B)
- Rang:
- 0–255 per canal
- Millor per:
- codi, canvas, transparència amb rgba()
Taula de referència de HSL a RGB
Els colors CSS més comuns convertits de HSL a RGB.
| Color | 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) |