CSS Nisbiy Rang Sintaksisini Tushuntirish: Global Veb-Dizayn uchun HSL va Lab Ranglar Makoni

Veb-dizayn dunyosi doimiy ravishda rivojlanib bormoqda va u bilan birga biz vizual jozibador va qulay tajribalarni yaratish uchun foydalanadigan vositalar va usullar ham. So'nggi paytlarda CSS-ga kiritilgan eng qiziqarli qo'shimchalardan biri bu Nisbiy Rang Sintaksisi. Ushbu kuchli xususiyat sizga ranglarni to'g'ridan-to'g'ri CSS ichida manipulyatsiya qilish, dinamik mavzular, nozik o'zgarishlar va qulay dizaynlarni katta qulaylik va moslashuvchanlik bilan yaratish imkonini beradi. Ushbu maqolada Nisbiy Rang Sintaksisining nozikliklari, HSL va Lab ranglar makoniga e'tibor qaratilgan holda va ulardan butun dunyo bo'ylab loyihalaringiz uchun qanday foydalanishingiz mumkinligi haqida so'z boradi.

CSS Nisbiy Rang Sintaksisi nima?

Nisbiy Rang Sintaksisidan oldin, CSS-da ranglarni manipulyatsiya qilish ko'pincha Sass yoki Less kabi preprotsessorlardan foydalanishni yoki JavaScript-ga tayanishni o'z ichiga olardi. Nisbiy Rang Sintaksisi mavjud ranglarni to'g'ridan-to'g'ri CSS qoidalaringiz ichida o'zgartirishga imkon berib, buni o'zgartiradi. U buni rangning alohida tarkibiy qismlariga (masalan, HSL-dagi tus, to'yinganlik va yorqinlik kabi) murojaat qilib va ularga matematik amallarni qo'llash orqali amalga oshiradi. Bu shuni anglatadiki, siz rangni uning joriy qiymatiga asoslanib yorqinlashtirishingiz, to'qartirishingiz, to'yintirishingiz, to'yinganligini kamaytirishingiz yoki tusini o'zgartirishingiz mumkin, bularning barchasi bir nechta rang o'zgarishlarini oldindan belgilashni talab qilmaydi.

Sintaksis color() funksiyasi atrofida qurilgan bo'lib, u sizga ranglar makonini (masalan, hsl, lab, lch, rgb, yoki oklab), o'zgartiriladigan asosiy rangni va kerakli tuzatishlarni ko'rsatishga imkon beradi. Masalan:

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

Ushbu parcha qizil rangni oladi, hsl ranglar makonidan foydalanadi va tusni 30 darajaga oshiradi. h, s, va l mos ravishda mavjud tus, to'yinganlik va yorqinlik qiymatlarini ifodalaydi. calc() funksiyasi matematik amallarni bajarish uchun juda muhimdir.

Nima uchun HSL va Lab?

Nisbiy Rang Sintaksisi turli ranglar makonlari bilan ishlasa-da, HSL va Lab ranglarni manipulyatsiya qilish va qulaylik uchun alohida afzalliklarni taqdim etadi. Keling, nima uchun ekanligini ko'rib chiqaylik:

HSL (Tus, To'yinganlik, Yorqinlik)

HSL - bu ranglarni inson idrokiga asoslangan holda intuitiv tarzda ifodalaydigan silindrsimon ranglar makoni. U uchta komponent bilan belgilanadi:

Tus: Rangning ranglar g'ildiragidagi o'rni (0-360 daraja). Qizil odatda 0 da, yashil 120 da va ko'k 240 da joylashgan.
To'yinganlik: Rangning intensivligi yoki sofligi (0-100%). 0% kulrang, 100% esa to'liq to'yingan.
Yorqinlik: Rangning idrok etiladigan yorqinligi (0-100%). 0% qora, 100% esa oq.

HSL-ning afzalliklari:

Intuitiv Manipulyatsiya: HSL ranglarni idrok sifatlariga asoslanib sozlashni osonlashtiradi. Yorqinlikni oshirish rangni yorqinroq qiladi, to'yinganlikni kamaytirish uni xiralashtiradi va tusni o'zgartirish rangni ranglar g'ildiragi bo'ylab siljitadi.
Ranglar sxemasini yaratish: HSL uyg'un ranglar sxemasini yaratish jarayonini soddalashtiradi. Siz osongina qo'shimcha ranglarni (tus + 180 daraja), o'xshash ranglarni (bir-biriga yaqin tuslar) yoki triad ranglarni (120 daraja oraliqdagi tuslar) yaratishingiz mumkin.
Dinamik Mavzulashtirish: HSL dinamik mavzulashtirish uchun idealdir. Siz asosiy rangni belgilashingiz va keyin Nisbiy Rang Sintaksisidan foydalanib yorug' va qorong'u rejimlar uchun turli xil o'zgarishlarni yaratishingiz mumkin.

Misol: Qorong'u Rejim Mavzusini Yaratish

Aytaylik, sizning brend rangingiz #007bff (yorqin ko'k). Siz HSL yordamida kam yorug'lik sharoitida ko'zga osonroq bo'lgan, ammo brendning mohiyatini saqlab qoladigan qorong'u rejim mavzusini yaratishingiz mumkin.

: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; /* To'q kulrang */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Brend rangining to'yinganligi biroz kamaytirilgan va yorqinlashtirilgan */
 }
}

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

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

