HSL hè u modu amichevule di sceglie un culore, mentre chì RGB hè ciò chì i schermi, l'API canvas è u codice d'imaghjini consumanu veramente. Stu cunvertitore trasforma ogni tripletta di tinta, saturazione è luminosità in canali esatti 0–255.
Cumu funziona a cunversione da HSL à RGB
- Cunvertisce S è L in frazioni è calcula u cromu C = (1 − |2L − 1|) × S.
- Divide a tinta per 60 per truvà u so segmentu annantu à a rota di culori è calcula u valore intermediu X = C × (1 − |(H/60 mod 2) − 1|).
- Assigna C, X è 0 à i slot R, G è B secondu quellu segmentu.
- Aghjunghje l'offset di luminosità L − C/2 à tutti i trè canali è multiplica per 255.
Esempiu praticu
U risultatu hè esattu finu à l'ultimu arrotondamentu à canali interi. I valori frazziunali di tinta o saturazione sò supportati è si mappanu semplicemente à a tripletta RGB più vicina.
HSL è RGB spiegati
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
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()
taula di riferenza da HSL à RGB
I culori CSS più cumuni, cunvertiti da HSL à RGB.
| Culore | 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) |