RGB indica a una pantalla quanta llum emetre; HSL et diu com es veu realment el color. Convertir els tres canals a to, saturació i lluminositat fa que un color sigui fàcil d’ajustar a mà.
Com funciona la conversió de RGB a HSL
- Divideix R, G i B per 255 perquè cada valor quedi entre 0 i 1.
- Pren el màxim i el mínim dels tres — la seva mitjana és la lluminositat L.
- Si màxim i mínim són iguals, el color és gris: el to i la saturació són tots dos 0.
- Si no, deriva S a partir de la diferència entre màxim i mínim, i llegeix H del canal que sigui màxim.
Exemple resolt
Exacte en principi. Com que H, S i L normalment es mostren amb nombres sencers arrodonits, convertir de tornada pot moure un canal un o dos passos.
RGB i HSL explicats
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()
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ó
Taula de referència de RGB a HSL
Els colors CSS més comuns convertits de RGB a HSL.
| Color | 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%) |