Sceglie un culore in HSL hè cunfortevule, ma i fogli di stile, i passaggi di design è i documenti di marca funzionanu sempre cun HEX. Stu cunverter chjude quessa è ti dà u codice di sei cifre per ogni cumpusizione di tonu, saturazione è luminosità.
Cumu funziona a cunversione da HSL à HEX
- Trasforma a saturazione è a luminosità in frazioni: 60% diventa 0.6.
- Calcule u croma C = (1 − |2L − 1|) × S — quessa hè quantu u culore hè luntanu da u grisgiu.
- Usa u tonu per piazzà quellu croma nantu à i canali rossu, verde è turchinu, poi sposta tutti trè per L − C/2.
- Multiplica ogni canale per 255, arrotondalu, è scrivilu cum'è dui cifre esadecimali.
Esempiu praticu
L'arrotondamentu accade una sola volta, in l'ultimu passu, quand'è ogni canale hè inchjappatu à un valore sanu 0–255. U risultatu hè u codice HEX più vicinu à u to input HSL è normalmente identicu à ciò chì mostra un strumentu di design.
HSL è HEX 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è 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
taula di riferenza da HSL à HEX
I culori CSS più cumuni, cunvertiti da HSL à HEX.
| Culore | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |