CSS oklch(): ko'zga teng ravshanlik, P3 ekranlar va zamonaviy rang fazolari

Qisqacha: oklch(L C H) rangni uch son bilan yozadi: L — ravshanlik (0% qora, 100% oq), C — to'yinganlik (0 — kulrang), H — tus (0 dan 360 gradusgacha). Uning hsl() dan asosiy farqi: bir xil L ko'zga ham bir xil yorug' ko'rinadi. Bu format oddiy ekrandan kengroq, P3 ekranlar ko'rsata oladigan ranglarni ham yoza oladi. Ekran rangni ko'rsata olmasa, brauzer eng yaqin rangni tanlaydi. Barcha asosiy brauzerlar oklch() ni qo'llaydi (Baseline keng tarqalgan).

Bu darsda

• Nega hsl() dagi "bir xil yorug'lik" ko'zga bir xil ko'rinmasligini tushuntirasiz.
• oklch() ning uchta sonini o'qiysiz va o'zgartirasiz.
• «Bahor» palitrasini oklch() ga o'tkazasiz — rang o'zgarmagan holda.
• oklab(), lab(), lch() va color(display-p3 ...) ni farqlaysiz.
• Gamut nima ekanini, P3 ekran uchun @media (color-gamut: p3) va oklch.com vositasini bilasiz.

Oldin bilishingiz kerak: Ranglar 1, CSS o'zgaruvchilari 1, CSS o'zgaruvchilari 2.

1. Nega bu kerak?

Ranglar 1 darsida hsl() ni "inson uchun eng tushunarli klassik format" degan edik: tus, to'yinganlik, yorug'lik. Keling, uni sinaymiz. Oltita rang olamiz — tusi har xil, yorug'ligi bir xil, 50%. Ustiga «Bahor»ning matn rangida yozamiz:

<style>
  p {
    color: #1f2a24;
    font-family: system-ui, sans-serif;
    font-weight: bold;
  }
  span {
    padding: 8px;
  }
</style>
<p>
  <span style="background-color: hsl(0 100% 50%)">Aksiya</span>
  <span style="background-color: hsl(60 100% 50%)">Aksiya</span>
  <span style="background-color: hsl(120 100% 50%)">Aksiya</span>
  <span style="background-color: hsl(180 100% 50%)">Aksiya</span>
  <span style="background-color: hsl(240 100% 50%)">Aksiya</span>
  <span style="background-color: hsl(300 100% 50%)">Aksiya</span>
</p>
<p>
  <span style="background-color: oklch(70% 0.1 30)">Aksiya</span>
  <span style="background-color: oklch(70% 0.1 90)">Aksiya</span>
  <span style="background-color: oklch(70% 0.1 145)">Aksiya</span>
  <span style="background-color: oklch(70% 0.1 200)">Aksiya</span>
  <span style="background-color: oklch(70% 0.1 265)">Aksiya</span>
  <span style="background-color: oklch(70% 0.1 330)">Aksiya</span>
</p>

Nimaga qarang: birinchi qatorda sariq va moviy juda yorug', ko'k esa deyarli to'q. Ko'k ustidagi yozuvni o'qish qiyin. Hisobladik: matn kontrasti sariqda 13.8:1, ko'kda esa atigi 1.7:1. hsl "yorug'lik 50%" dedi, ko'z esa boshqacha ko'rdi. Ikkinchi qator — oklch() bilan, hammasida L = 70%. Oltita tus ham ko'zga bir xil yorug', kontrast 5.3:1 dan 5.8:1 gacha — hammasida o'qiladi.

(Bu natijada har bo'lak o'z style atributi bilan bo'yalgan — faqat taqqoslash uchun. «Bahor»da style atributi CSP bilan to'silgan, u yerda ranglar asosiy.css da yashaydi.)

Dizaynga bu nima beradi? "Aksiya belgilari har xil rangda, lekin bir xil og'irlikda ko'rinsin" degan talabni hsl bilan bajarish uchun har rangni ko'z bilan qo'lda to'g'rilaysiz. oklch da esa L ni bir xil qoldirasiz — tamom.

2. Ko'z qanday ko'radi

2.1 hsl — ekran uchun qulay, ko'z uchun emas

hsl() ekranning qizil, yashil va ko'k chiroqlari ustidagi oddiy hisob. Uning "yorug'ligi" — chiroqlar qancha kuch bilan yonishi. Ko'zimiz esa ranglarni teng sezmaydi: yashil va sariqni juda kuchli, ko'kni esa sust ko'radi. Sof sariq va sof ko'k chiroqlar bir xil kuchda yonsa ham, sariq ancha yorug' ko'rinadi.

Ovoz bilan solishtiring. Ikki kishi bir xil kuch bilan gapiryapti: birining ovozi ingichka, ikkinchisiniki yo'g'on. Ingichka ovoz baland eshitiladi — quloq uni ko'proq sezadi. Ko'z ham ranglarni shunday "eshitadi".

2.2 Idrokiy tekislik

Idrokiy tekislik (perceptual uniformity) — rang fazosining shunday xususiyati: son qancha o'zgarsa, ko'zga ham shuncha o'zgargandek ko'rinadi. L ni 10 ga oshirsangiz — qaysi tus bo'lmasin, rang ko'zga "bir qadam" yorug'lashadi.

oklch aynan shunday fazo. Uni 2020-yilda Björn Ottosson taklif qilgan Oklab fazosi asosida qurilgan. Nomidagi "ok" — shu fazo nomidan, "LCH" — uning uchta soni.

3. oklch(L C H) — uchta son

3.1 L — ravshanlik

L (lightness) — rang qanchalik yorug'. 0% — qora, 100% — oq. Foizsiz ham yoziladi: 0.475 = 47.5%.

3.2 C — to'yinganlik

C (chroma) — rang qanchalik "yorqin", kulrangdan qanchalik uzoq. 0 — sof kulrang. Oddiy ekrandagi eng to'yingan ranglar taxminan 0.3 atrofida: masalan, sof ko'k #0000ff — 0.313. Interfeys ranglari odatda 0.03 dan 0.2 gacha bo'ladi.

C ning qat'iy "eng katta" qiymati yo'q. Qaysi C ekranga sig'ishi tusga va ravshanlikka bog'liq — buni pastda, «Gamut» bo'limida ko'ramiz.

3.3 H — tus

H (hue) — rang doirasidagi burchak, 0 dan 360 gacha. Taxminan: 30 — qizil, 70 — to'q sariq, 110 — sariq, 145 — yashil, 195 — moviy, 265 — ko'k, 330 — pushti.

Diqqat: oklch va hsl dagi tus burchaklari bir xil emas. «Bahor» yashili hsl da 131 gradus, oklch da esa 147.7. Burchakni bir formatdan ikkinchisiga ko'chirmang — rangni vosita bilan o'giring (dars oxiridagi «Vositalar» bo'limi).

3.4 Shaffoflik

Xuddi rgb() va hsl() dagi kabi, to'rtinchi qiymat / dan keyin yoziladi: oklch(47.5% 0.1 147.7 / 50%) — yarim shaffof yashil.

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 14px;
  }
  span {
    padding: 8px 12px;
    color: #1f2a24;
  }
</style>
<p>L o'zgaradi (C 0.06, H 147.7):</p>
<p>
  <span style="background: oklch(30% 0.06 147.7);
    color: #fffaf0">30%</span>
  <span style="background: oklch(45% 0.06 147.7);
    color: #fffaf0">45%</span>
  <span style="background: oklch(60% 0.06 147.7)">60%</span>
  <span style="background: oklch(75% 0.06 147.7)">75%</span>
  <span style="background: oklch(90% 0.06 147.7)">90%</span>
</p>
<p>C o'zgaradi (L 60%, H 147.7):</p>
<p>
  <span style="background: oklch(60% 0 147.7)">0</span>
  <span style="background: oklch(60% 0.04 147.7)">0.04</span>
  <span style="background: oklch(60% 0.08 147.7)">0.08</span>
  <span style="background: oklch(60% 0.12 147.7)">0.12</span>
  <span style="background: oklch(60% 0.16 147.7)">0.16</span>
</p>

Nimaga qarang: birinchi qatorda — bitta yashilning qoraroqdan oqroqqa zinapoyasi, tusi o'zgarmaydi. Ikkinchi qatorda yorug'lik bir xil, faqat "rangdorlik" o'sadi: kulrangdan yorqin yashilga. background — background-color ning qisqa yozuvi, uni Fonlar darsida to'liq ko'ramiz.

Tekshirib ko'ring: oklch(80% 0 30) va oklch(80% 0 265) — bu ikki rangning farqi nima?

4. «Bahor» palitrasi oklch() da

4.1 Qiymatlar qanday hisoblandi

Rangni ko'z bilan "taxminan" ko'chirib bo'lmaydi — hisoblash kerak. Biz oltita hex rangni ikki mustaqil kutubxona (colorjs.io va culori) bilan oklch ga o'girdik. Ikkalasi bir xil natija berdi. So'ng qiymatlarni yaxlitladik: L — o'ndan bir foizgacha, C — mingdan birgacha, H — o'ndan bir gradusgacha. Yaxlitlangan rangni yana hex'ga qaytardik — oltitasida ham aynan asl hex chiqdi.

4.2 Ko'z bilan tekshiramiz

<style>
  p {
    display: flex;
    gap: 8px;
  }
  span {
    padding: 16px 72px;
    border: 1px solid #5b6660;
  }
</style>
<p>
  <span style="background: #2f6b3a"></span>
  <span style="background: oklch(47.5% 0.1 147.7)"></span>
</p>
<p>
  <span style="background: #1a5d1a"></span>
  <span style="background: oklch(42.1% 0.12 143.1)"></span>
</p>
<p>
  <span style="background: #b4461a"></span>
  <span style="background: oklch(53.7% 0.153 39.8)"></span>
</p>
<p>
  <span style="background: #fffaf0"></span>
  <span style="background: oklch(98.6% 0.014 84.6)"></span>
</p>
<p>
  <span style="background: #1f2a24"></span>
  <span style="background: oklch(27.2% 0.019 161)"></span>
</p>
<p>
  <span style="background: #5b6660"></span>
  <span style="background: oklch(49.9% 0.016 162)"></span>
</p>

Nimaga qarang: har qatorda chapdagi bo'lak — hex, o'ngdagisi — oklch. Juftlar bir-biridan farq qilmaydi. Chrome'da tekshirdik: skrinshotdagi har juftning piksellari aynan bir xil. Bo'laklarni yonma-yon qo'yish uchun display: flex ishlatildi — uni Flexbox darsida o'rganamiz, hozir natijaga qarash yetarli.

4.3 Yangi :root

/* «Bahor» palitrasi — oklch */
:root {
  --rang-asosiy: oklch(47.5% 0.1 147.7);
  --rang-asosiy-toq: oklch(42.1% 0.12 143.1);
  --rang-urgu: oklch(53.7% 0.153 39.8);
  --rang-fon: oklch(98.6% 0.014 84.6);
  --rang-matn: oklch(27.2% 0.019 161);
  --rang-ikkinchi: oklch(49.9% 0.016 162);
}

Qolgan asosiy.css ga tegmaymiz. CSS o'zgaruvchilari darsining foydasi shu: qoidalar nomni o'qiydi, qiymatning formati ular uchun ahamiyatsiz.

4.4 oklch palitra haqida nimani aytadi

Hex kodlarga qarab palitra haqida hech narsa bilib bo'lmasdi. oklch esa darhol ko'rsatadi:

• Yashillar bir oila. --rang-asosiy va --rang-asosiy-toq ning tusi 143–148 atrofida. --rang-matn va --rang-ikkinchi ham 161–162 da — ular sof kulrang emas, juda oz yashil tovlanadigan kulrang (C atigi 0.016–0.019). Shuning uchun palitra bir-biriga "mos" ko'rinadi.
• Fon iliq. --rang-fon ning tusi 84.6 — sariqqa yaqin, C kichik. Bu qaymoq rang.
• Kontrastni oldindan sezish mumkin. Fonning L i 98.6%. --rang-asosiy (47.5%) va --rang-ikkinchi (49.9%) L bo'yicha deyarli teng — kontrasti ham yaqin: 6.1:1 va 5.7:1. Eng to'q --rang-matn (27.2%) — eng yuqori kontrast, 14.3:1.

Maslahat: L ning farqi kontrastni taxmin qilishga yordam beradi, lekin u WCAG kontrast formulasi emas. Yakuniy tekshiruvni baribir kontrast o'lchagich bilan qiling — DevTools rang tanlagichi uni ko'rsatadi (DevTools'da CSS).

5. Bitta rangdan butun oila

oklch ning eng amaliy foydasi: bitta rangning ochroq va to'qroq variantlarini faqat L ni o'zgartirib yasash mumkin. Tus joyida qoladi:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 14px;
  }
  span {
    padding: 10px 12px;
  }
