HEX to HSL konverter

HEX-st HSL-i: värviteisendus, mis paneb inimese mõtlema

Kui töötad veebiarenduse või -kujundusega, oled ilmselt kohanud kuueteistkümnendsüsteemis värvikoodi nagu #1E90FF või #abc. See on HEX – kompaktne, masinale loetav, aga inimesele kohmakas. Sama värvi võid soovida esitada HSL‑ina: hsl(210°, 100%, 50%). See leht võtab kuueteistkümnendsüsteemis sisendi ja annab silmapilkselt tagasi HSL‑väärtuse koos kõigi teiste toetatud formaatidega (RGB, HSV, CMYK, LAB). Töö toimub täielikult brauseris – ühtegi sisestatud värvi ei laadita üles ega salvestata.

Mille poolest see leht erineb?

• HEX on toor-RGB märkstik – kuus kuueteistkümnendnumbrit (või kolm lühendatult) kodeerivad otseselt punase, rohelise ja sinise väärtused. See on tihe ja levinud CSS‑is ning kujundustööriistades, kuid inimesel on seda raske intuitiivselt kohandada.
• HSL on loodud inimese arutluskäigu jaoks – toon (hue) mõõdetakse kraadides (0‑360), küllastus (saturation) ja heledus (lightness) protsentides. Heleduse muutmine jätab tooni samaks – just seepärast on HSL parim värvipalettide ja teemaviiside loomiseks.
• Alfakanal puudub – tavaline HEX (kuue- või kolmekohaline) ei kanna läbipaistvusteavet; ka HSL‑is pole alfakomponenti. Teisendus käitleb alati täiesti läbipaistmatuid värve.

Kuidas HEX-teisendus HSL‑iks toimib?

RGB‑st HSL‑i teisendusmatemaatika põhineb tooni nurga leidmisel kolmest kanalist maksimaalse ja minimaalse väärtuse järgi.

1. Teisenda HEX kümnendsüsteemi – iga kahe numbri plokk (või lühendatud juhul üks number kahekordistatult) annab 0‑255 vahemikku jääva väärtuse. Näiteks #4f46e5 annab R=79, G=70, B=229.
2. Normaliseeri vahemikku 0‑1 – jaga iga väärtus 255‑ga: R≈0.31, G≈0.275, B≈0.898.
3. Leia min ja max – siin max = 0.898, min = 0.275.
4. Arvuta heledus: L = (max + min) / 2 = (0.898 + 0.275) / 2 = 0.5865. Protsentides 58.65%.
5. Kui max = min (halltoon), on küllastus 0 ja toon defineerimata. Muidu:
   • Küllastus: Δ = max – min = 0.623. Kui L ≤ 0.5, siis S = Δ / (max + min); kui L > 0.5, siis S = Δ / (2 – max – min). Siin S = 0.623 / (2 – 0.898 – 0.275) ≈ 0.623 / 0.827 = 0.753 ≈ 75.3%.
6. Toon: olenevalt sellest, milline kanal on max:
   • Kui max = R: H = ((G – B) / Δ) mod 6
   • Kui max = G: H = (2 + (B – R) / Δ)
   • Kui max = B: H = (4 + (R – G) / Δ) Siin max on sinine (B), seega H = (4 + (0.31 – 0.275) / 0.623) ≈ (4 + 0.056) ≈ 4.056. Korruta 60‑ga, et saada kraadid: 243.36°. Lõppväärtus: HSL(243°, 75%, 59%).

Sisendid ja väljundid

