RGB dice à un schermu quantu luce emette; HSL ti dice cumu u culore appare veramente. Cunvertisce i trè canali in tonu, saturazione è luminosità rende un culore facili da aghjustà à manu.
Cumu funziona a cunversione da RGB à HSL
- Divide R, G è B per 255 cusì ogni valore hè trà 0 è 1.
- Piglia u massimu è u minimu di i trè — a so media hè a luminosità L.
- Se massimu è minimu sò uguali, u culore hè grisgiu: tonu è saturazione sò tutti dui 0.
- Altrimente deriva S da a diferenza trà massimu è minimu, è leghje H da quale canale hè u massimu.
Esempiu praticu
Esattu in principiu. Perchè H, S è L sò di solitu mustrati cum'è numeri interi arrotondati, cunvertisce torna pò spustà un canale di unu o dui passi.
RGB è HSL spiegati
Chì ghjè RGB?
RGB discrive un culore cum'è trè canali di luce — rossu, verde è blu — ognunu da 0 à 255. Riflette cumu i schermi travaglianu veramente: tutti trè à 255 danu biancu, tutti à 0 danu neru. RGB hè a scelta ghjusta quandu hai bisognu di calculà cù un culore, è rgba() aghjusta trasparenza sopra.
- Sintassi:
- rgb(R, G, B)
- Gamma:
- 0–255 per canale
- Megliu per:
- codice, canvas, trasparenza cù rgba()
Chì ghjè HSL?
HSL sparte un culore in tinta (0–360° nantu à a ruota di culori), saturazione (quant'è vivu, 0–100%) è luminosità (quant'è chjaru, 0–100%). Postu chì ogni parte currisponde à cumu a ghjente descrive u culore, HSL hè u furmatu più faciule per custruisce tinti, scuri è palette cunsistenti — à manu o in codice.
- Sintassi:
- hsl(H, S%, L%)
- Gamma:
- 0–360°, 0–100%, 0–100%
- Megliu per:
- palette, tinti è scuri, theming
taula di riferenza da RGB à HSL
I culori CSS più cumuni, cunvertiti da RGB à HSL.
| Culore | 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%) |