Ushbu misolda biz foydalanuvchi qorong'u rang sxemasini afzal ko'rishini tekshiryapmiz. Agar shunday bo'lsa, biz Nisbiy Rang Sintaksisidan foydalanib, qorong'u fonga nisbatan yaxshiroq kontrast uchun brend rangini biroz to'yinganligini kamaytiramiz va yorqinlashtiramiz. Bu qorong'u rejimda foydalanuvchi tajribasini yaxshilash bilan birga brend identifikatorining izchilligini ta'minlaydi.

Lab (Yorqinlik, a, b)

Lab (yoki CIELAB) - bu idrok jihatidan bir xil bo'lishi uchun ishlab chiqilgan ranglar makoni. Bu shuni anglatadiki, rang qiymatlaridagi o'zgarish, boshlang'ich rangdan qat'i nazar, idrok etiladigan rang farqidagi o'xshash o'zgarishga mos keladi. U uchta komponent bilan belgilanadi:

L: Yorqinlik (0-100%). 0 - qora, 100 - oq.
a: Yashil-qizil o'q bo'ylab pozitsiya. Manfiy qiymatlar yashil, musbat qiymatlar esa qizil.
b: Moviy-sariq o'q bo'ylab pozitsiya. Manfiy qiymatlar moviy, musbat qiymatlar esa sariq.

Lab-ning afzalliklari:

Idrokiy bir xillik: Lab-ning idrokiy bir xilligi uni rang farqlarining aniqligi muhim bo'lgan vazifalar, masalan, ranglarni tuzatish va qulaylikni tekshirish uchun ideal qiladi.
Keng gamut: Lab RGB yoki HSL-ga qaraganda kengroq ranglar diapazonini ifodalay oladi.
Qulaylik: Lab ko'pincha matn va fon o'rtasida etarli rang kontrastini ta'minlash uchun qulaylik hisob-kitoblarida ishlatiladi. WCAG (Veb Kontenti Qulayligi Qo'llanmalari) Lab ranglar makoni bilan yaqin bog'liq bo'lgan nisbiy yorqinlikka asoslangan formuladan foydalanadi.

Misol: Qulaylik uchun rang kontrastini yaxshilash

Etarli rang kontrastini ta'minlash qulaylik uchun juda muhimdir. Aytaylik, sizda WCAG AA kontrast nisbati talabiga (4.5:1) to'liq javob bermaydigan matn rangi va fon rangi bor. Siz Lab yordamida matn rangining yorqinligini talabga javob berguncha sozlashingiz mumkin.

Eslatma: Nisbiy rang sintaksisi bilan CSS-da kontrast nisbatini to'g'ridan-to'g'ri manipulyatsiya qilish mumkin bo'lmasa-da, biz undan yorqinlikni sozlash uchun foydalanishimiz va keyin natijani tekshirish uchun kontrastni tekshirish vositasidan foydalanishimiz mumkin.

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

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

