CSS-i suhtelise värvisüntaksi lahtiseletamine: HSL- ja Lab-värviruumid globaalse veebidisaini jaoks

Veebidisaini maailm areneb pidevalt ja koos sellega ka tööriistad ja tehnikad, mida kasutame visuaalselt köitvate ja ligipääsetavate kogemuste loomiseks. Üks põnevamaid hiljutisi lisandusi CSS-ile on suhteline värvisüntaks. See võimas funktsioon võimaldab teil värve otse oma CSS-is muuta, luues dünaamilisi teemasid, peeneid variatsioone ja ligipääsetavaid kujundusi suurema lihtsuse ja paindlikkusega. See artikkel süveneb suhtelise värvisüntaksi peensustesse, keskendudes HSL- ja Lab-värviruumidele ning sellele, kuidas saate neid oma ülemaailmsetes projektides ära kasutada.

Mis on CSS-i suhteline värvisüntaks?

Enne suhtelist värvisüntaksit hõlmas värvidega manipuleerimine CSS-is sageli eelprotsessorite, nagu Sass või Less, kasutamist või JavaScriptile tuginemist. Suhteline värvisüntaks muudab seda, võimaldades teil olemasolevaid värve otse oma CSS-reeglites muuta. See teeb seda, viidates värvi üksikutele komponentidele (nagu toon, küllastus ja heledus HSL-is) ja rakendades neile matemaatilisi tehteid. See tähendab, et saate värvi heledamaks, tumedamaks muuta, küllastada, küllastust vähendada või tooni muuta selle hetkeväärtuse alusel, ilma et peaksite eelnevalt mitut värvivariatsiooni määratlema.

Süntaks on üles ehitatud color() funktsioonile, mis võimaldab teil määrata värviruumi (nagu hsl, lab, lch, rgb või oklab), muudetava põhivärvi ja soovitud kohandused. Näiteks:

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

See koodilõik võtab punase värvi, kasutab hsl värviruumi ja suurendab tooni 30 kraadi võrra. h, s ja l tähistavad vastavalt olemasolevat tooni, küllastust ja heledust. Funktsioon calc() on matemaatiliste tehete sooritamiseks ülioluline.

Miks HSL ja Lab?

Kuigi suhteline värvisüntaks töötab erinevate värviruumidega, pakuvad HSL ja Lab selgeid eeliseid värvidega manipuleerimisel ja ligipääsetavuse tagamisel. Uurime, miks:

HSL (toon, küllastus, heledus)

HSL on silindriline värviruum, mis esitab värve intuitiivselt vastavalt inimsilma tajule. See on määratletud kolme komponendiga:

Toon: Värvi asukoht värvirattal (0–360 kraadi). Punane on tavaliselt 0, roheline 120 ja sinine 240 juures.
Küllastus: Värvi intensiivsus ehk puhtus (0–100%). 0% on halltoonides ja 100% on täielikult küllastunud.
Heledus: Värvi tajutav heledus (0–100%). 0% on must ja 100% on valge.

HSL-i eelised:

Intuitiivne manipuleerimine: HSL teeb värvide kohandamise tajutavate omaduste põhjal lihtsaks. Heleduse suurendamine muudab värvi eredamaks, küllastuse vähendamine tuhmimaks ja tooni muutmine nihutab värvi piki värviratast.
Värvilahenduste loomine: HSL lihtsustab harmooniliste värvilahenduste loomise protsessi. Saate hõlpsasti genereerida komplementaarvärve (toon + 180 kraadi), analoogvärve (üksteise lähedal asuvad toonid) või triaadilisi värve (120-kraadise vahega toonid).
Dünaamiline teemade loomine: HSL on ideaalne dünaamiliste teemade jaoks. Saate määratleda põhivärvi ja seejärel kasutada suhtelist värvisüntaksit, et genereerida erinevaid variatsioone heleda ja tumeda režiimi jaoks.

Näide: tumeda režiimi teema loomine

Oletame, et teie brändi värv on #007bff (elav sinine). Saate kasutada HSL-i, et luua tume režiimi teema, mis säilitab brändi olemuse, olles samal ajal vähese valgusega tingimustes silmadele kergem.

: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; /* Tumehall */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Veidi vähem küllastunud ja heledam brändivärv */
 }
}

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

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

Selles näites kontrollime, kas kasutaja eelistab tumedat värvilahendust. Kui jah, siis kasutame suhtelist värvisüntaksit, et brändi värvi küllastust veidi vähendada ja seda heledamaks muuta, et saavutada parem kontrast tumeda taustaga. See tagab, et brändi identiteet jääb järjepidevaks, parandades samal ajal kasutajakogemust tumedas režiimis.

Lab (heledus, a, b)

Lab (või CIELAB) on värviruum, mis on loodud olema tajuliselt ühtlane. See tähendab, et muutus värviväärtustes vastab sarnasele muutusele tajutavas värvierinevuses, olenemata algvärvist. See on määratletud kolme komponendiga:

L: Heledus (0–100%). 0 on must ja 100 on valge.
a: Positsioon rohelise-punase teljel. Negatiivsed väärtused on rohelised ja positiivsed väärtused on punased.
b: Positsioon sinise-kollase teljel. Negatiivsed väärtused on sinised ja positiivsed väärtused on kollased.

Lab-i eelised:

Tajuline ühtlus: Lab-i tajuline ühtlus muudab selle ideaalseks ülesannete jaoks, kus täpsed värvierinevused on olulised, näiteks värvikorrektsioon ja ligipääsetavuse kontroll.
Lai värvigamma: Lab suudab esitada laiemat värvivalikut kui RGB või HSL.
Ligipääsetavus: Lab-i kasutatakse sageli ligipääsetavuse arvutustes, et tagada piisav värvikontrast teksti ja tausta vahel. WCAG (Veebisisu ligipääsetavuse suunised) kasutab valemit, mis põhineb suhtelisel heledusel, mis on tihedalt seotud Lab-värviruumiga.

Näide: värvikontrasti parandamine ligipääsetavuse huvides

Piisava värvikontrasti tagamine on ligipääsetavuse seisukohast eluliselt tähtis. Oletame, et teil on teksti- ja taustavärv, mis ei vasta päriselt WCAG AA kontrastsussuhte nõudele (4.5:1). Saate kasutada Lab-i, et kohandada teksti värvi heledust, kuni see nõudele vastab.

Märkus: Kuigi kontrastsussuhte otsene muutmine pole CSS-is suhtelise värvisüntaksiga võimalik, saame seda kasutada heleduse kohandamiseks ja seejärel tulemuse kontrollimiseks kontrastsuse kontrollimise tööriista abil.

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

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

/*Näide: See tegelikult ei arvuta kontrastsussuhet otse.*/
/*See on kontseptuaalne näide heleduse kohandamisest*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Muudab teksti 10 ühiku võrra heledamaks. See mõjub ainult teatud piirini, kui teksti värvi L väärtus on 100 lähedal. Tumedamaks muutmiseks tuleks lahutada*/

}

Selles näites püüame teksti värvi heledamaks muuta, et kontrasti parandada. Kuna me ei saa CSS-is kontrastsussuhet arvutada, peame tulemust pärast muutmist kontrollima ja vajadusel täpsustama.

Oklab: Lab-i täiustus

Oklab on suhteliselt uus värviruum, mis on loodud lahendama mõningaid Lab-i tajutavaid puudusi. Selle eesmärk on saavutada veelgi parem tajuline ühtlus, mis teeb lihtsamaks ennustada, kuidas muutused värviväärtustes mõjutavad tajutavat värvi. Paljudel juhtudel pakub Oklab sujuvamat ja loomulikumat viisi värvide kohandamiseks võrreldes Lab-iga, eriti küllastuse ja heledusega tegelemisel.

Oklab-i kasutamine suhtelise värvisüntaksiga sarnaneb Lab-i kasutamisega. Lihtsalt määrate värviruumiks oklab:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Muudab värvi 10% heledamaks*/
}

Praktilised näited ja kasutusjuhud

Suhteline värvisüntaks koos HSL-i ja Lab-iga avab veebidisainis laia valiku võimalusi. Siin on mõned praktilised näited:

Värvipalettide genereerimine: Looge põhivärv ja genereerige seejärel HSL-i abil komplementaarsete, analoogsete või triaadiliste värvide palett.
Elementide esiletõstmine: Muutke elemendi taustavärvi hiirega üleliikumisel (hover) või fookuses olles heledamaks või tumedamaks, et anda visuaalset tagasisidet.
Peenete variatsioonide loomine: Lisage väike variatsioon toonis või küllastuses, et luua sügavust ja visuaalset huvi.
Dünaamiline teemade loomine: Rakendage heledat ja tumedat režiimi või lubage kasutajatel oma veebisaidi värvilahendust kohandada.
Ligipääsetavuse parandused: Kohandage värve, et tagada piisav kontrast nägemispuudega kasutajatele.

Näide: värvipaleti genereerimine HSL-i abil

:root {
 --base-color: #29abe2; /* Helesinine */
 --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);
}

See näide demonstreerib, kuidas genereerida HSL-i abil värvipalett ühe põhivärvi alusel. Saate seda koodi hõlpsasti kohandada, et luua erinevaid värviharmooniaid ja kohandada neid vastavalt oma konkreetsetele disainivajadustele.

Näide: hiirega üleliikumise efekti (hover) loomine Lab-i abil

.button {
 background-color: #4caf50; /* Roheline värv */
 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)); /* Veidi heledamaks ja suurendab a ja b väärtusi */
}

Siin kasutame Lab-i, et hiirega üle liikudes värvi veidi heledamaks muuta ja nihutada punase ja kollase suunas, luues kasutajale peene, kuid märgatava visuaalse tagasiside.

Brauseri ühilduvus ja varuvariandid

Nagu iga uue CSS-funktsiooni puhul, on brauseri ühilduvus oluline kaalutlus. Suhtelist värvisüntaksit toetavad enamik kaasaegseid brausereid, sealhulgas Chrome, Firefox, Safari ja Edge. Vanemad brauserid ei pruugi seda aga toetada.

Et tagada oma veebisaidi toimimine kõigis brauserites, on oluline pakkuda varuvariante brauseritele, mis ei toeta suhtelist värvisüntaksit. Saate seda teha, kasutades CSS-muutujaid ja @supports-reeglit.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Varuvariant värvile */
}

@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); /* Kasuta suhtelist värvisüntaksit, kui see on toetatud */
 }
}

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

Selles näites määratleme varuvärvi (#33b5e5) ja kasutame seejärel @supports-reeglit, et kontrollida, kas brauser toetab suhtelist värvisüntaksit. Kui toetab, siis uuendame --highlight-color muutujat suhtelise värvisüntaksi abil genereeritud värviga. See tagab, et vanemate brauserite kasutajad näevad endiselt esiletõstetud elementi, isegi kui see pole täpselt sama värvi kui uuemates brauserites.

Ligipääsetavuse kaalutlused

Kuigi suhteline värvisüntaks võib olla võimas tööriist visuaalselt köitvate kujunduste loomiseks, on ülioluline arvestada ligipääsetavusega. Veenduge, et teie loodud värvikombinatsioonid pakuksid piisavat kontrasti nägemispuudega kasutajatele. Kasutage tööriistu nagu WebAIM Contrast Checker, et kontrollida, kas teie värvikombinatsioonid vastavad WCAG AA või AAA kontrastsussuhte nõuetele.

Pidage meeles, et värvitaju võib inimestel oluliselt erineda. Kaaluge oma kujunduste testimist kasutajatega, kellel on erinevat tüüpi värvipimedus või nägemispuue, et tagada nende võime teie veebisaiti hõlpsalt tajuda ja sellega suhelda.

Kokkuvõte

CSS-i suhteline värvisüntaks, eriti kombineerituna HSL- ja Lab-värviruumidega, on veebidisainerite jaoks mängumuutev. See annab teile võimaluse luua dünaamilisi teemasid, peeneid variatsioone ja ligipääsetavaid kujundusi suurema lihtsuse ja paindlikkusega. Mõistes HSL-i ja Lab-i põhimõtteid ning pakkudes vanematele brauseritele varuvariante, saate seda võimsat funktsiooni ära kasutada, et luua visuaalselt vapustavaid ja kaasavaid kogemusi kasutajatele kogu maailmas.

Võtke omaks suhtelise värvisüntaksi jõud ja viige oma veebidisaini oskused järgmisele tasemele. Katsetage erinevate värviruumide, matemaatiliste tehete ja ligipääsetavuse kaalutlustega, et luua veebisaite, mis on nii ilusad kui ka kõigile kaasavad.

Lisalugemist

Mõistes ja kasutades CSS-i suhtelist värvisüntaksit, saate luua dünaamilisemaid, ligipääsetavamaid ja visuaalselt köitvamaid veebisaite, mis on suunatud globaalsele publikule. Pidage meeles, et värvidega kujundamisel seadke alati esikohale ligipääsetavus ja kasutajakogemus.