IzsmeļoÅ”s ceļvedis par CSS relatÄ«vo krÄsu sintaksi, HSL un Lab krÄsu telpÄm, kas ļauj dizaineriem veidot dinamiskas un pieejamas krÄsu shÄmas.
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
- MDN Web Docs par RelatÄ«vo krÄsu sintaksi
- Lea Verou raksts par RelatÄ«vo krÄsu sintaksi
- WebKit blogs par CSS RelatÄ«vo krÄsu sintaksi
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.