Sisend – kuuekohaline (nt #4f46e5) või kolmekohaline (nt #abc) kuueteistkümnendsüsteemis värvikood. Tühikuid ega # märki pole vaja, aga see töötab ka sellega. Sisestades f00 (lühendatult) leitakse automaatselt täisvorm #ff0000.

Väljund – HSL‑väärtus (toon 0‑360°, küllastus 0‑100%, heledus 0‑100%) ning sama värvi esitus kuues teises formaadis: HEX, RGB, HSV, CMYK, LAB. Kõik väljad uuenevad reaalajas, kui sisend muutub.

Valideerimine – leht võtab vastu ainult kehtivaid kuue- või kolmekohalisi HEX‑koode. Kui sisestad midagi muud (nt #xyz või #12345), kuvatakse veateade: “Enter a hex color like #4f46e5 or #abc.” Samuti ignoreeritakse tühikuid ja juhtivat # märki.

Reeglid ja äärejuhud

• Kehtetu sisend: nagu öeldud – ainult kuue- või kolmekohaline kuueteistkümnendsüsteem, tähed A‑F (suured või väikesed). Kui # on olemas, eemaldatakse see enne töötlemist.
• Lühendatud koodi laiendamine: #abc muudetakse #aabbcc – igat numbrit korratakse üks kord. Näiteks #f00 → #ff0000 → punane.
• Väljaspool nähtavat RGB‑gamutit: kui sisestad värvi mõnes teises ruumis (nt CMYK või LAB) ja see jääb ekraanil kuvatavast värvigammast välja, kohandatakse värv lähima kuvatava toonini. Selle tulemusel võib HEX‑i tagasiteisendus anda pisut erineva väärtuse. See on teadlik piirang – ekraan ei suuda näidata kõiki LAB‑i värve.
• CMYK‑väärtused: on ekraanil hinnangulised ja neid ei tohi kasutada professionaalse printimise ettevalmistamiseks ilma kalibreerimata. Täpse CMYK‑i leidmiseks on vaja printeri profiili ja spektrofotomeetrit.
• Kõik teisendused toimuvad brauseris – ühtki sisestatud värvi ei salvestata, ei laadita üles ega jagata kolmandate osapooltega.

Kes seda lehte vajab?

• Front‑end arendajad – kirjutad CSS‑i ja soovid HEX‑kujundusest saada HSL‑i, et kergesti muuta heledust hover‑olekute jaoks või luua tumedaid teemavariante. HSL‑i on palju lihtsam skaleerida kui HEX‑i.
• UI/UX disainerid – mõtled tooni, küllastuse ja heleduse kaudu. Sinu brändivärv on antud HEX‑ina (nt #1E90FF), aga soovid paletti: heledam variant (hsl(210°, 100%, 70%)), tumedam (hsl(210°, 100%, 30%)). Selleks on vaja ühte teisendust.
• Värvipalettide loojad – HSL‑iga saad hõlpsasti tekitada komplementaarseid (toon + 180°), analoogseid (toon ± 30°) või monokroomseid (sama toon, erinev heledus/küllastus) skeeme.
• Veebi ligipääsetavuse kontrollijad – kontrastisuhte arvutamine on WCAG‑i järgi lihtsam, kui tead värvi heledust. HSL‑is on heledus (L) otseselt protsentides; HEX‑ist tuleb see kõigepealt RGB‑ks teisendada ja seejärel heledust arvutada.

HSL vs. HSV: oluline erinevus

Kuigi mõlemad kasutavad tooni (H), erinevad küllastuse ja heleduse määratlus.

• HSL (hue, saturation, lightness): heledus L on keskmine min ja max värvi väärtus. Kui L=100%, on värv valge; L=0% on must; L=50% on “puhas” toon (maksimaalne intensiivsus).
• HSV (hue, saturation, value): V (value, mõnikord nimetatud brightness) on värvi kanalite maksimaalne väärtus. Kui V=100% ja S=100%, on värv täielikult küllastunud ja hele.

Seega on HSL inimese jaoks loomulikum: heledust reguleerides liigud mustast valgeni läbi tooni. HSV‑s heleduse langetamine ei vii tingimata mustani – küllastuse vähendamine teeb värvi halliks. Sellel lehel kuvatakse mõlemad, et saaksid valida endale sobivaima.

KKK – korduma kippuvad küsimused

Kas saan teisendada ka läbipaistva HEX‑i nagu #ff000080? Ei. Sellel lehel on toetatud ainult kuue- ja kolmekohalised HEX‑koodid, mis esindavad täiesti läbipaistmatut värvi. Kui soovid teisendada HEX‑koodi koos alfakanaliga (8 numbrit), tuleb see kõigepealt jaotada RGB ja alfa osadeks – see leht seda ei tee.

Miks on CMYK‑väärtused ainult hinnangulised? CMYK sõltub trükiprotsessist, paberist ja printeri profiilist. Ekraanil antud väärtused on teisendatud standardsest RGB‑st standardsesse CMYK‑i (nt sRGB → FOGRA39), kuid need ei pruugi täpselt vastata tegelikule trükitulemusele. Professionaalseks printimiseks kasuta spetsiaalseid tööriistu ja kalibreeritud profiile.

Kas saan teisendada ka tagurpidi – HSL‑ist HEX‑iks? Praegune leht võtab sisendina ainult HEX‑koodi ja väljastab kõik teised formaadid, sealhulgas HSL‑i. Kui soovid teisendada HSL‑ist HEX‑iks, pead alustama HEX‑koodi sisestamisest või kasutama mõnda teist selle saidi lehte, mis seda võimaldab.

Miks mõnikord erineb HEX‑kood pärast LAB‑i teisendust? LAB‑ruum on palju suurem kui kuvatav RGB‑gamut. Kui sisestad LAB‑värvi, mis jääb RGB‑gamutist välja, kohandatakse see lähima kuvatava värvini. Seejärel teisendatakse see uus värv HEX‑iks, mis võib algse HEX‑koodiga veidi erineda. See on normaalne – ekraan lihtsalt ei suuda kuvada kõiki LAB‑värve.

Kas kolmekohalise HEX‑koodi korral laiendatakse #abc automaatselt? Jah. Kood #abc mõistetakse kui #aabbcc. See on CSS‑i standardile vastav käitumine (nagu CSS Color Module Level 4). Seega #f00 annab punase.

Kas ma pean # märgi sisestama? Ei. Sisestada võid kas #4f46e5 või lihtsalt 4f46e5 – mõlemad töötavad. Kui # on olemas, eemaldatakse see enne töötlemist.

Kokkuvõte

HEX‑st HSL‑i teisendusleht on mõeldud neile, kes vajavad kiiret ja täpset teisendust ilma kolmandate osapoolte serveritesse andmeid saatmata. HSL‑i eelis seisneb selle inimsõbralikus struktuuris: toon, küllastus, heledus. Kasutades seda lehte, saad HEX‑koodi muuta HSL‑iks, et luua paindlikke CSS‑is kasutatavaid värvivariante, kontrollida ligipääsetavust või koostada värvipalette. Kõik teisendused – sealhulgas HSV, CMYK ja LAB – on lisatud, et saaksid hõlpsalt vahetada erinevate värviruumide vahel, teades nende piiranguid. Proovi järele – sisesta oma lemmikvärv ja vaata, kuidas see HSL‑ina välja näeb.