Kaip veikia HEX spalvų kodai ir kodėl jie nėra intuityvūs
HEX spalvų kodai – tai šešioliktainė RGB reikšmių išraiška, naudojama CSS, HTML ir daugelyje dizaino priemonių. Standartinis šešių simbolių formatas (pvz., #4f46e5) susideda iš trijų porų: pirmoji pora – raudonos spalvos intensyvumas (0x4f = 79), antroji – žalios (0x46 = 70), trečioji – mėlynos (0xe5 = 229). Trumpasis trijų simbolių variantas (#abc) yra stenograma – kiekvienas simbolis dubliuojamas, tad #abc atitinka #aabbcc. Nors šis formatas kompaktiškas ir plačiai paplitęs, jis žmogui neleidžia lengvai suprasti, kaip pakeitus kodo reikšmę pasikeis spalva. Pavyzdžiui, nežinant, kad prie raudonos poros pridėjus 10 gaunama ryškesnė raudona, sunku eksperimentuoti. Be to, standartinis HEX neturi alfa kanalo – visada dirbama su visiškai nepermatomomis spalvomis.
HSL struktūra – atspalvis, sodrumas, šviesumas
HSL (Hue, Saturation, Lightness) yra spalvų modelis, sukurtas atsižvelgiant į tai, kaip žmogus suvokia spalvas. Atspalvis (hue) matuojamas laipsniais spalvų ratelyje nuo 0 iki 360, kur 0° – raudona, 120° – žalia, 240° – mėlyna. Sodrumas (saturation) išreiškiamas procentais – 0% reiškia pilką atspalvį, 100% – gryną spalvą. Šviesumas (lightness) taip pat procentais: 0% – juoda, 100% – balta, 50% – gryna spalva (be pritemdymo ar pašviesinimo). Ši struktūra leidžia keisti vieną komponentą nepaliečiant kitų – pavyzdžiui, sumažinus šviesumą, gaunamas tamsesnis to paties atspalvio variantas. Tai neįmanoma tiesiogiai manipuliuojant HEX, nes ten tenka keisti visas tris RGB poras, kad išlaikytum tą patį atspalvį.
Pagrindinis šio puslapio skirtumas: nuo HEX prie HSL
Šis puslapis skirtas būtent tam, kad šešioliktainį kodą paverstų į žmogui suprantamesnę HSL išraišką. Skirtumas akivaizdus: HEX yra žaliavinis RGB žymėjimas, o HSL – modelis, sukurtas žmogaus spalvų suvokimui. Įvedus #1E90FF, puslapis akimirksniu pateikia atitikmenį hsl(210°, 100%, 56%). Dabar galima aiškiai matyti, kad tai mėlynas atspalvis (210°), visiškai sodrus (100%) ir vidutinio šviesumo (56%). Jei reikia šviesesnio varianto, pakanka padidinti šviesumą iki 70%, o kiti du parametrai lieka nepakitę. Tai itin naudinga kuriant CSS temas, mygtukų būsenas (hover, active), generuojant šviesias ir tamsias versijas.
Puslapis priima tiek šešių, tiek trijų simbolių HEX kodus su # arba be jo. Įvedus neteisingą reikšmę, rodomas klaidos pranešimas: „Enter a hex color like #4f46e5 or #abc.“ Visos konversijos vyksta naršyklėje – jokie duomenys nesiunčiami į serverį, todėl galima dirbti ir neprisijungus.
Ką puslapis daro: įvestis, išvestis, spalvų konvertavimas
Įvedus HEX spalvą, puslapis pateikia ne tik HSL reikšmę, bet ir atitikmenis kitais formatais: RGB, HSV, CMYK, LAB. Tai leidžia kopijuoti reikiamą formatą tiesiogiai. Pavyzdžiui, jei dirbate su spausdinimo projektavimu, CMYK reikšmė (nors ir apytikslė) gali padėti, bet reikia atsiminti, kad tai ekrano įvertis ir nereikėtų juo remtis profesionaliam spausdinimui be kalibracijos. HSV formatas (hue, saturation, value) yra panašus į HSL, tačiau naudoja ryškumą (value), o ne šviesumą – skirtumas tas, kad HSL šviesumas 100% visada yra balta, o HSV ryškumas 100% – maksimalus spalvos intensyvumas be pritemdymo. LAB koordinatės pateikiamos kaip papildoma erdvė, bet jų supratimas reikalingas labiau pažengusiems.
Kiekvienas laukas atnaujinamas sinchroniškai – redaguojant HEX iškart keičiasi visi kiti. Galima ir atvirkščiai: pakeitus HSL, RGB ar kitą reikšmę, HEX taip pat perskaičiuojamas. Tačiau čia galioja svarbi taisyklė: jei kitoje spalvų erdvėje (pvz., CMYK ar LAB) įvesta reikšmė išeina už matomo RGB gamos ribų, spalva priderinama prie artimiausios rodomos. Dėl to, grąžinus tokią spalvą atgal į HEX, gali atsirasti nedidelis poslinkis. Pavyzdžiui, LAB koordinatės, nurodančios itin sodrią violetinę, kurių negali parodyti joks ekranas, bus automatiškai apkarpytos.
Spalvų erdvės ir ribos: RGB, HSL, CMYK, LAB
RGB (ir jo HEX atitikmuo) yra adityvi spalvų sistema, veikianti šviesos spindulių principu. Kiekviena spalva gaunama maišant raudoną, žalią ir mėlyną šviesą. Kita vertus, CMYK (cyran, magenta, yellow, key/black) yra subtraktyvi, naudojama spausdinime, kur dažai sugeria šviesą. HSL yra tarpinis modelis, kuris nėra nei visiškai perceptinis (kaip LAB), nei tiesiogiai susijęs su fizine šviesa – jis sukurtas žmogaus patogumui. LAB (CIE Lab*) yra perceptinis, t. y. atstumai šioje erdvėje atitinka žmogaus akies jautrumą spalvų skirtumams. Bet kai kurios LAB reikšmės neatitinka jokio RGB monitoriaus, todėl konversija gali grąžinti kuo artimesnę rodomą spalvą.
Praktiškai tai reiškia, kad negalima aklai pasitikėti, jog įvedus labai ryškius CMYK ar LAB skaičius gausite tą pačią spalvą ekrane – ji bus priderinta. Šio puslapio privalumas – jis aiškiai parodo, kokia spalva bus rodoma, bet neprivalo įspėti apie užribį, nebent pats to nori. Bet pagal faktų lapą, jei perjungiate į kitą erdvę ir įvedate už matomo RGB, spalva koreguojama.
Dažniausios naudojimo sritys: CSS, prieinamumas, paletės
Front-end kūrėjai šį puslapį naudoja, kai iš dizaino gauna HEX spalvą ir nori ją perkelti į HSL, kad galėtų lengvai kurti temų variantus. Pavyzdžiui, turint bazinę #4f46e5, galima gauti hsl(243°, 78%, 58%). Tada hover efektui pakanka sumažinti šviesumą iki 48%, o aktyviam mygtukui dar sumažinti iki 38%. Taip pat galima keisti sodrumą, kad gauti mažiau ryškią versiją. Tai daroma vienoje CSS eilutėje, naudojant hsl() funkciją.
Prieinamumo auditoriams HSL padeda greitai patikrinti kontrastą: jei teksto spalva yra hsl(0, 0%, 20%) (tamsiai pilka), o fonas hsl(0, 0%, 95%) (beveik balta), kontrasto santykį galima apskaičiuoti pagal šviesumo skirtumą. WCAG reikalauja minimalaus 4,5:1 santykio įprastam tekstui. Naudojantis HSL lengviau rasti atspalvį, kuris išlaikys tą patį sodrumą, bet padidins šviesumo kontrastą.
Kuriant spalvų paletes, HSL leidžia generuoti analogiškas (keičiant atspalvį ±30°), monochromatines (keičiant šviesumą ir/arba sodrumą), trijų spalvų (atspalviai ±120°) schemas – viskas vienoje vietoje, be papildomų skaičiavimų.
DUK
Ar puslapis priima HEX kodus be # ženklo?
Taip, galima įvesti tiek #1E90FF, tiek 1E90FF. Taip pat priimamas trijų simbolių trumpinys, pvz., #abc arba abc.
Ką daryti, jei įvedu neteisingą reikšmę?
Puslapis parodys klaidos pranešimą: „Enter a hex color like #4f46e5 or #abc.“ Jokio automatinio taisymo nėra – reikia įvesti galiojantį šešioliktainį kodą.
Ar HSL reikšmė turi alfa kanalą?
Ne. Standartinis HSL neturi permatomumo, o šis puslapis dirba tik su visiškai nepermatomomis spalvomis. Jei reikia alfa, reikėtų naudoti HSLA (hue, saturation, lightness, alpha), tačiau čia jis neteikiamas.
Kodėl CMYK reikšmė skiriasi nuo profesionalaus spausdinimo?
Pateikiamas CMYK yra apytikslis ekrano įvertis, apskaičiuotas pagal RGB konversiją. Profesionaliam spausdinimui reikia kalibruoto spausdintuvo profilio ir ICC charakteristikų.
Ar galima įvesti reikšmę kitoje erdvėje (pvz., HSL) ir gauti HEX?
Taip, visi laukai redaguojami – pakeitus HSL laukus, HEX atitinkamai perskaičiuojamas. Tačiau jei HSL reikšmė yra už RGB gamos (pvz., šviesumas 0% arba sodrumas 0% bet kuriuo atveju yra RGB), ji bus rodoma pilka arba juoda. Kitais atvejais (pvz., LAB) gali būti priderinta prie artimiausios rodomos spalvos.
Ar puslapis saugo mano įvestus duomenis?
Ne. Visi skaičiavimai vyksta naršyklėje (JavaScript). Nieko nesiunčiama į serverį, todėl duomenys lieka tik jūsų kompiuteryje.
Kuo HSL skiriasi nuo HSV?
Abu modeliai naudoja tą patį atspalvį, bet HSV (Hue, Saturation, Value) naudoja ryškumą, kur 100% – maksimalus intensyvumas, o HSL naudoja šviesumą, kur 100% – balta. HSL yra labiau pritaikytas žmogui, nes šviesumo skalė nuo juodos iki baltos atitinka natūralų suvokimą.