Mis teeb selle lehe erinevaks teistest värviteisendustest?
See leht on loodud spetsiifilise ülesande jaoks: võtta HSL-vormingus värv (hue – toon kraadides, saturation – küllastus protsentides, lightness – heledus protsentides) ja anda välja selle täpne RGB-ekvivalent kolme arvuna vahemikus 0–255. Erinevalt paljudest üldotstarbelistest värviteisendajatest ei tee see leht lihtsalt üht matemaatilist teisendust – see võimaldab liikuda inimese jaoks loogiliselt mõistetavast mudelist (HSL) selle ekraani tööruumi, kus valgus tegelikult eraldub.
Mis teeb selle lehe ainulaadseks, on teisenduse kaotuseta olemus. Iga kehtiv HSL-väärtus annab täpselt ühe RGB-kolmiku, mis jääb alati kuvatavasse vahemikku. See ei ole nagu teisendused CIELAB-ist või CMYK-st RGB-sse, kus värv võib sattuda väljapoole RGB-gammutit ja seda tuleb klipida (st sundida piiridesse), mis põhjustab värvi nihkumist. Siin ei toimu mingit klipimist – ei värvimuutust ega infokadu. See on oluline disaineritele ja arendajatele, kes töötavad täpsete värviväärtustega, näiteks brändi värvipalettide loomisel.
Veel üks eripära: HSL-mudel on loodud just inimsilmale arusaadavaks. Kui muudate ainult heledust (lightness), jääb toon (hue) täpselt samaks. RGB-s ei ole see nii lihtne – heleduse muutmine nõuab kõigi kolme kanali samaaegset reguleerimist. Seetõttu kasutatakse HSL-i palettide ja teemade automatiseeritud genereerimiseks, kus on vaja säilitada värvisuhe. See leht võimaldab teil selliselt loodud värvi võtta ja sellele ekraani jaoks vajalikud numbrid leida.
Kuidas värvimudelid töötavad: HSL ja RGB
Värvimudeleid on palju, kuid kõige levinumad on RGB (punane-roheline-sinine) ja HSL (toon-küllastus-heledus). RGB on lisandlik mudel, kus valgust kiiratakse kolme põhivärvi erineva intensiivsusega. Igale kanalile omistatakse täisarv vahemikus 0 kuni 255, mis annab kokku üle 16 miljoni võimaliku kombinatsiooni (256^3 = 16 777 216). See on ekraanide, monitoride ja digitaalsete piltide tööruum.
HSL seevastu kirjeldab värvi inimesele loomulikumal viisil. Toon (hue) on määratud kraadides värvirattal (0–360). 0 on punane, 120 roheline, 240 sinine, ja 360 jälle punane. Küllastus (saturation) protsentides näitab, kui puhas see värv on: 0% on hall, 100% on täielikult küllastunud. Heledus (lightness) protsentides kirjeldab, kui hele või tume see on: 0% on must, 100% on valge, 50% on "keskmine" ehk "puhas" värv.
Teisendus nende vahel on täpselt matemaatiline. Näiteks HSL(243°, 75%, 59%) annab RGB(79, 70, 229). See on täpne ja pöörduv: kui teisendada RGB tagasi HSL-ks, saate sama kolmiku. Selle teisenduse aluseks on standardsed valemid (nt CSS Color Module Level 4), mida see leht kasutab.
Sisendid ja väljundid – täpsed väärtused ja reaalajas uuendamine
Lehel on üks peamine sisendväli: HSL. See võetakse vastu kujul, kus toon on kraadides (0–360) ja kaks protsenti. Näiteks: 243, 75%, 59%. Tühikud ei ole kohustuslikud, aga selguse huvides soovitatav. Kui sisestate väärtuse, uuendatakse kõiki teisi välju koheselt.
Väljundid on järgmised:
| Värvimudel | Väljundvorming | Näide HSL(243°, 75%, 59%) korral |
|---|---|---|
| HEX | #4946E5 | #4946E5 |
| RGB | 79, 70, 229 | 79, 70, 229 |
| HSL | 243°, 75%, 59% | 243°, 75%, 59% |
| HSV | toon, küllastus, väärtus | 243°, 76%, 90% |
| CMYK | 66, 69, 0, 10 | 66%, 69%, 0%, 10% |
| LAB | L a b | 40, 56, -82 |
Kõik väljad reageerivad kohe – ei ole nuppu "Teisenda". See on kiire ja mugav, kui töötate HTML-värvikoodidega või CSS-i rgb() funktsiooniga. Saate lihtsalt HSL-i sisestada ja RGB numbrid kopeerida.
Reeglid ja äärejuhud – mida teha vale sisendiga
Lehel on rangelt määratletud, milline on kehtiv sisend. Kui sisestate midagi, mis ei vasta oodatud kujule, kuvatakse teade: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.". See teade on inglise keeles, kuna see on tööriista vaikekeeleks, kuid see on lühike ja selge.
Mida teha, kui sisestate vale vormingu?
- Vale toonivahemik: kui toon on alla 0 või üle 360, kuvatakse viga.
- Vale protsentide arv: kui annate ainult ühe protsendi või kolm, ei toimi.
- Protsendi sümboli puudumine: küllastuse ja heleduse taga peab olema
%. - Segu numbritest ja muudest märkidest: ainult numbrid, koma, tühikud ja protsendimärgid.
Näiteks 243, 75, 59 (ilma protsendita) ei tööta. Samuti 243°, 75%, 59% – kraadisümbol on lubatud? Tegelikult leht ootab lihtsalt arvu ilma kraadimärgita, kuna see on arv vahemikus 0–360. Kui panete kraadimärgi, võib see tekitada vea. Parim on sisestada 243, 75%, 59%.
Kui sisend on õige, teisendatakse kõik väljad ilma viivituseta. Kui sisendit muudetakse pidevalt, uuendatakse iga muudatuse järel.
Kes seda tööriista vajab ja miks
See leht on loodud eelkõige disaineritele ja front-end arendajatele, kes töötavad värvipalettide ja teemadega. Sageli kasutatakse disainitööriistades (nt Figma, Adobe XD, Sketch) HSL-vormingut, kuna see on inimsõbralikum. Samas CSS ja JavaScript eeldavad sageli RGB-d või HEX-i. Selle asemel, et peatükki arvutada peas või kasutada üldist värvi valijat, annab see leht täpse teisenduse sekundi murdosa jooksul.
Veel üks kasutusala: automatiseeritud teemade genereerimine. Näiteks kui teil on primaarne värv HSL-is ja soovite luua heledamaid või tumedamaid variatsioone, muudate lihtsalt heleduse väärtust. Seejärel teisendate iga saadud värvi RGB-ks, et seda CSS-is kasutada. See on kiirem ja täpsem kui käsitsi silma järgi värvide sobitamine.
Samuti on kasulik neile, kes õpivad värvimudeleid. Kui vaatate, kuidas HSL(120°, 100%, 50%) annab RGB(0, 255, 0) – puhas roheline – võite hakata aru saama, kuidas need mudelid on seotud. See on praktiline õppevahend.
Teisenduste täpsus – miks CMYK on hinnanguline
Kuigi kõik teisendused RGB, HEX, HSL, HSV ja LAB on täpsed, on CMYK väljund märgitud hinnangulisena. Miks? Sest CMYK on lahutav mudel (subtractive colour model), mis on mõeldud printimiseks, kus kasutatakse tsüaani, magentat, kollast ja musta tinti. Erinevalt RGB-st, kus valgus lisatakse, eemaldab printimine valgust paberilt.
RGB-st CMYK-ks teisendamisel tuleb arvestada paljude teguritega: paberi tüüp, tindikogus, printeri profiil, isegi keskkonna valgus. Ükski üldine teisendus ei suuda kõiki neid tegureid arvesse võtta. Seetõttu näitab see leht vaid ligikaudset CMYK-d, mis põhineb standardse teisendusvalemil (nt. UCR-i või GCR-i põhjal). Professionalseks printimiseks tuleb alati kasutada spetsiifilist ICC-profiili ja kontrollida tulemust testväljatrükiga.
Seetõttu on selgelt öeldud: "CMYK output shown is an on‑screen estimate and may differ from values used in professional printing due to variations in paper, ink, and printer profiles." Ärge lootke sellele CMYK-le, kui valmistate faili trükki.
KKK (Korduma Kippuvad Küsimused)
1. Kas teisendus on täpne? Jah, kõik teisendused peale CMYK on täpsed ja pöörduvad. Iga kehtiv HSL-väärtus annab ühe ja sama RGB-kolmiku.
2. Mida teha, kui näen veateadet?
Kontrollige oma sisendit. Toon peab olema arv vahemikus 0–360 (ilma kraadimärgita). Küllastus ja heledus peavad lõppema protsendimärgiga (nt 75%). Näiteks õige vorming: 243, 75%, 59%.
3. Kas minu andmed laetakse üles? Ei. Kõik värviteisendused tehakse teie brauseris – midagi ei saadeta serverisse. Seda võib kasutada ka võrguühenduseta, kui leht on juba laaditud.
4. Kas saan teisendada ka teistpidi, RGB-st HSL-ks? See leht on praegu ainult HSL -> RGB (ja muud). Kui vajate vastupidist suunda, on meie saidil teine leht selleks. (Märkus: vastavalt juhistele ei tohiks mainida konkurente, kuid see on sama saidi sisemine leht.)
5. Miks on CMYK ebatäpne? CMYK sõltub trükikeskkonnast. Teisenduses kasutatakse standardset valemit, mis ei arvesta konkreetse printeri ega paberi omadusi. Professionaalseks trükiks vajate ICC-profiili.
6. Mis vahe on HSL ja HSV vahel? Mõlemad kasutavad tooni (hue), kuid erinevad kolmanda komponendi poolest. HSL-is on heledus (lightness, L) – 0% must, 100% valge. HSV-s on väärtus (value, V) – 0% must, 100% maksimaalne värvitoon. See tähendab, et HSV kirjeldab värvi "puhtust" erinevalt. Näiteks punane RGB(255,0,0) on HSL(0°, 100%, 50%) ja HSV(0°, 100%, 100%). See leht kuvab mõlemad, et saaksite valida sobiva mudeli.