</style>
<p>
  <span style="background: oklch(30% 0.06 147.7); color: #fffaf0">
    30%</span>
  <span style="background: oklch(47.5% 0.1 147.7); color: #fffaf0">
    47.5%</span>
  <span style="background: oklch(70% 0.1 147.7)">70%</span>
  <span style="background: oklch(90% 0.06 147.7)">90%</span>
  <span style="background: oklch(95% 0.03 147.7)">95%</span>
</p>

Nimaga qarang: beshta bo'lak — bitta «Bahor» yashilining oilasi. O'rtadagisi — --rang-asosiy ning o'zi. Juda to'q va juda och variantlarda C kamaytirildi: bunday ravshanlikda yuqori C ekranga sig'maydi. Hover rangi, och fon, chegara — hammasi shu oiladan olinadi. Buni bitta o'zgaruvchidan avtomatik hisoblashni Ranglar 3 darsida, to'liq palitra (50 dan 950 gacha) qurishni esa Palitra qurish darsida o'rganamiz.

6. Boshqa zamonaviy rang yozuvlari

oklch yolg'iz emas. Zamonaviy CSS'da rangning yana bir necha yozuvi bor:

oklab va oklch — bitta fazoning ikki xil yozuvi. oklch inson uchun qulay: "tus" va "to'yinganlik" deb o'ylaymiz. oklab esa hisob uchun qulay: ikki rang orasidagi to'g'ri chiziq bo'ylab o'tish mumkin. Bu farq Ranglar 3 darsida, ranglarni aralashtirganda ko'rinadi.

lab va lch — 1976-yilgi CIE Lab fazosi. CIE — yorug'lik va rang bo'yicha xalqaro komissiya, uning nomini bilish shart emas. Bu fazo ham "ko'zga teng" bo'lishga harakat qilgan, lekin ko'k tuslarda xato beradi: ko'kni ochartirsangiz, u binafshaga og'ib ketadi. "Ok" fazosi aynan shu xatolarni tuzatish uchun yaratilgan. Yangi kodda oklch ni tanlang.

Barcha bu yozuvlar — oklch, oklab, lab, lch, color() — Baseline ma'lumotiga ko'ra keng tarqalgan: hamma asosiy brauzer ularni 2023-yildan beri qo'llaydi.

7. Gamut: ekran qancha rang ko'rsata oladi

7.1 sRGB va P3

Gamut (rang qamrovi) — ekran ko'rsata oladigan ranglar to'plami. Rangli qalamlar qutisini tasavvur qiling: 12 talik qutida 24 talikdagi ba'zi ranglar yo'q. Ekranlar ham shunday.

• sRGB — 1990-yillardan beri standart. Hex, rgb() va hsl() faqat shu qutidagi ranglarni yoza oladi. Har qanday ekran uni ko'rsatadi.
• Display P3 — kengroq quti, ayniqsa yashil va qizil tomonda. Ko'plab zamonaviy telefonlar va noutbuklarning ekrani P3 ranglarni ko'rsata oladi.

Qutilar bir-birining ichida turadi — kichigi kattasining ichida:

flowchart TB
  subgraph P["Display P3 — zamonaviy telefon ekrani"]
    subgraph S["sRGB — har qanday ekran"]
      H["hex, rgb(), hsl()"]
    end
    Y["oklch(65% 0.22 145)<br/>juda yorqin yashil"]
  end

Nimaga qarang: hex bilan yozilgan har rang sRGB qutisida. Yorqin yashil esa sRGB dan tashqarida, lekin P3 ichida — uni faqat P3 ekran to'liq ko'rsatadi.

oklch hech qanday qutiga bog'lanmagan: u istalgan rangni yoza oladi, hatto P3 dan ham tashqaridagisini. Shuning uchun katta C bilan ehtiyot bo'lish kerak.

7.2 Ekran rangni ko'rsata olmasa

oklch(65% 0.22 145) — juda yorqin yashil. Hisobladik: u sRGB qutisiga sig'maydi, lekin P3 ga sig'adi. Oddiy ekranda brauzer eng yaqin ko'rsatsa bo'ladigan rangni tanlaydi. Bu jarayon gamut mapping ("qutiga moslash") deyiladi.

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 14px;
    padding: 24px 0;
  }
  span {
    padding: 24px 16px;
    color: #1f2a24;
  }
</style>
<p>
  <span style="background: oklch(65% 0.22 145)">oklch — P3</span>
  <span style="background: #00af1f">#00af1f — sRGB</span>
</p>

Nimaga qarang: oddiy ekranda ikkala bo'lak bir xil ko'rinadi — #00af1f sRGB qutisidagi eng yaqin rang. Chrome'da tekshirdik: oddiy sRGB rejimdagi skrinshotda ikkala bo'lakning piksellari aynan #00af1f. P3 ekranli telefonda oching: chap bo'lak sezilarli darajada yorqinroq.

Standart eng yaqin rangni oklch ning o'zida, to'yinganlikni kamaytirib topishni tavsiya qiladi. Brauzerlar buni o'zicha bajaradi, shuning uchun sRGB ekranda natija brauzerlar orasida biroz farq qilishi mumkin. Muhim rang (brend, matn) uchun buni hisobga oling: uni sRGB qutisi ichida tanlang.

7.3 @media (color-gamut: p3)

Ba'zan dizayner ataylab ikki variant beradi: oddiy ekran uchun bittasi, P3 uchun yorqinrog'i. Buning uchun @media qoidasi bor — ichidagi qoidalar faqat shart bajarilganda ishlaydi. @media ni Media queries darsida to'liq o'rganamiz. Favicon darsida @media (prefers-color-scheme: dark) ni ko'rgansiz — sintaksisi xuddi shunday.

:root {
  --rang-urgu: oklch(53.7% 0.153 39.8);
}

@media (color-gamut: p3) {
  :root {
    --rang-urgu: oklch(55% 0.19 39.8);
  }
}

P3 ekranda narxlar biroz yorqinroq qizg'ish bo'ladi. Ikkinchi qiymat sRGB ga sig'maydi, lekin P3 ga sig'adi — hisobladik. Uning qaymoq fondagi kontrasti 5.1:1, ya'ni u ham talabdan yuqori. color-gamut ning qiymatlari: srgb, p3 va undan ham keng rec2020. Baseline ma'lumotiga ko'ra u ham keng tarqalgan.

Halol aytaylik: bu @media shart emas. oklch bilan yozilgan yorqin rangni brauzer o'zi ham oddiy ekranga moslaydi. @media faqat oddiy ekrandagi rangni ham o'zingiz nazorat qilmoqchi bo'lsangiz kerak. «Bahor»da biz asl rangda qolamiz — brend rangi hamma ekranda bir xil bo'lsin.

Tekshirib ko'ring: Nega #b4461a ni P3 ekranda yorqinroq qilib bo'lmaydi, oklch(53.7% 0.153 39.8) ni esa C ni oshirib bo'ladi?

8. Eski brauzerlar uchun zaxira

oklch ni hamma asosiy brauzer qo'llaydi: Baseline ma'lumotiga ko'ra Chrome 111, Firefox 113 va Safari 15.4 dan beri. Undan eski brauzerda CSS nima darsidagi usul ishlaydi — avval hex, keyin oklch:

h1 {
  color: #2f6b3a;
  color: oklch(47.5% 0.1 147.7);
}

Eski brauzer ikkinchi qatorni tushunmaydi va tashlab ketadi — birinchisi qoladi.

Lekin o'zgaruvchi bilan bu usul ishlamaydi. --rang-asosiy: oklch(...) ni eski brauzer ham qabul qiladi: maxsus xususiyatga istalgan matn yozsa bo'ladi. color: var(--rang-asosiy) esa hisoblashda yaroqsiz chiqadi va color otasidan olinadi — CSS o'zgaruvchilari 2 darsidagi holat. Oldingi hex qatori qutqarmaydi. Bunday holat uchun @supports qoidasi bor (Brauzer mosligi darsida). «Bahor» uchun esa zaxira shart emas: oklch allaqachon keng tarqalgan.

9. Vositalar

9.1 oklch.com

oklch.com — Evil Martians jamoasi yasagan bepul vosita. Unda:

• L, C, H va shaffoflik uchun slayderlar;
• rang qaysi qutiga — sRGB, P3 yoki Rec2020 — sig'ishini ko'rsatadigan grafiklar;
• hex, rgb yoki hsl ni joylab, oklch ga o'girish;
• rang sRGB dan chiqsa — unga eng yaqin sRGB zaxira.

Brend rangini tanlashda yoki palitra oilasini qurishda shu sayt bilan ishlang.

9.2 DevTools rang tanlagichi

DevTools'da CSS darsidagi rang tanlagichni eslang: Styles panelida rang yonidagi kichik kvadratni bosasiz. Chrome'ning yangi versiyalarida u yerda formatni almashtirish mumkin, jumladan oklch ga ham.

10. Ko'p uchraydigan xatolar

10.1 L foizsiz, lekin 0–100 shkalada

oklch(47.5 0.1 147.7) — % unutilgan. Foizsiz L — 0 dan 1 gacha son, shuning uchun 47.5 "1 dan katta" deb 1 ga kesiladi. Chrome'da tekshirdik: hisoblangan qiymat oklch(1 0.1 147.7) — yashil o'rniga deyarli oq. Tuzatish: 47.5% yoki 0.475.

10.2 Vergul bilan yozish

oklch(47.5%, 0.1, 147.7) — rgb() va hsl() ning eski vergulli yozuvi oklch da yo'q. Chrome'da tekshirdik: deklaratsiya tashlandi. Tuzatish: sonlar faqat bo'sh joy bilan.

10.3 C ni foizda yozish

oklch(47.5% 25% 147.7) — xato emas, lekin kutilmagan natija: C da 100% = 0.4. Demak 25% = 0.1. Tuzatish: C ni son bilan yozing — o'qish osonroq.

10.4 Tusni hsl dan ko'chirish

hsl(131 39% 30%) dan oklch(47.5% 0.1 131) yasaldi — rang «Bahor» yashilidan boshqacha chiqadi, chunki burchaklar har xil. Tuzatish: oklch.com yoki DevTools bilan o'giring («Vositalar» bo'limi).

10.5 Juda katta C

oklch(70% 0.3 145) — P3 ga ham sig'maydi. Har ekranda har xil ko'rinadi. Tuzatish: oklch.com'da rang qaysi qutida ekanini tekshiring.

11. Mashqlar

1-mashq (oson): oklch ni o'qing

Uchta rang berilgan: A — oklch(85% 0.04 147.7), B — oklch(40% 0.15 30), C — oklch(60% 0 0).

• Eng yorug'i —
• Kulrang —
• Eng to'yingani —
• Qaysi biri qizilga yaqin tusda? —

