HSL discrive un culore cum'è a ghjente ne parla: quale tonu, quantu saturatu, quantu luminosu. Cunvertisce un codice HEX in HSL hè u modu più veloce per ottene un culore in una furma chì poi veramente aghjustà — schjarìlu, smorzàlu, o custruisce una scala sana.
Cumu funziona a cunversione da HEX à HSL
- Cunvertisce u codice HEX in RGB è divide ogni canale per 255, cusì tutti trè sò trà 0 è 1.
- Truvà u valore u più grande è u più chjucu trà i trè. A so media hè a luminosità L.
- A differenza trà elli guida a saturazione S: dividella per (2 − max − min) per i culori chjaru, o per (max + min) per quelli scuri.
- U canale chì cuntene u massimu decide u tonu H — rossu à 0°, verde à 120°, turchinu à 240° — è l'altri dui canali pusizionanu u tonu dentru quellu segmentu.
Esempiu praticu
I calculi sò esatti, ma i valori HSL sò normalmente arrotondati à gradi interi è percentuali. Cunvertisce torna pò dunque spustà unu o dui passi RGB da l'originale — invisibile in pratica, ma utile à sapè se fai girà i culori più volte.
HEX è HSL spiegati
Chì ghjè HEX?
Un codice HEX hè un numeru esadecimale di sei cifre chì conserva i canali rossu, verde è blu di un culore darrè à un # iniziale. Ogni coppia di cifre raprisenta un canale, da 00 (nisun) à FF (cumplettu), chì dà listessu 16,7 milioni di culori ch'è RGB ma in una notazione più corta. HEX hè u default in CSS, strumenti di design è linee guida di marca.
- Sintassi:
- #RRGGBB
- Gamma:
- 00–FF per canale
- Megliu per:
- CSS, passu trà designer è sviluppatori, linee guida di marca
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 HEX à HSL
I culori CSS più cumuni, cunvertiti da HEX à HSL.
| Culore | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |