Atšifrējam CSS relatīvo krāsu sintaksi: HSL un Lab krāsu telpas globālam tīmekļa dizainam

Tīmekļa dizaina pasaule nepārtraukti attīstās, un līdz ar to arī rīki un metodes, ko izmantojam vizuāli pievilcīgas un pieejamas pieredzes radīšanai. Viens no aizraujošākajiem jaunākajiem papildinājumiem CSS ir Relatīvā krāsu sintakse. Šī jaudīgā funkcija ļauj manipulēt ar krāsām tieši jūsu CSS, veidojot dinamiskas tēmas, smalkas variācijas un pieejamus dizainus ar lielāku vieglumu un elastību. Šis raksts iedziļinās Relatīvās krāsu sintakses niansēs, koncentrējoties uz HSL un Lab krāsu telpām un to, kā tās varat izmantot savos projektos visā pasaulē.

Kas ir CSS Relatīvā krāsu sintakse?

Pirms Relatīvās krāsu sintakses krāsu manipulēšana CSS bieži ietvēra priekšprocesoru, piemēram, Sass vai Less, izmantošanu vai paļaušanos uz JavaScript. Relatīvā krāsu sintakse to maina, ļaujot jums modificēt esošās krāsas tieši CSS noteikumos. Tas tiek darīts, atsaucoties uz atsevišķiem krāsas komponentiem (piemēram, toni, piesātinājumu un gaišumu HSL) un pielietojot tiem matemātiskas darbības. Tas nozīmē, ka jūs varat padarīt krāsu gaišāku, tumšāku, piesātinātāku, mazāk piesātinātu vai mainīt tās toni, pamatojoties uz tās pašreizējo vērtību, un tas viss bez nepieciešamības iepriekš definēt vairākas krāsu variācijas.

Sintakse ir veidota ap color() funkciju, kas ļauj norādīt krāsu telpu (piemēram, hsl, lab, lch, rgb vai oklab), bāzes krāsu, ko modificēt, un vēlamos pielāgojumus. Piemēram:

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

Šis koda fragments paņem sarkano krāsu, izmanto hsl krāsu telpu un palielina toni par 30 grādiem. h, s un l attiecīgi apzīmē esošās toņa, piesātinājuma un gaišuma vērtības. calc() funkcija ir būtiska matemātisko darbību veikšanai.

Kāpēc HSL un Lab?

Lai gan Relatīvā krāsu sintakse darbojas ar dažādām krāsu telpām, HSL un Lab piedāvā īpašas priekšrocības krāsu manipulācijai un pieejamībai. Izpētīsim, kāpēc:

HSL (Tonis, Piesātinājums, Gaišums)

HSL ir cilindriska krāsu telpa, kas intuitīvi attēlo krāsas, pamatojoties uz cilvēka uztveri. To nosaka trīs komponenti:

Tonis: Krāsas pozīcija uz krāsu apļa (0-360 grādi). Sarkans parasti ir pie 0, zaļš pie 120 un zils pie 240.
Piesātinājums: Krāsas intensitāte vai tīrība (0-100%). 0% ir pelēktoņu, un 100% ir pilnībā piesātināts.
Gaišums: Krāsas uztvertais spilgtums (0-100%). 0% ir melns, un 100% ir balts.

HSL priekšrocības:

Intuitīva manipulācija: HSL atvieglo krāsu pielāgošanu, pamatojoties uz uztveres īpašībām. Palielinot gaišumu, krāsa kļūst spilgtāka, samazinot piesātinājumu, tā kļūst blāvāka, un mainot toni, krāsa pārvietojas pa krāsu apli.
Krāsu shēmu veidošana: HSL vienkāršo harmonisku krāsu shēmu izveides procesu. Jūs varat viegli ģenerēt komplementāras krāsas (tonis + 180 grādi), analogas krāsas (toņi, kas atrodas tuvu viens otram) vai triādiskās krāsas (toņi ar 120 grādu atstarpi).
Dinamiska tēmošana: HSL ir ideāli piemērots dinamiskai tēmošanai. Jūs varat definēt bāzes krāsu un pēc tam izmantot Relatīvo krāsu sintaksi, lai ģenerētu dažādas variācijas gaišajam un tumšajam režīmam.

Piemērs: Tumšā režīma tēmas izveide

Pieņemsim, ka jūsu zīmola krāsa ir #007bff (koši zila). Jūs varat izmantot HSL, lai izveidotu tumšā režīma tēmu, kas saglabā zīmola būtību, vienlaikus esot saudzīgāka acīm vājā apgaismojumā.

: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; /* Tumši pelēks */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Nedaudz mazāk piesātināta un gaišāka zīmola krāsa */
 }
}

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

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

Šajā piemērā mēs pārbaudām, vai lietotājs dod priekšroku tumšai krāsu shēmai. Ja tā, mēs izmantojam Relatīvo krāsu sintaksi, lai nedaudz samazinātu zīmola krāsas piesātinājumu un padarītu to gaišāku, lai uzlabotu kontrastu uz tumšā fona. Tas nodrošina zīmola identitātes konsekvenci, vienlaikus uzlabojot lietotāja pieredzi tumšajā režīmā.

