RGB dice allo schermo quanta luce emettere; HSL dice come il colore appare realmente. Convertire i tre canali in tinta, saturazione e luminosità rende un colore facile da regolare a mano.
Come funziona la conversione da RGB a HSL
- Dividi R, G e B per 255 così ogni valore sta tra 0 e 1.
- Prendi il massimo e il minimo dei tre — la loro media è la luminosità L.
- Se massimo e minimo sono uguali, il colore è grigio: tinta e saturazione sono entrambe 0.
- Altrimenti ricava S dalla differenza tra massimo e minimo, e leggi H dal canale che è massimo.
Esempio pratico
Esatto in linea di principio. Poiché H, S e L vengono solitamente mostrati come numeri interi arrotondati, convertire indietro può spostare un canale di uno o due passi.
RGB e HSL spiegati
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()
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
Tabella di riferimento da RGB a HSL
I colori CSS più comuni, convertiti da RGB a HSL.
| Colore | 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%) |