HSL è il modo amichevole per scegliere un colore, RGB è ciò che gli schermi, le API canvas e il codice immagine consumano davvero. Questo convertitore trasforma qualsiasi tripla di tinta, saturazione e luminosità in canali esatti 0–255.
Come funziona la conversione da HSL a RGB
- Converti S e L in frazioni e calcola la croma C = (1 − |2L − 1|) × S.
- Dividi la tinta per 60 per trovare il suo segmento sulla ruota dei colori e calcola il valore intermedio X = C × (1 − |(H/60 mod 2) − 1|).
- Assegna C, X e 0 agli slot R, G e B in base a quel segmento.
- Aggiungi l'offset di luminosità L − C/2 a tutti e tre i canali e moltiplica per 255.
Esempio pratico
Il risultato è esatto fino all'arrotondamento finale ai canali interi. Valori frazionari di tinta o saturazione sono supportati e semplicemente ricadono sulla tripla RGB più vicina.
HSL e RGB spiegati
Cos'è HSL?
HSL divide un colore in tonalità (0–360° sulla ruota dei colori), saturazione (quanto è colorato, 0–100%) e luminosità (quanto è chiaro, 0–100%). Poiché ogni parte corrisponde al modo in cui le persone descrivono il colore, HSL è il formato più semplice per creare tinte, ombre e palette coerenti — a mano o in codice.
- Sintassi:
- hsl(H, S%, L%)
- Intervallo:
- 0–360°, 0–100%, 0–100%
- Ideale per:
- palette, tinte e ombre, theming
Cos'è RGB?
RGB descrive un colore come tre canali di luce — rosso, verde e blu — ognuno da 0 a 255. Rispecchia il funzionamento degli schermi: tutti e tre a 255 danno il bianco, tutti a 0 danno il nero. RGB è la scelta giusta quando devi fare calcoli con un colore, e rgba() aggiunge la trasparenza.
- Sintassi:
- rgb(R, G, B)
- Intervallo:
- 0–255 per canale
- Ideale per:
- codice, canvas, trasparenza con rgba()
Tabella di riferimento da HSL a RGB
I colori CSS più comuni, convertiti da HSL a RGB.
| Colore | 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) |