HSL to HEX konverter

Mis on HSL–HEX teisendus?

See leht teeb üht ja ainsat asja: võtate ette HSL-värvi (toon kraadides 0–360, küllastus protsentides ja heledus protsentides) ning saate kohe sellele vastava kuueteistkümnendsüsteemi (HEX) värvikoodi. Näiteks sisestate 243, 75%, 59% ja väljundiks tuleb #4f46e5. HEX on see kuuekohaline (või kolmekohaline lühend) tähis, mida kasutatakse CSS-is ja enamikus disainitööriistades – näiteks #1E90FF. Kui muudate mõnda HSL-i väärtust, värskendub HEX-kuv viivitamata.

See leht erineb paljudest muudest värviteisendustest selle poolest, et ta on pühendatud just HSL->HEX teisendusele. HSL (Hue, Saturation, Lightness) on värvimudel, mis on loodud inimese arusaamist silmas pidades: heleduse muutmine jätab tooni muutumatuks, mistõttu kasutatakse HSL-i laialdaselt palettide ja teemade genereerimisel. HEX seevastu on RGB kuueteistkümnendkuju; kuuekohane variant ei kanna mingit läbipaistvuse (alfa) infot (selleks on vaja kaheksakohalist vormi). Teisendus on otsene ja kaotusteta (lossless) – kui värv jääb sRGB värviruumi, ei toimu ühtegi kärpimist, nagu juhtuks LAB-i või CMYK-i puhul.

Sisendid ja väljundid

Sisendid:

• Toon (Hue): täisarv 0–360 (kraadides).
• Küllastus (Saturation): täisarv protsentides, järel %-märk (0–100%).
• Heledus (Lightness): täisarv protsentides, järel %-märk (0–100%).

Näide: 243, 75%, 59%

Väljundid:

• HEX-kood (näiteks #4f46e5). Kui iga RGB-kanalit saab esitada ühe kuueteistkümnendsüsteemi numbriga (st kanali väärtus on 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238 või 255), siis kuvatakse ka kolmekohaline lühend, nt #abc.
• Samal ajal värskendatakse kõiki teisi värvivälju: RGB, HSV, CMYK ja LAB.

Teisenduse täpsus: Kõik arvutused tehakse sinu brauseris – andmeid ei laeta kuhugi üles. Seega pole vaja muretseda privaatsuse pärast.

Tehniline taust: kuidas teisendus toimib

HSL–HEX teisendus koosneb kahest standardseast: esmalt teisendatakse HSL RGB-ks, seejärel RGB HEX-iks.

1. HSL → RGB
Kasutatakse tavalist valemit, mis põhineb tooni (H) kuuel segmendil:

• Olgu H, S, L normaliseeritud: H' = H / 60, S' = S / 100, L' = L / 100.
• Chroma (C) = (1 – |2·L' – 1|) · S'.
• X = C · (1 – | (H' mod 2) – 1 |).
• m = L' – C/2.
• Seejärel määratakse (R', G', B') vastavalt H' täisosa ja jäägi järgi (standardne algoritm).
• Lõplikud RGB väärtused: R = round((R' + m) · 255), G = round((G' + m) · 255), B = round((B' + m) · 255).

2. RGB → HEX
Iga kanal (R, G, B) teisendatakse kuueteistkümnendsüsteemi kahekohaliseks stringiks (nt 79 → 4F). Seejärel ühendatakse # + R+G+B.

Näide: (79, 70, 229) → #4f46e5.

Kuna teisendus toimub sRGB värviruumi piires, ei teki mingeid väljaspool RGB-d jäävaid värve – kõik HSL-i väärtused (kui toon 0–360, küllastus 0–100%, heledus 0–100%) annavad tulemuseks kehtiva RGB värvi. Seega puudub vajadus kärpimise või hoiatusega.

Reeglid, piirangud ja levinud vead

• Sisestusformaat: Toon peab olema arv, küllastus ja heledus peavad sisaldama %-märki (ilma tühikuta või tühikuga pärast numbrit – täpsust kontrollitakse). Kui sisestus ei vasta reeglitele, näitab leht veateadet:
  “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

• Vahemikud: kui toon on väljaspool 0–360 või küllastus/heledus väljaspool 0–100% (või pole korrektselt protsentides), kuvatakse sama viga.

• HEX-lühend: kolmekohaline lühend (nt #abc) näidatakse ainult siis, kui mõlemad kanalipaarid on identsed (nt #aabbcc on lühendatav #abc-ks). Kui vähemalt üks kanal ei vasta sellele tingimusele, kuvatakse ainult kuuekohane kood.

• CMYK hinnang: CMYK-väljal näidatud väärtused on hinnangulised ja võivad erineda professionaalsest trükiväärtusest – see on oluline, sest trüki CMYK sõltub nii värviprofiilist kui ka paberist.

• Alfa puudumine: Kuuekohane HEX ei toeta läbipaistvust. Kui on vaja alfat, tuleb kasutada kaheksakohalist vormi (näiteks #4f46e580) – see leht seda ei paku, kuid teisendus ise on täpne.

Levinud vead:

• Unustatakse panna %-märk (nt 50 asemel 50%).
• Toon antakse protsendina (nt 50%), kuigi see peab olema kraadides 0–360.
• Küllastus või heledus antakse kümnendmurruna (nt 0.5 asemel 50%).
• Arvatakse, et HEX-kood on tõusvas järjekorras – tegelikult on tegemist punase, rohelise, sinise kanalite kuueteistkümnendesitusega.
• Kasutatakse suurtähti väiketähtede asemel või vastupidi – CSS ja brauserid ei tee vahet, kuid lugejale võib see segadust tekitada. Leht kuvab tulemuse väiketähtedega.

Kasutajad ja kasutusjuhud

• Disainerid ehitavad palette just HSL-is, sest heleduse muutmine hoiab tooni samana, mis lihtsustab harmooniliste värviskeemide loomist. Seejärel on vaja HEX-koodi, et koodi või disainitööriistadesse sisestada.
• Veebiarendajad saavad Figmast või Sketch’ist HSL-väärtused ja peavad need teisendama CSS-i HEX-omadusteks. See leht teeb seda ühe silmapilguga.
• Juurdepääsetavuse spetsialistid kontrollivad WCAG kontrastisuhteid just heleduse muutmise kaudu (säilitades tooni), seejärel teisendavad tulemuse HEX-iks, et seda lõplikus CSS-is kasutada.
• Igaüks, kes katsetab teemasid või muudab värvipaletti ja vajab täpset HEX-koodi.

Korduma kippuvad küsimused (KKK)

1. Kas kõik HSL-i väärtused annavad kehtiva HEX-koodi?
Jah, kui H on 0–360, S ja L 0–100% (täisarvud), siis on tulemuseks alati sRGB-s kehtiv värv. Puudub oht, et värv jääb väljapoole RGB-d, nagu võib juhtuda LAB-ist teisendamisel.

2. Miks kuvatakse mõnikord kolmekohaline HEX (nt #abc)?
Kui iga RGB-kanali väärtust saab esitada ühe kuueteistkümnendsüsteemi numbriga (nt punane 0xAA, roheline 0xBB, sinine 0xCC), siis on lubatud lühend. See ei muuda tegelikku värvi, lihtsalt lühendab esitust. Kui kanalid pole identsed paarikaupa, kuvatakse ainult kuuekohane kood.

3. Kas leht töötab ka siis, kui sisestan kraadid ilma %-märgita?
Ei. Selleks et eristada tooni (kraadides) küllastusest ja heledusest (protsentides), tuleb protsentide järel alati olla %. Ilma selleta kuvatakse veateade.

4. Kas ma saan kasutada kümnendmurde (nt 50.5%)?
Leht eeldab täisarve. Kuigi valem tegelikult töötaks ka kümnendmurdudega, on sisendiks ette nähtud täisarvud 0–100. Kui sisestate murdosa, võidakse seda tõlgendada kui vigast formaati.

5. Miks on CMYK-väärtused ainult hinnangulised?
CMYK teisendus sõltub trükiseadme värviprofiilist, paberist ja tindist. Siin kasutatakse standardset matemaatilist teisendust, mis annab ligikaudse tulemuse. Professionaalses trükis tuleks kasutada ICC-profiile.

6. Kas leht töötab ka 8-kohalise HEX-iga (koos alfaga)?
Ei. See teisendus on ainult HSL-st 6-kohaliseks HEX-iks (või selle 3-kohaliseks lühendiks). Alfa läbipaistvuse jaoks tuleks kasutada eraldi tööriista või kaheksakohalise HEX-i käsitsi lisamist.