Lab (Gaišums, a, b)

Lab (jeb CIELAB) ir krāsu telpa, kas izstrādāta, lai būtu uztveres ziņā vienmērīga. Tas nozīmē, ka izmaiņas krāsu vērtībās atbilst līdzīgām izmaiņām uztvertajā krāsu atšķirībā, neatkarīgi no sākuma krāsas. To nosaka trīs komponenti:

L: Gaišums (0-100%). 0 ir melns, un 100 ir balts.
a: Pozīcija pa zaļās-sarkanās ass līniju. Negatīvas vērtības ir zaļas, un pozitīvas vērtības ir sarkanas.
b: Pozīcija pa zilās-dzeltenās ass līniju. Negatīvas vērtības ir zilas, un pozitīvas vērtības ir dzeltenas.

Lab priekšrocības:

Uztveres vienmērīgums: Lab uztveres vienmērīgums padara to ideālu uzdevumiem, kur precīzas krāsu atšķirības ir būtiskas, piemēram, krāsu korekcijai un pieejamības pārbaudēm.
Plašs gamuts: Lab var attēlot plašāku krāsu gammu nekā RGB vai HSL.
Pieejamība: Lab bieži tiek izmantots pieejamības aprēķinos, lai nodrošinātu pietiekamu krāsu kontrastu starp tekstu un fonu. WCAG (Web Content Accessibility Guidelines) izmanto formulu, kas balstās uz relatīvo spilgtumu, kas ir cieši saistīts ar Lab krāsu telpu.

Piemērs: Krāsu kontrasta uzlabošana pieejamībai

Pietiekama krāsu kontrasta nodrošināšana ir vitāli svarīga pieejamībai. Pieņemsim, ka jums ir teksta krāsa un fona krāsa, kas pilnībā neatbilst WCAG AA kontrasta attiecības prasībai (4.5:1). Jūs varat izmantot Lab, lai pielāgotu teksta krāsas gaišumu, līdz tā atbilst prasībai.

Piezīme: Lai gan tieši manipulēt ar kontrasta attiecību CSS ar relatīvo krāsu sintaksi nav iespējams, mēs varam to izmantot, lai pielāgotu gaišumu un pēc tam izmantot kontrasta pārbaudes rīku, lai verificētu rezultātu.

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

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

/*Piemērs: Šis kods tieši neaprēķina kontrasta attiecību.*/
/*Tas ir konceptuāls piemērs gaišuma pielāgošanai*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Padarīt tekstu gaišāku par 10 vienībām. Tam būs efekts tikai līdz brīdim, kad teksta krāsas L vērtība būs tuvu 100. Lai padarītu tumšāku, būtu jāatņem*/

}

Šajā piemērā mēs mēģinām padarīt teksta krāsu gaišāku, lai uzlabotu kontrastu. Tā kā mēs nevaram aprēķināt kontrasta attiecību CSS, mums pēc modifikācijas ir jāpārbauda rezultāts un nepieciešamības gadījumā jāveic precizējumi.

Oklab: Uzlabojums pār Lab

Oklab ir salīdzinoši jauna krāsu telpa, kas izstrādāta, lai risinātu dažus no Lab uztvertajiem trūkumiem. Tās mērķis ir vēl labāka uztveres vienmērīgums, kas atvieglo prognozēšanu, kā izmaiņas krāsu vērtībās ietekmēs uztverto krāsu. Daudzos gadījumos Oklab piedāvā gludāku un dabiskāku veidu, kā pielāgot krāsas salīdzinājumā ar Lab, īpaši strādājot ar piesātinājumu un gaišumu.

Oklab izmantošana ar relatīvo krāsu sintaksi ir līdzīga Lab izmantošanai. Jūs vienkārši norādāt oklab kā krāsu telpu:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Padarīt krāsu par 10% gaišāku*/
}

Praktiski piemēri un lietošanas gadījumi

Relatīvā krāsu sintakse ar HSL un Lab paver plašas iespējas tīmekļa dizainā. Šeit ir daži praktiski piemēri:

Krāsu palešu ģenerēšana: Izveidojiet bāzes krāsu un pēc tam ģenerējiet komplementāru, analogu vai triādisku krāsu paleti, izmantojot HSL.
Elementu izcelšana: Padariet elementa fona krāsu gaišāku vai tumšāku, novietojot peles kursoru virs tā vai fokusējoties uz to, lai sniegtu vizuālu atgriezenisko saiti.
Smalku variāciju radīšana: Pievienojiet nelielu toņa vai piesātinājuma variāciju, lai radītu dziļumu un vizuālu interesi.
Dinamiska tēmošana: Ieviesiet gaišos un tumšos režīmus vai ļaujiet lietotājiem pielāgot jūsu vietnes krāsu shēmu.
Pieejamības uzlabojumi: Pielāgojiet krāsas, lai nodrošinātu pietiekamu kontrastu lietotājiem ar redzes traucējumiem.

