HSL-is värvi valimine on mugav, kuid stiililehed, disaini üleandmised ja brändidokumendid kasutavad endiselt HEX-i. See konverter täidab selle lõhe ja annab ühetoonilise kuuekohalise koodi iga HSL-kombinatsiooni jaoks.
Kuidas HSL -> HEX teisendamine toimib
- Muuda küllastus ja heledus murdudeks: 60% saab 0.6.
- Arvuta kroma C = (1 − |2L − 1|) × S — see näitab, kui kaugel värv on hallist.
- Kasuta tooni, et paigutada see kroma punasele, rohelisele ja sinisele kanalile, seejärel nihuta kõiki kolme väärtust võrra L − C/2.
- Korruta iga kanal 255-ga, ümarda ja kirjuta see kaheks heksadecimaliks numbriks.
Töötav näide
Ümardamine toimub üks kord, viimases sammus, kui iga kanal lukustatakse täisarvule 0–255. Tulemuseks on lähim HEX-kood su HSL-sisestusele ja tavaliselt identne sellega, mida näitab disainitööriist.
HSL ja HEX selgitatud
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öö
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
HSL -> HEX võrdlustabel
Kõige levinumad CSS-värvid, teisendatud HSL formaadist HEX formaati.
| Värv | 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 |