CSS santykinės spalvų sintaksės paslapčių atskleidimas: HSL ir Lab spalvų erdvės globaliam interneto dizainui

Interneto dizaino pasaulis nuolat keičiasi, o kartu su juo ir įrankiai bei technikos, kurias naudojame vizualiai patrauklioms ir prieinamoms patirtims kurti. Vienas iš įdomiausių pastarojo meto CSS papildymų yra santykinė spalvų sintaksė. Ši galinga funkcija leidžia manipuliuoti spalvomis tiesiogiai CSS, lengviau ir lanksčiau kuriant dinamiškas temas, subtilius variantus ir prieinamus dizainus. Šiame straipsnyje gilinamasi į santykinės spalvų sintaksės subtilybes, ypatingą dėmesį skiriant HSL ir Lab spalvų erdvėms ir kaip galite jas panaudoti savo projektuose visame pasaulyje.

Kas yra CSS santykinė spalvų sintaksė?

Prieš atsirandant santykinei spalvų sintaksei, spalvų manipuliavimas CSS dažnai reikalavo naudoti preprocesorius, tokius kaip Sass ar Less, arba pasikliauti JavaScript. Santykinė spalvų sintaksė tai keičia, leisdama modifikuoti esamas spalvas tiesiogiai CSS taisyklėse. Tai daroma nurodant individualius spalvos komponentus (pavyzdžiui, atspalvį, sodrumą ir šviesumą HSL) ir taikant jiems matematines operacijas. Tai reiškia, kad galite pašviesinti, patamsinti, padidinti ar sumažinti sodrumą arba pakeisti spalvos atspalvį, remdamiesi jos esama verte, ir tam nereikia iš anksto apibrėžti kelių spalvų variantų.

Sintaksė yra pagrįsta color() funkcija, leidžiančia nurodyti spalvų erdvę (pvz., hsl, lab, lch, rgb, arba oklab), bazinę spalvą, kurią norima modifikuoti, ir norimus pakeitimus. Pavyzdžiui:

.element {
 color: color(hsl red calc(h + 30) s l);
}

Šis fragmentas paima raudoną spalvą, naudoja hsl spalvų erdvę ir padidina atspalvį 30 laipsnių. h, s ir l atitinkamai reiškia esamas atspalvio, sodrumo ir šviesumo vertes. calc() funkcija yra labai svarbi atliekant matematines operacijas.

Kodėl HSL ir Lab?

Nors santykinė spalvų sintaksė veikia su įvairiomis spalvų erdvėmis, HSL ir Lab siūlo aiškius privalumus spalvų manipuliavimui ir prieinamumui. Išsiaiškinkime, kodėl:

HSL (atspalvis, sodrumas, šviesumas)

HSL yra cilindrinė spalvų erdvė, kuri intuityviai atspindi spalvas, remiantis žmogaus suvokimu. Ją apibrėžia trys komponentai:

Atspalvis: Spalvos pozicija spalvų rate (0-360 laipsnių). Raudona paprastai yra ties 0, žalia ties 120, o mėlyna ties 240.
Sodrumas: Spalvos intensyvumas arba grynumas (0-100%). 0% yra pilkumo skalė, o 100% yra visiškai sodri spalva.
Šviesumas: Suvokiamas spalvos ryškumas (0-100%). 0% yra juoda, o 100% yra balta.

HSL privalumai:

Intuityvus manipuliavimas: HSL leidžia lengvai koreguoti spalvas pagal suvokiamas savybes. Didinant šviesumą, spalva tampa ryškesnė, mažinant sodrumą – blankesnė, o keičiant atspalvį, spalva juda spalvų ratu.
Spalvų schemų kūrimas: HSL supaprastina harmoningų spalvų schemų kūrimo procesą. Galite lengvai generuoti papildomas spalvas (atspalvis + 180 laipsnių), analogiškas spalvas (artimi atspalviai) arba triadines spalvas (atspalviai, esantys 120 laipsnių atstumu vienas nuo kito).
Dinamiškas temų kūrimas: HSL idealiai tinka dinamiškam temų kūrimui. Galite apibrėžti bazinę spalvą ir tada naudoti santykinę spalvų sintaksę, kad sukurtumėte skirtingus variantus šviesiems ir tamsiems režimams.

Pavyzdys: tamsaus režimo temos kūrimas

Tarkime, jūsų prekės ženklo spalva yra #007bff (ryškiai mėlyna). Galite naudoti HSL, kad sukurtumėte tamsaus režimo temą, kuri išlaikytų prekės ženklo esmę ir būtų malonesnė akims esant silpnam apšvietimui.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* Tamsiai pilka */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Šiek tiek mažesnio sodrumo ir pašviesinta prekės ženklo spalva */
 }
}