Piemērs: Krāsu paletes ģenerēšana ar HSL

:root {
 --base-color: #29abe2; /* Gaiši zils */
 --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 piemērs demonstrē, kā ģenerēt krāsu paleti, pamatojoties uz vienu bāzes krāsu, izmantojot HSL. Jūs varat viegli pielāgot šo kodu, lai izveidotu dažādas krāsu harmonijas un pielāgotu tās savām specifiskajām dizaina vajadzībām.

Piemērs: Virsbūves (hover) efekta izveide ar Lab

.button {
 background-color: #4caf50; /* Zaļa krāsa */
 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)); /* Nedaudz padarīt gaišāku un palielināt a un b */
}

Šeit mēs izmantojam Lab, lai, novietojot kursoru virs pogas, nedaudz padarītu krāsu gaišāku un nobīdītu to sarkanā un dzeltenā virzienā, radot smalku, bet pamanāmu vizuālo atgriezenisko saiti lietotājam.

Pārlūkprogrammu saderība un alternatīvas (fallbacks)

Kā ar jebkuru jaunu CSS funkciju, pārlūkprogrammu saderība ir svarīgs apsvērums. Relatīvā krāsu sintakse tiek atbalstīta vairumā moderno pārlūkprogrammu, tostarp Chrome, Firefox, Safari un Edge. Tomēr vecākas pārlūkprogrammas to var neatbalstīt.

Lai nodrošinātu, ka jūsu vietne darbojas visās pārlūkprogrammās, ir svarīgi nodrošināt alternatīvas (fallbacks) tām pārlūkprogrammām, kuras neatbalsta Relatīvo krāsu sintaksi. To var izdarīt, izmantojot CSS mainīgos un @supports noteikumu.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Alternatīvā krāsa */
}

@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); /* Izmantot Relatīvo krāsu sintaksi, ja tā tiek atbalstīta */
 }
}

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

Šajā piemērā mēs definējam alternatīvo krāsu (#33b5e5) un pēc tam izmantojam @supports noteikumu, lai pārbaudītu, vai pārlūkprogramma atbalsta Relatīvo krāsu sintaksi. Ja tā tiek atbalstīta, mēs atjauninām --highlight-color mainīgo ar krāsu, kas ģenerēta, izmantojot Relatīvo krāsu sintaksi. Tas nodrošina, ka lietotāji vecākās pārlūkprogrammās joprojām redz izceltu elementu, pat ja tā krāsa nav precīzi tāda pati kā jaunākās pārlūkprogrammās.

Pieejamības apsvērumi

Lai gan Relatīvā krāsu sintakse var būt spēcīgs rīks vizuāli pievilcīgu dizainu radīšanai, ir ļoti svarīgi ņemt vērā pieejamību. Pārliecinieties, ka jūsu izveidotās krāsu kombinācijas nodrošina pietiekamu kontrastu lietotājiem ar redzes traucējumiem. Izmantojiet rīkus, piemēram, WebAIM Contrast Checker, lai pārbaudītu, vai jūsu krāsu kombinācijas atbilst WCAG AA vai AAA kontrasta attiecības prasībām.

Atcerieties, ka krāsu uztvere var ievērojami atšķirties dažādiem indivīdiem. Apsveriet iespēju testēt savus dizainus ar lietotājiem, kuriem ir dažāda veida krāsu aklums vai redzes traucējumi, lai nodrošinātu, ka viņi var viegli uztvert un mijiedarboties ar jūsu vietni.

Noslēgums

CSS Relatīvā krāsu sintakse, īpaši kombinācijā ar HSL un Lab krāsu telpām, ir revolucionārs rīks tīmekļa dizaineriem. Tas ļauj jums ar lielāku vieglumu un elastību veidot dinamiskas tēmas, smalkas variācijas un pieejamus dizainus. Izprotot HSL un Lab principus un nodrošinot alternatīvas vecākām pārlūkprogrammām, jūs varat izmantot šo jaudīgo funkciju, lai radītu vizuāli satriecošu un iekļaujošu pieredzi lietotājiem visā pasaulē.

Pieņemiet Relatīvās krāsu sintakses spēku un paceliet savas tīmekļa dizaina prasmes jaunā līmenī. Eksperimentējiet ar dažādām krāsu telpām, matemātiskām darbībām un pieejamības apsvērumiem, lai izveidotu vietnes, kas ir gan skaistas, gan iekļaujošas visiem.

Papildu materiāli

Izprotot un izmantojot CSS Relatīvo krāsu sintaksi, jūs varat izveidot dinamiskākas, pieejamākas un vizuāli pievilcīgākas vietnes, kas ir piemērotas globālai auditorijai. Atcerieties, ka, strādājot ar krāsām, vienmēr prioritāte ir pieejamība un lietotāja pieredze.