/*Misol: Bu aslida kontrast nisbatini to'g'ridan-to'g'ri hisoblamaydi.*/
/*Bu yorqinlikni sozlashning konseptual misolidir*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Matnni 10 birlikka yorqinlashtiring. Bu faqat matn rangining L qiymati 100 ga yaqin bo'lsa, ma'lum bir nuqtagacha ta'sir qiladi. To'qartirish uchun esa ayirish kerak bo'ladi*/

}

Ushbu misolda biz kontrastni yaxshilash uchun matn rangini yorqinlashtirishga harakat qilyapmiz. CSS-da kontrast nisbatini hisoblay olmaganimiz uchun, o'zgartirishdan keyin natijani tekshirishimiz va kerak bo'lganda takomillashtirishimiz kerak.

Oklab: Lab-ning takomillashtirilishi

Oklab - bu Lab-ning ba'zi idrok etilgan kamchiliklarini bartaraf etish uchun ishlab chiqilgan nisbatan yangi ranglar makoni. U yanada yaxshi idrokiy bir xillikka erishishni maqsad qiladi, bu rang qiymatlaridagi o'zgarishlar idrok etiladigan rangga qanday ta'sir qilishini bashorat qilishni osonlashtiradi. Ko'p hollarda, Oklab, ayniqsa to'yinganlik va yorqinlik bilan ishlaganda, Lab-ga qaraganda ranglarni sozlashning silliqroq va tabiiyroq usulini taklif etadi.

Oklab-ni nisbiy rang sintaksisi bilan ishlatish Lab-dan foydalanishga o'xshaydi. Siz shunchaki ranglar makoni sifatida oklab ni belgilaysiz:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Rangni 10% ga yorqinlashtirish*/
}

Amaliy misollar va qo'llash holatlari

HSL va Lab bilan Nisbiy Rang Sintaksisi veb-dizayn uchun keng imkoniyatlarni ochib beradi. Mana bir nechta amaliy misollar:

Rang palitralarini yaratish: Asosiy rangni yarating va keyin HSL yordamida qo'shimcha, o'xshash yoki triad ranglar palitrasini yarating.
Elementlarni ajratib ko'rsatish: Vizual qayta aloqani ta'minlash uchun sichqonchani olib borganda yoki fokuslanganda elementning fon rangini yorqinlashtiring yoki to'qartiring.
Nozik o'zgarishlarni yaratish: Chuqurlik va vizual qiziqish yaratish uchun tus yoki to'yinganlikka biroz o'zgarish qo'shing.
Dinamik Mavzulashtirish: Yorug' va qorong'u rejimlarni joriy qiling yoki foydalanuvchilarga veb-saytingizning ranglar sxemasini sozlashga ruxsat bering.
Qulaylikni yaxshilash: Ko'rish qobiliyati zaif foydalanuvchilar uchun etarli kontrastni ta'minlash uchun ranglarni sozlang.

Misol: HSL bilan rang palitrasini yaratish

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

Ushbu misol HSL yordamida bitta asosiy rangga asoslangan ranglar palitrasini qanday yaratishni ko'rsatadi. Siz ushbu kodni turli xil ranglar uyg'unligini yaratish va ularni o'zingizning dizayn ehtiyojlaringizga moslashtirish uchun osongina moslashtirishingiz mumkin.

Misol: Lab bilan hover effektini yaratish

.button {
 background-color: #4caf50; /* Yashil rang */
 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)); /* a va b ni biroz yorqinlashtirish va oshirish */
}

Bu yerda biz foydalanuvchi uchun nozik, ammo sezilarli vizual qayta aloqa yaratish uchun sichqonchani olib borganda rangni biroz yorqinlashtirish va qizil va sariq tomonga siljitish uchun Lab-dan foydalanyapmiz.

Brauzerlarga moslik va zaxira variantlari