body {
 background-color: var(--bg-color);
 color: var(--text-color);
}

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

Šiame pavyzdyje tikriname, ar vartotojas teikia pirmenybę tamsiai spalvų schemai. Jei taip, naudojame santykinę spalvų sintaksę, kad šiek tiek sumažintume prekės ženklo spalvos sodrumą ir ją pašviesintume, siekdami geresnio kontrasto tamsiame fone. Tai užtikrina, kad prekės ženklo identitetas išliktų nuoseklus, kartu pagerinant vartotojo patirtį tamsiame režime.

Lab (šviesumas, a, b)

Lab (arba CIELAB) yra spalvų erdvė, sukurta taip, kad būtų suvokiamai vienoda. Tai reiškia, kad spalvų verčių pokytis atitinka panašų suvokiamą spalvų skirtumo pokytį, nepriklausomai nuo pradinės spalvos. Ją apibrėžia trys komponentai:

L: Šviesumas (0-100%). 0 yra juoda, o 100 yra balta.
a: Pozicija žalios-raudonos ašyje. Neigiamos reikšmės yra žalios, o teigiamos – raudonos.
b: Pozicija mėlynos-geltonos ašyje. Neigiamos reikšmės yra mėlynos, o teigiamos – geltonos.

Lab privalumai:

Suvokiamas vienodumas: Dėl suvokiamo vienodumo Lab idealiai tinka užduotims, kur svarbūs tikslūs spalvų skirtumai, pavyzdžiui, spalvų korekcijai ir prieinamumo patikrinimams.
Plati gama: Lab gali atvaizduoti platesnį spalvų spektrą nei RGB ar HSL.
Prieinamumas: Lab dažnai naudojama prieinamumo skaičiavimuose, siekiant užtikrinti pakankamą spalvų kontrastą tarp teksto ir fono. WCAG (Web Content Accessibility Guidelines) naudoja formulę, pagrįstą santykiniu skaistumu, kuris yra glaudžiai susijęs su Lab spalvų erdve.

Pavyzdys: spalvų kontrasto gerinimas siekiant prieinamumo

Pakankamo spalvų kontrasto užtikrinimas yra gyvybiškai svarbus prieinamumui. Tarkime, turite teksto ir fono spalvas, kurios neatitinka WCAG AA kontrasto santykio reikalavimo (4.5:1). Galite naudoti Lab, kad pakoreguotumėte teksto spalvos šviesumą, kol ji atitiks reikalavimą.

Pastaba: Nors tiesiogiai manipuliuoti kontrasto santykiu CSS su santykine spalvų sintakse negalima, galime ją naudoti šviesumui koreguoti, o tada naudoti kontrasto tikrinimo įrankį rezultatui patikrinti.

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*Pavyzdys: Tai iš tikrųjų tiesiogiai neapskaičiuoja kontrasto santykio.*/
/*Tai konceptualus šviesumo koregavimo pavyzdys*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Pašviesinti tekstą 10 vienetų. Tai turės poveikį tik iki tam tikro taško, jei teksto spalvos L vertė yra artima 100. Norint patamsinti, reikėtų atimti*/

}

Šiame pavyzdyje bandome pašviesinti teksto spalvą, kad pagerintume kontrastą. Kadangi negalime apskaičiuoti kontrasto santykio CSS, turime patikrinti rezultatą po modifikacijos ir prireikus jį patikslinti.

Oklab: Lab patobulinimas

Oklab yra palyginti nauja spalvų erdvė, sukurta siekiant išspręsti kai kuriuos suvokiamus Lab trūkumus. Ji siekia dar geresnio suvokiamo vienodumo, todėl lengviau nuspėti, kaip spalvų verčių pokyčiai paveiks suvokiamą spalvą. Daugeliu atvejų Oklab siūlo sklandesnį ir natūralesnį būdą koreguoti spalvas, palyginti su Lab, ypač dirbant su sodrumu ir šviesumu.

Naudoti Oklab su santykine spalvų sintakse yra panašu į Lab naudojimą. Jūs tiesiog nurodote oklab kaip spalvų erdvę:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Pašviesinti spalvą 10%*/
}

Praktiniai pavyzdžiai ir naudojimo atvejai

Santykinė spalvų sintaksė su HSL ir Lab atveria platų galimybių spektrą interneto dizainui. Štai keletas praktinių pavyzdžių:

Spalvų palečių generavimas: Sukurkite bazinę spalvą ir tada su HSL generuokite papildomų, analogiškų ar triadinių spalvų paletę.
Elementų paryškinimas: Pašviesinkite arba patamsinkite elemento fono spalvą užvedus pelę arba sufokusavus, kad suteiktumėte vizualinį grįžtamąjį ryšį.
Subtilių variacijų kūrimas: Pridėkite nedidelį atspalvio ar sodrumo pokytį, kad sukurtumėte gilumo ir vizualinio susidomėjimo efektą.
Dinamiškas temų kūrimas: Įdiekite šviesius ir tamsius režimus arba leiskite vartotojams pritaikyti jūsų svetainės spalvų schemą.
Prieinamumo gerinimas: Koreguokite spalvas, kad užtikrintumėte pakankamą kontrastą vartotojams su regos sutrikimais.

Pavyzdys: spalvų paletės generavimas su HSL

:root {
 --base-color: #29abe2; /* Šviesiai mėlyna */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

Šis pavyzdys parodo, kaip generuoti spalvų paletę, remiantis viena bazine spalva, naudojant HSL. Galite lengvai pritaikyti šį kodą, kad sukurtumėte skirtingas spalvų harmonijas ir pritaikytumėte jas savo konkretiems dizaino poreikiams.

Pavyzdys: užvedimo efekto kūrimas su Lab

.button {
 background-color: #4caf50; /* Žalia spalva */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* Šiek tiek pašviesinti ir padidinti a ir b */
}

Čia naudojame Lab, kad šiek tiek pašviesintume ir pastumtume spalvą link raudonos ir geltonos užvedus pelę, sukuriant subtilų, bet pastebimą vizualinį grįžtamąjį ryšį vartotojui.

Naršyklių suderinamumas ir atsarginiai variantai

Kaip ir su bet kuria nauja CSS funkcija, naršyklių suderinamumas yra svarbus aspektas. Santykinę spalvų sintaksę palaiko dauguma modernių naršyklių, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau senesnės naršyklės gali jos nepalaikyti.

Norint užtikrinti, kad jūsų svetainė veiktų visose naršyklėse, būtina pateikti atsarginius variantus naršyklėms, kurios nepalaiko santykinės spalvų sintaksės. Tai galite padaryti naudodami CSS kintamuosius ir @supports taisyklę.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Atsarginė spalva */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* Naudoti santykinę spalvų sintaksę, jei palaikoma */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

Šiame pavyzdyje apibrėžiame atsarginę spalvą (#33b5e5), o tada naudojame @supports taisyklę, kad patikrintume, ar naršyklė palaiko santykinę spalvų sintaksę. Jei palaiko, atnaujiname --highlight-color kintamąjį spalva, sugeneruota naudojant santykinę spalvų sintaksę. Tai užtikrina, kad vartotojai su senesnėmis naršyklėmis vis tiek matys paryškintą elementą, net jei jo spalva nebus visiškai tokia pati kaip naujesnėse naršyklėse.

Prieinamumo aspektai

Nors santykinė spalvų sintaksė gali būti galingas įrankis kuriant vizualiai patrauklius dizainus, labai svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad jūsų sukurtos spalvų kombinacijos suteiktų pakankamą kontrastą vartotojams su regos sutrikimais. Naudokite įrankius, tokius kaip WebAIM Contrast Checker, kad patikrintumėte, ar jūsų spalvų kombinacijos atitinka WCAG AA ar AAA kontrasto santykio reikalavimus.

Nepamirškite, kad spalvų suvokimas gali labai skirtis tarp asmenų. Apsvarstykite galimybę išbandyti savo dizainus su vartotojais, turinčiais skirtingų tipų spalvų aklumą ar regos sutrikimų, kad užtikrintumėte, jog jie gali lengvai suvokti ir sąveikauti su jūsų svetaine.

Išvada

CSS santykinė spalvų sintaksė, ypač derinama su HSL ir Lab spalvų erdvėmis, yra tikras perversmas interneto dizaineriams. Ji suteikia galimybę lengviau ir lanksčiau kurti dinamiškas temas, subtilius variantus ir prieinamus dizainus. Suprasdami HSL ir Lab principus bei pateikdami atsarginius variantus senesnėms naršyklėms, galite pasinaudoti šia galinga funkcija, kad sukurtumėte vizualiai stulbinančias ir įtraukias patirtis vartotojams visame pasaulyje.

Pasinaudokite santykinės spalvų sintaksės galia ir pakelkite savo interneto dizaino įgūdžius į kitą lygį. Eksperimentuokite su skirtingomis spalvų erdvėmis, matematinėmis operacijomis ir prieinamumo aspektais, kad sukurtumėte svetaines, kurios būtų ir gražios, ir įtraukios visiems.

Papildoma literatūra

Suprasdami ir naudodami CSS santykinę spalvų sintaksę, galite kurti dinamiškesnes, prieinamesnes ir vizualiai patrauklesnes svetaines, pritaikytas pasaulinei auditorijai. Kuriant su spalvomis, nepamirškite visada teikti pirmenybę prieinamumui ir vartotojo patirčiai.