2-mashq (o'rta): «Bahor» uchun kulranglar shkalasi

«Bahor» ning matn ranglari juda oz yashil tovlanadi (H ≈ 162). Shu tusda oltita kulrang yasang: L — 25, 40, 55, 70, 85 va 95%, C — 0.01. Qaysilari qaymoq fonda matn uchun yaraydi (kontrast ≥ 4.5)?

Ishora: faqat L o'zgaradi. Kontrastni L bo'yicha taxmin qiling — «oklch palitra haqida nimani aytadi» bo'limini eslang: --rang-ikkinchi (L 49.9%) 5.7:1 bergan edi.

<style>
  p {
    background: oklch(98.6% 0.014 84.6);
    font-family: system-ui, sans-serif;
    font-weight: bold;
    padding: 8px;
  }
  span {
    padding: 4px 8px;
  }
</style>
<p>
  <span style="color: oklch(25% 0.01 162)">25%</span>
  <span style="color: oklch(40% 0.01 162)">40%</span>
  <span style="color: oklch(55% 0.01 162)">55%</span>
  <span style="color: oklch(70% 0.01 162)">70%</span>
  <span style="color: oklch(85% 0.01 162)">85%</span>
  <span style="color: oklch(95% 0.01 162)">95%</span>
</p>

3-mashq (qiyin): Bir xil og'irlikdagi teglar

Menyuda uchta teg bor: "Yangi" — sariq hsl(50 90% 50%), "Parhez" — yashil hsl(140 60% 40%), "Sovuq ichimlik" — ko'k hsl(220 80% 55%). Hammasida oq matn. Mehmonlar sariq tegni o'qiy olmayapti.

1. Nega sariqda oq matn o'qilmaydi, ko'kda esa o'qiladi?
2. Uchala tegni oklch bilan qayta yozing: tuslar taxminan o'sha (90, 145, 250), L va C bir xil. Matn — --rang-matn. Uchalasi ham ko'zga bir xil og'irlikda ko'rinsin va kontrast ≥ 4.5 bo'lsin.

Ishora: dars boshidagi natijaning ikkinchi qatorini — oklch bilan bo'yalgan "Aksiya"larni eslang. Yorug' fon + to'q matn, L ≈ 75%, C ≈ 0.12.

<style>
  :root {
    --rang-matn: oklch(27.2% 0.019 161);
  }
  p {
    font-family: system-ui, sans-serif;
    font-weight: bold;
  }
  span {
    color: var(--rang-matn);
    padding: 4px 10px;
  }
</style>
<p>
  <span style="background: oklch(75% 0.12 90)">Yangi</span>
  <span style="background: oklch(75% 0.12 145)">Parhez</span>
  <span style="background: oklch(75% 0.12 250)">Sovuq ichimlik</span>
</p>

4-mashq: Portfolio qadami — palitra oklch() ga

Portfolio'dagi :root blokini oklch ga o'tkazing. Qiymatlarni biz hisobladik (yaxlitlangan qiymat asl hex'ni aynan qaytaradi):

1. Qiymatlarni almashtiring. Qoidalarga tegmang.
2. Sahifani oching: hech narsa o'zgarmagan bo'lishi kerak.
3. O'zingiz boshqa brend rangi tanlagan bo'lsangiz — oklch.com'da uni o'giring.
4. Jadvaldagi L qiymatlariga qarab ayting: nega --rang-asosiy va --rang-ikkinchi fonda deyarli bir xil kontrast beradi?

/* Portfolio palitrasi — oklch */
:root {
  --rang-matn: oklch(27.2% 0.019 161);
  --rang-fon: oklch(98.2% 0.004 157.2);
  --rang-asosiy: oklch(48.4% 0.097 158.9);
  --rang-ikkinchi: oklch(49.9% 0.016 162);
  --rang-chegara: oklch(86.4% 0.017 162.7);
  --rang-fon-och: oklch(95% 0.012 162);
}

12. Real ishda

• Tailwind v4 (tayyor class'lar to'plami, kursda alohida o'rganamiz) o'zining ranglar palitrasini oklch da beradi. Katta dizayn tizimlari ham shu formatga o'tmoqda.
• Dizaynerlar Figma'dan P3 ranglar bera boshladi. Ularni kodda to'g'ri yozish uchun oklch yoki color(display-p3 ...) kerak.
• Palitra qurish — dizayn tizimining asosiy ishi. oklch da bu formula bilan qilinadi: L zinapoyasi, C va H — izchil (Palitra qurish).
• Intervyuda so'raladi: "oklch ning hsl dan afzalligi nima?", "Gamut nima?", "P3 rangni oddiy ekran qanday ko'rsatadi?".

Xulosa

• hsl ning yorug'ligi ekran uchun hisob, ko'z uchun emas: sariq va ko'k bir xil L da juda farq qiladi.
• oklch(L C H): L — ravshanlik, C — to'yinganlik, H — tus; bir xil L ko'zga ham bir xil yorug'.
• «Bahor» palitrasi oklch da hisoblangan va aynan o'sha ranglarni beradi.
• oklab — aralashtirish uchun, lab/lch — eski, color(display-p3 ...) — P3 kanallari.
• Gamut — ekran ko'rsata oladigan ranglar; sig'maganini brauzer eng yaqin rangga moslaydi.
• oklch Baseline keng tarqalgan. Lekin o'zgaruvchi ichida "avval hex, keyin oklch" zaxirasi ishlamaydi — buni unutmang.

Keyingi dars: Ranglar 3 — color-mix(), nisbiy ranglar va light-dark() bilan bitta asosiy rangdan hover, och fon va qorong'i rejim variantlarini CSS'ning o'zida hisoblaymiz.

Manbalar

• MDN: "oklch()", "oklab()", "lch()", "color()", "@media color-gamut" — developer.mozilla.org
• W3C: "CSS Color Module Level 4" (Oklab, OkLCh, gamut mapping bo'limlari) — w3.org/TR/css-color-4
• Björn Ottosson: "A perceptual color space for image processing" (Oklab, 2020) — bottosson.github.io
• Evil Martians: oklch.com — rang tanlagich va o'giruvchi
• web-features (Baseline ma'lumotlari): "oklab", "lab", "color-function", "color-gamut" — github.com/web-platform-dx/web-features