HSL kirjeldab värvi nii, nagu inimesed sellest räägivad: milline toon, kui erksas ja kui hele. HEX-koodi konverteerimine HSL-iks on kiireim viis saada värv kujule, mida saad tegelikult reguleerida — heledamaks, tuhmimaks või terve skaalana üles ehitada.
Kuidas HEX -> HSL teisendamine toimib
- Muuda HEX RGB-ks ja jaga iga kanal 255-ga, nii et kõik kolm jäävad vahemikku 0–1.
- Leia kolmest väärtusest suurim ja väikseim. Nende keskmine on heledus L.
- Nende vahe määrab küllastuse S: jaga see (2 − max − min) puhul heledate värvide jaoks või (max + min) puhul tumedate jaoks.
- Kanaal, mille väärtus on maksimaalne, määrab tooni H — punane 0°, roheline 120°, sinine 240° — ja ülejäänud kaks kanalit positsioneerivad tooni selle lõigu sees.
Töötav näide
Matemaatika on täpne, kuid HSL-väärtusi ümmardatakse tavaliselt täiskraadideks ja protsentideks. Tagasikonvertimisel võib see seetõttu viia ühe või kahe RGB-sammu võrra algsest eemale — praktiliselt nähtamatu, aga oluline teada, kui teed värvide ringi-ümberkonvertimist mitu korda.
HEX ja HSL selgitatud
Mis on HEX?
HEX-kood on kuuetäheline kuuesüsteemne number, mis salvestab värvi punase, rohelise ja sinise kanali ettejuhtiva # abil. Iga kahekohaline paar katab ühe kanali väärtuse 00-st (puudub) kuni FF-ni (täis), andes sama 16,7 miljonit tooni nagu RGB, kuid lühema notatsiooniga. HEX on CSS-i, disainitööriistade ja brändijuhiste vaikimisi vorming.
- Süntaks:
- #RRGGBB
- Vahemik:
- 00–FF per kanal
- Parim jaoks:
- CSS, disaini üleandmine, brändijuhised
Mis on HSL?
HSL jagab värvi tooniks (0–360° värvirattal), küllastuseks (kui erksas, 0–100%) ja heleduseks (kui hele, 0–100%). Kuna iga osa peegeldab seda, kuidas inimesed värve kirjeldavad, on HSL kõige lihtsam vorming varjundite, toonide ja järjepidevate palettide loomiseks — käsitsi või koodis.
- Süntaks:
- hsl(H, S%, L%)
- Vahemik:
- 0–360°, 0–100%, 0–100%
- Parim jaoks:
- paletid, toonid ja varjundid, teematöö
HEX -> HSL võrdlustabel
Kõige levinumad CSS-värvid, teisendatud HEX formaadist HSL formaati.
| Värv | 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%) |