Har qanday yangi CSS xususiyatida bo'lgani kabi, brauzerlarga moslik muhim ahamiyatga ega. Nisbiy Rang Sintaksisi Chrome, Firefox, Safari va Edge kabi ko'pgina zamonaviy brauzerlarda qo'llab-quvvatlanadi. Biroq, eski brauzerlar uni qo'llab-quvvatlamasligi mumkin.

Veb-saytingiz barcha brauzerlarda ishlashini ta'minlash uchun Nisbiy Rang Sintaksisini qo'llab-quvvatlamaydigan brauzerlar uchun zaxira variantlarini taqdim etish muhimdir. Buni CSS o'zgaruvchilari va @supports qoidasidan foydalanib amalga oshirishingiz mumkin.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Zaxira rang */
}

@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); /* Agar qo'llab-quvvatlansa, Nisbiy Rang Sintaksisidan foydalaning */
 }
}

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

Ushbu misolda biz zaxira rangni (#33b5e5) belgilaymiz va keyin brauzer Nisbiy Rang Sintaksisini qo'llab-quvvatlashini tekshirish uchun @supports qoidasidan foydalanamiz. Agar qo'llab-quvvatlasa, biz --highlight-color o'zgaruvchisini Nisbiy Rang Sintaksisi yordamida yaratilgan rang bilan yangilaymiz. Bu eski brauzerlardagi foydalanuvchilar, garchi u yangi brauzerlardagi kabi aynan bir xil rang bo'lmasa ham, ajratilgan elementni ko'rishini ta'minlaydi.

Qulaylik bo'yicha mulohazalar

Nisbiy Rang Sintaksisi vizual jozibador dizaynlarni yaratish uchun kuchli vosita bo'lishi mumkin bo'lsa-da, qulaylikni hisobga olish juda muhimdir. Siz yaratgan ranglar kombinatsiyalari ko'rish qobiliyati zaif foydalanuvchilar uchun etarli kontrastni ta'minlashiga ishonch hosil qiling. Rang kombinatsiyalaringiz WCAG AA yoki AAA kontrast nisbati talablariga javob berishini tekshirish uchun WebAIM Contrast Checker kabi vositalardan foydalaning.

Yodingizda tutingki, ranglarni idrok etish odamlar orasida sezilarli darajada farq qilishi mumkin. Veb-saytingizni osongina idrok eta olishlari va u bilan ishlashlari uchun dizaynlaringizni turli xil rang ajrata olmaslik yoki ko'rish qobiliyati zaifligi bo'lgan foydalanuvchilar bilan sinab ko'rishni o'ylab ko'ring.

Xulosa

CSS Nisbiy Rang Sintaksisi, ayniqsa HSL va Lab ranglar makonlari bilan birlashtirilganda, veb-dizaynerlar uchun o'yinni o'zgartiruvchi vositadir. U sizga dinamik mavzular, nozik o'zgarishlar va qulay dizaynlarni katta qulaylik va moslashuvchanlik bilan yaratish imkonini beradi. HSL va Lab tamoyillarini tushunib, eski brauzerlar uchun zaxira variantlarini taqdim etish orqali siz ushbu kuchli xususiyatdan foydalanib, butun dunyo bo'ylab foydalanuvchilar uchun vizual jihatdan ajoyib va inklyuziv tajribalarni yaratishingiz mumkin.

Nisbiy Rang Sintaksisining kuchini qabul qiling va veb-dizayn mahoratingizni keyingi bosqichga olib chiqing. Barcha uchun ham chiroyli, ham inklyuziv bo'lgan veb-saytlarni yaratish uchun turli xil ranglar makonlari, matematik amallar va qulaylik mulohazalari bilan tajriba qiling.

Qo'shimcha o'rganish uchun

CSS Nisbiy Rang Sintaksisini tushunish va undan foydalanish orqali siz global auditoriyaga xizmat qiladigan yanada dinamik, qulay va vizual jozibador veb-saytlarni yaratishingiz mumkin. Rang bilan dizayn yaratishda har doim qulaylik va foydalanuvchi tajribasini birinchi o'ringa qo'yishni unutmang.