Rang nazariyasi amalda: palitra qurish oklch bilan

Qisqacha: Palitra — bitta brend rangidan qurilgan tizim: shu rangning 50 dan 950 gacha 11 qadamli shkalasi, unga mos neytral kulranglar va semantik ranglar (muvaffaqiyat, xato, ogohlantirish, ma'lumot). Shkala oklch() da quriladi: ravshanlik (L) zinapoya bo'lib tushadi, tus (H) o'zgarmaydi, to'yinganlik (C) chetlarda kamayadi. Har qadamning kontrasti formula bilan tekshiriladi. Rang hech qachon yagona signal bo'lmaydi — taxminan har 12 erkakdan biri ranglarni boshqacha ko'radi.

Bu darsda

• Rang g'ildiragi va uyg'unliklarni (komplementar, analog, uchlik) oklch tusi orqali tushuntirasiz.
• 60-30-10 qoidasini sahifadagi rang ulushiga qo'llaysiz.
• Bitta brend rangidan 11 qadamli shkala qurib, har qadamning vazifasini aniqlaysiz.
• Iliq va sovuq neytral kulranglar, semantik va holat ranglarini tanlaysiz.
• Palitrani rang ko'rligi simulyatsiyasi bilan tekshirasiz va palitra vositalarini bilasiz.

Oldin bilishingiz kerak: Ranglar 2: oklch, Ranglar 3: color-mix va nisbiy ranglar, Vizual ierarxiya, Dizayn tokenlari.

1. Nega bu kerak?

«Bahor» palitrasida hozir 12 ta primitiv rang bor (Qorong'i rejim). Ular 04-qismdagi hex kodlardan kelgan: favicon yashili, fokus halqasi, narx rangi. Hozircha yetarli edi.

Endi bron formasiga xato xabari kerak. Stajyor #e53935 yozdi — internetda ko'rgan "chiroyli qizil". Ertasiga muvaffaqiyat xabari uchun #43a047, ogohlantirish uchun #ffb300. Uch hafta o'tib CSS'da 23 xil rang bor, ularning yarmi fonga nisbatan o'qilmaydi. Sariq ogohlantirish qaymoq fonda umuman ko'rinmaydi.

Spacing tizimi darsida masofani shkalaga bo'ysundirdik. Rang bilan ham xuddi shunday: tasodifiy hex o'rniga qoidadan chiqqan ranglar. Ranglar 2 darsida "to'liq palitra qurishni keyin o'rganamiz" degan edik — mana o'sha payt.

Rassomning palitrasini eslang. Unda yuzlab bo'yoq yo'q — 5–6 ta asosiy rang va ularni oq yoki qora bilan aralashtirish usuli. Ko'rinadigan har rang shu oz sonli asosdan tug'iladi. Veb-palitra ham shunday: bitta-ikkita tus va ularning ravshanlik zinapoyasi.

2. Rang g'ildiragi va uyg'unliklar

2.1 Tus — aylana

oklch() dagi uchinchi son — tus (hue), 0 dan 360 gacha burchak (Ranglar 2). Barcha tuslarni doira bo'ylab joylashtirsangiz, rang g'ildiragi (color wheel) hosil bo'ladi: qizil, sariq, yashil, ko'k, binafsha va yana qizil.

Uyg'unlik (harmony) — g'ildirakda ma'lum burchak ostida turgan ranglar birga yoqimli ko'rinadi degan kuzatish:

«Bahor» urg'u rangining tusi — 39.8. U yashildan 108° uzoqda — uchlikka yaqin. 04-qismda bu ranglarni hech kim g'ildirak bo'yicha tanlamagan, lekin ular bir-biriga mos kelishi tasodif emas.

Ranglar 3 darsida va'da qilingan nisbiy rang aynan shu hisobni CSS'ning o'ziga topshiradi:

:root {
  --rang-komplement:
    oklch(from var(--rang-asosiy) l c calc(h + 180));
}

from — "shu rangdan boshla", l c — ravshanlik va to'yinganlik o'zgarmaydi, tus 180° ga buriladi. --rang-komplement — faqat namuna nomi, «Bahor» tokenlariga qo'shilmaydi.

<style>
  body { font-family: system-ui, sans-serif; }
  .gildirak {
    width: 9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(in oklch longer hue,
      oklch(70% 0.12 0), oklch(70% 0.12 0));
    mask: radial-gradient(circle, transparent 45%, black 46%);
  }
  .ranglar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .ranglar p {
    width: 6.5rem;
    margin: 0;
    padding: 2.5rem 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
  }
</style>
<div class="gildirak" aria-hidden="true"></div>
<div class="ranglar">
  <p style="background: oklch(47.5% 0.1 147.7)">Asosiy 147.7</p>
  <p style="background: oklch(47.5% 0.1 327.7)">Komplement</p>
  <p style="background: oklch(47.5% 0.1 117.7)">Analog −30</p>
  <p style="background: oklch(47.5% 0.1 27.7)">Uchlik +240</p>
  <p style="background: oklch(47.5% 0.1 267.7)">Uchlik +120</p>
</div>

Nimaga qarang: g'ildirak tepadan soat mili bo'yicha qizil, sariq, yashil, ko'k, binafsha tuslardan o'tadi. Pastdagi beshta kartochkada L va C bir xil (47.5% va 0.1), faqat tus farq qiladi. Shuning uchun ularning hammasi bir xil "og'irlikda" ko'rinadi va oq matn hammasida o'qiladi. Formula bilan hisobladik (colorjs.io): qaymoq fonda beshtasining kontrasti 6.1 dan 6.8 gacha. Natijadagi style atributi — faqat namoyish, «Bahor»da taqiqlangan (CSS nima).

in oklch longer hue — gradient tusni uzun yo'l bilan aylantiradi: boshi va oxiri bir xil rang bo'lsa, to'liq doira chiqadi (Gradientlar).

2.2 Uyg'unlik — qoida emas, boshlanish nuqtasi

Uyg'unlik jadvallari foydali, lekin ular ranglar qaysi ulushda turishini aytmaydi. Komplementar yashil va pushtini teng ulushda ishlatsangiz, sahifa "qichqiradi". Interfeysda amalda ko'pincha bitta brend tusi, neytral kulranglar va bitta urg'u rangi yetadi.

3. 60-30-10

60-30-10 — interyer dizaynidan kelgan tajriba qoidasi: xonaning 60 foizi asosiy (neytral) rangda, 30 foizi ikkinchi rangda, 10 foizi urg'u rangida. Bu ilmiy qonun emas va biror tadqiqotga tayanmaydi — dizaynerlar orasida tarqalgan "boshlash uchun yaxshi nisbat".

Veb-sahifada:

• 60% — fon va yuzalar: «Bahor»da qaymoq va oq kartalar.
• 30% — brend rangi va matn: sarlavhalar, header, footer, yashil tugma.
• 10% — urg'u: narxlar, aksiya, bitta muhim belgi.

<style>
  body { margin: 0; font-family: system-ui, sans-serif; }
  .sahifa { background: #fffaf0; color: #1f2a24; }
  .sahifa header {
    padding: 0.75rem 1rem;
    background: #2f6b3a;
    color: #fffaf0;
    font-weight: 700;
  }
  .sahifa main { padding: 1rem; }
  .sahifa h2 { margin: 0 0 0.5rem; color: #2f6b3a; }
  .taom-karta {
    margin-block-end: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: white;
  }
  .narx { color: #b4461a; font-weight: 700; }
</style>
<div class="sahifa">
  <header>Choyxona «Bahor»</header>
  <main>
    <h2>Issiq taomlar</h2>
    <p class="taom-karta">Osh —
      <span class="narx">35 000 so'm</span></p>
    <p class="taom-karta">Manti —
      <span class="narx">30 000 so'm</span></p>
  </main>
</div>

Nimaga qarang: ekranning katta qismi — qaymoq fon va oq kartalar. Yashil — header va sarlavhada, ko'zni yo'naltiradi. Qizg'ish esa faqat narxlarda: u kam bo'lgani uchun darhol ko'zga tashlanadi. Urg'u rangini 30% ga ko'tarsangiz, narxlar endi "maxsus" ko'rinmaydi — Vizual ierarxiya darsidagi "hamma narsa baqirsa" holati.

4. Shkala qurish: 50 dan 950 gacha

4.1 Nega 11 qadam?

Bitta brend rangi hamma vazifaga yetmaydi. Unga oila kerak: och fon (tanlangan qator, xabar foni), chegara, hover holati, to'q matn. Zamonaviy tizimlar oilani raqamlar bilan nomlaydi: 50, 100, 200 … 900, 950. Kichik son — och, katta son — to'q. Tailwind CSS palitrasi aynan shunday, «Bahor» tokenlari (Dizayn tokenlari) ham shu nomlashda: --yashil-200, --yashil-600.

Nega oklch? hsl() dagi ravshanlik ko'zga mos emas. hsl(60 100% 50%) (sariq) va hsl(240 100% 50%) (ko'k) — ikkalasida L = 50%. Lekin oq fonda sariqning kontrasti 1.07:1, ko'kniki — 8.59:1 (hisobladik). oklch da esa ularning L i 96.8% va 45.2% — haqiqatga yaqin (Ranglar 2). Shuning uchun oklch da "L ni 10% tushirish" har tusda taxminan bir xil to'qlashtiradi.

4.2 Formula

Shkalani uch qoida bilan quramiz:

1. Tus (H) o'zgarmaydi — «Bahor» yashili uchun 147.7.
2. Ravshanlik (L) — zinapoya: 97, 94, 88, 80, 70, 59, 47.5, 42, 35, 28, 21. Och tomonda qadamlar mayda (fonlar orasidagi nozik farq kerak), o'rtada yirik.
3. To'yinganlik (C) — o'rtada brend qiymati 0.1-bob, chetlarda kamayadi. Juda och va juda to'q rangda yuqori C ekranga sig'maydi (Ranglar 2 darsidagi gamut) va "zaharli" ko'rinadi. Biz 50 da 0.02, 100 da 0.04, 200 da 0.08, 800 da 0.085, 900 da 0.06, 950 da 0.045 oldik.

Har qiymatni colorjs.io bilan tekshirdik: 11 rangning hammasi sRGB ichida, ya'ni har qanday ekranda aynan shunday chiziladi.

Qiziq natija: formula 600-qadamda aynan #2f6b3a ni berdi — «Bahor»ning 04-qismdagi favicon rangi. 200 va 300 ham kanonik tokenlarga juda yaqin (#b2e7bd va #8fd19e). Kanonik tokenlar o'zgarmaydi — ular brendning tarixiy qarorlari. Formula esa yetishmayotgan qadamlarni (50, 100, 400, 500, 800, 950) shu oilaga mos to'ldiradi.

<style>
  body { font-family: system-ui, sans-serif; }
  .shkala {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: 0.25rem;
  }
  .shkala p {
    margin: 0;
    padding: 1.75rem 0.375rem 0.375rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #1f2a24;
  }
  .shkala p:nth-child(n + 7) { color: #fffaf0; }
</style>
<div class="shkala">
  <p style="background: oklch(97% 0.02 147.7)">50</p>
  <p style="background: oklch(94% 0.04 147.7)">100</p>
  <p style="background: oklch(88% 0.08 147.7)">200</p>
  <p style="background: oklch(80% 0.1 147.7)">300</p>
  <p style="background: oklch(70% 0.1 147.7)">400</p>
  <p style="background: oklch(59% 0.1 147.7)">500</p>
  <p style="background: oklch(47.5% 0.1 147.7)">600</p>
  <p style="background: oklch(42% 0.1 147.7)">700</p>
  <p style="background: oklch(35% 0.085 147.7)">800</p>
  <p style="background: oklch(28% 0.06 147.7)">900</p>
  <p style="background: oklch(21% 0.045 147.7)">950</p>
</div>

Nimaga qarang: zinapoya bir tekis — qo'shni kartochkalar bir-biridan taxminan bir xil "qadam" bilan farq qiladi, hech biri "sakrab" ketmaydi. Eng och ikkitasi (50 va 100) deyarli oq, eng to'q ikkitasi deyarli qora-yashil. O'rtadagi 500 yozuvi ataylab qoldirildi: bu qadamda to'q matn ham, och matn ham 3.8:1 beradi — oddiy matn uchun o'rtadagi qadam yaramaydi.

4.3 Qadamlarning vazifasi

Raqam — nom, vazifa esa kontrastdan chiqadi. Qaymoq fonda (formula bilan):

• 50–200 — fonlar: tanlangan qator, xabar foni, hover foni. Matn ularning ustida turadi.
• 300–400 — chegaralar, bezak, qorong'i rejimdagi matn va tugmalar (to'q fonda 300 — 7.9:1).
• 500 — faqat yirik elementlar: 3:1 talab qilinadigan ikonka yoki qalin chegara (Chegara va soyalar).
• 600–700 — matn, havola, to'liq rangli tugma foni (qaymoq matn bilan 6.1 va 7.8).
• 800–950 — to'q fonlar va qorong'i rejim yuzalari.

Bu taqsimot Radix Colors tizimiga o'xshaydi. U 12 qadamli shkalaning har qadamiga vazifa yozadi: 1–2 — ilova foni, 3–5 — element foni va uning hover/tanlangan holati, 6–8 — chegaralar, 9–10 — to'liq rangli fon, 11–12 — matn.

Tailwind'ning o'z palitrasi ham oklch da (v4.3 ning theme.css faylida o'qidik): masalan --color-green-600: oklch(62.7% 0.194 149.214). Uning 600-qadami «Bahor»nikidan ancha och: oq fonda 3.3:1 — oddiy matn uchun yetmaydi, 700 esa 5.0:1. Tayyor palitradan olganda raqamga emas, kontrastga qarang.

Tekshirib ko'ring: «Bahor» shkalasida qorong'i rejim fonini --yashil-900 deb oldik. Qaysi qadamlar bu fonda oddiy matn uchun yaraydi?

5. Neytral kulranglar

5.1 Sof kulrang emas

Interfeysning katta qismi — matn, chegaralar, fonlar — kulrang. Sof kulrang (C = 0) brend rangi yonida sovuq va "begona" ko'rinadi. Shuning uchun dizayn tizimlari kulranglarga brend tusidan ozgina qo'shadi: C = 0.005–0.02. Bu tuslangan neytral (tinted neutral).

«Bahor» kulranglari aynan shunday: --kul-600 — oklch(49.9% 0.016 162), ya'ni ozgina yashil tusli. Hex'da #5b6660. Xuddi shu ravshanlikdagi sof kulrang — #636363.

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .juft { display: flex; flex-wrap: wrap; gap: 1rem; }
  .taom-karta {
    width: 14rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: white;
  }
  .taom-karta h3 {
    margin: 0;
    padding: 0.5rem 1rem;
    background: #2f6b3a;
    color: #fffaf0;
  }
  .taom-karta p { margin: 0; padding: 0.75rem 1rem; }
  .sof p {
    color: oklch(49.9% 0 0);
    border-top: 4px solid oklch(85% 0 0);
  }
  .tusli p {
    color: oklch(49.9% 0.016 162);
    border-top: 4px solid oklch(85% 0.016 162);
  }
</style>
<div class="juft">
  <article class="taom-karta sof">
    <h3>Sof kulrang</h3>
    <p>Guruch, sabzi, qo'y go'shti. O'tin olovida damlanadi.</p>
  </article>
  <article class="taom-karta tusli">
    <h3>Tusli kulrang</h3>
    <p>Guruch, sabzi, qo'y go'shti. O'tin olovida damlanadi.</p>
  </article>
</div>

Nimaga qarang: farq nozik. Chapdagi kartada tavsif va chiziq yashil sarlavha ostida biroz "sovuq", begona. O'ngdagisida ular yashil bilan bir oila bo'lib ko'rinadi. Kontrast deyarli bir xil: sof kulrang 5.8, tuslisi 5.7. Bunday farqni ko'z alohida sezmaydi, lekin butun sayt bo'ylab u "yaxlitlik" hissini beradi.

5.2 Iliq va sovuq

Neytral tanlashda ikkinchi savol — harorat:

• Iliq (warm) kulrang — sariq-qizil tusga (taxminan 40–90) moyil: qog'oz, qum, tosh. Oshxona, kafe, kitob saytlariga mos. Tailwind'ning stone oilasi shunday — uning 500-qadamining tusi taxminan 58.
• Sovuq (cool) kulrang — ko'k tusga (taxminan 230–270) moyil: texnologiya, bank, dasturiy ta'minot.
• Brend tusli — «Bahor» kabi, brend rangining o'zidan.

Qoida: neytralning tusi brendga yaqin bo'lsin yoki uni "isitsin". Iliq brend (to'q sariq) yonida sovuq ko'kish kulrang ziddiyat beradi.

6. Semantik va holat ranglari

6.1 To'rt semantik rang

Semantik ranglar (semantic colors) — ma'no bildiradigan ranglar. Ular deyarli hamma interfeysda bir xil:

To'rttasining ravshanligi bir xil — 52%. Tus va to'yinganlik har xil. Shuning uchun ular bir xil "og'irlikda" ko'rinadi va hammasi 4.5:1 dan o'tadi.

«Bahor» tokenlarida ular --rang-muvaffaqiyat, --rang-xato, --rang-ogohlantirish va --rang-malumot nomlari bilan turadi — keyingi darslarda forma xatolari va bildirishnomalar shularni ishlatadi.

Eng qiyini — sariq. Toza sariq (yuqori L) oq yoki qaymoq fonda o'qilmaydi — «Nega 11 qadam?» bo'limidagi hsl sariq misolini eslang: 1.07:1. Shuning uchun matndagi "ogohlantirish" rangi har doim to'q sariq-jigarrangga yaqin. Yorqin sariq faqat fon sifatida (to'q matn bilan) ishlatiladi.

Har semantik rangning och foni ham kerak — xabar bloki uchun. Shkaladagi 50–100 qadamga o'xshash: L = 95%, C = 0.03–0.04, tus o'sha:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .xabar {
    max-width: 24rem;
    margin-block-end: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border-inline-start: 4px solid var(--_rang);
    background: var(--_fon);
    color: var(--_rang);
  }
  .xabar strong::before { content: var(--_belgi) " "; }
  .ok {
    --_rang: oklch(52% 0.13 150);
    --_fon: oklch(95% 0.03 150);
    --_belgi: "✔";
  }
  .xato {
    --_rang: oklch(52% 0.19 27);
    --_fon: oklch(95% 0.03 27);
    --_belgi: "✖";
  }
  .ogoh {
    --_rang: oklch(52% 0.11 70);
    --_fon: oklch(95% 0.04 75);
    --_belgi: "▲";
  }
  .info {
    --_rang: oklch(52% 0.13 250);
    --_fon: oklch(95% 0.03 250);
    --_belgi: "ℹ";
  }
</style>
<p class="xabar ok"><strong>Bron qabul qilindi.</strong>
  Stol 19:00 ga tayyor.</p>
<p class="xabar xato"><strong>Telefon noto'g'ri.</strong>
  Namuna: +998 90 000 00 00</p>
<p class="xabar ogoh"><strong>Bo'sh stol kam.</strong>
  Shanba kuni faqat 2 ta qoldi.</p>
<p class="xabar info"><strong>Eslatma.</strong>
  Bron 2 soat oldin qilinadi.</p>

Nimaga qarang: to'rtta xabar to'rt xil rangda, lekin har birining boshida belgi va aniq so'z bor: "qabul qilindi", "noto'g'ri". Rangni ko'rmagan odam ham xabarni tushunadi. Har blokda uchta ichki o'zgaruvchi (--_rang, --_fon, --_belgi — CSS o'zgaruvchilari 2 darsidagi uslub) — qoida bitta. Formula bilan: matn o'z foni ustida 4.5 dan 5.3 gacha.

Belgi ::before bilan qo'shilgan: ekran o'quvchi uni ham o'qishi mumkin. Haqiqiy loyihada unga muqobil matn bering (content: "✖" / "Xato: ", Pseudo-elementlar).

6.2 Urg'u va xato to'qnashuvi

«Bahor»ning urg'u rangi — g'ishtdek qizg'ish (tus 39.8), xato esa qizil (27). Ikkisi yaqin. Mehmon narxni ko'rib "bu yerda xato bormi?" deb o'ylashi mumkin. Yechim — ranglarni yanada uzoqlashtirish emas (tus g'ildiragida joy cheklangan), balki boshqa signallar: xato doim belgi, so'z va chegara bilan keladi, narx esa hech qachon belgili blokda turmaydi. Bu WCAG'ning 1.4.1 mezoni: rang ma'lumot berishning yagona yo'li bo'lmasin.

6.3 Holat ranglari

Tugmaning holatlari ham shkaladan olinadi — yangi rang ixtiro qilinmaydi:

Qaymoq matn bilan: 600 — 6.1:1, 700 — 7.8:1, 800 — 10.5:1. Hamma holatda matn o'qiladi. Qadam o'rniga nisbiy rang ham ishlatsa bo'ladi: oklch(from var(--rang-asosiy) calc(l - 0.06) c h) — L ni 6% ga tushirish. Qorong'i rejimda esa teskarisi kerak (tugma och, hover — yanada och). Buni holatlarning to'liq tizimi bilan UI/UX asoslari darsida quramiz.

Nofaol tugma uchun WCAG kontrast talab qilmaydi (1.4.3 mezoni nofaol elementlarni istisno qiladi). Lekin uni butunlay o'chirib yubormang: foydalanuvchi "bu tugma bor, lekin hozir ishlamaydi" deb tushunsin.

Tekshirib ko'ring: Jasur aka aksiya bannerini "ko'zga tashlansin" deb xato qizili (oklch(52% 0.19 27)) bilan yozdirdi: "Juma kuni osh 20% arzon". Nima muammo va qaysi rangni taklif qilasiz?

7. Rang ko'rligi

7.1 Kimga ta'sir qiladi

AQSh Milliy ko'z instituti (NEI) ma'lumotiga ko'ra, taxminan har 12 erkakdan biri rang ko'rligining biror turiga ega; ayollarda bu ancha kam uchraydi. Eng keng tarqalgani — qizil-yashil turi: deuteranopiya (yashilni sezuvchi hujayra ishlamaydi) va protanopiya (qizilni sezuvchi). Bunday odam uchun "qizil = xato, yashil = muvaffaqiyat" signali deyarli yo'qoladi.

7.2 Hisoblab ko'ramiz

culori kutubxonasida rang ko'rligi simulyatsiyasi bor (Machado va hamkasblarining 2009-yilgi modeli). «Bahor» ranglarini deuteranopiya filtridan o'tkazdik:

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .qator p {
    width: 8rem;
    margin: 0 0 0.5rem;
    padding: 2rem 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.875rem;
  }
  h3 { margin: 0.5rem 0; font-size: 1rem; }
</style>
<h3>Oddiy ko'rish</h3>
<div class="qator">
  <p style="background: #1d7d3e">Muvaffaqiyat</p>
  <p style="background: #be2323">Xato</p>
  <p style="background: #2f6b3a">Asosiy</p>
  <p style="background: #b4461a">Urg'u</p>
</div>
<h3>Deuteranopiya (simulyatsiya)</h3>
<div class="qator">
  <p style="background: #685f41">Muvaffaqiyat</p>
  <p style="background: #5c4f21">Xato</p>
  <p style="background: #60583c">Asosiy</p>
  <p style="background: #78631a">Urg'u</p>
</div>

Nimaga qarang: pastki qatorda to'rtala rang ham jigarrang-zaytun bo'lib qoldi. Muvaffaqiyat va xato deyarli bir xil. Sonlar bilan (OKLab'dagi rang farqi — ikki rang bir-biridan qanchalik uzoq: 0 — bir xil, colorjs.io): oddiy ko'rishda muvaffaqiyat va xato orasidagi farq 0.28, deuteranopiyada — 0.06. Asosiy va urg'u uchun: 0.22 va 0.07. Ya'ni farq to'rt-besh barobar kamaydi.

Xulosa oddiy: rang ishlaydi, lekin yolg'iz ishlamaydi. Semantik xabardagi belgi va so'z, havoladagi tag chiziq, joriy sahifadagi qalinlik (Vizual ierarxiya) — shular rang ko'rligi bor odamni qutqaradi.

Tekshirib ko'ring: Bron formasida noto'g'ri maydon faqat qizil chegara bilan ajratilgan, to'g'rilari — yashil chegara bilan. Deuteranopiyali mehmon nimani ko'radi va nima qo'shasiz?

7.3 DevTools'da

Chrome DevTools → Rendering → Emulate vision deficiencies: Protanopia, Deuteranopia, Tritanopia, Achromatopsia (ranglarni umuman ko'rmaslik). Butun sahifani shu ko'z bilan ko'rasiz. Har yangi sahifani kamida deuteranopiya va achromatopsiya bilan bir marta ko'rib chiqing.

8. Vositalar

Palitrani qo'lda hisoblash shart emas. Ishonchli vositalar:

• oklch.com — oklch rang tanlagichi: L, C, H surgichlari va gamut chegarasini ko'rsatadi.
• Radix Colors — tayyor 12 qadamli shkalalar, har qadamning vazifasi yozilgan; yorug' va qorong'i variantlari bilan.
• uicolors.app — bitta hex'dan Tailwind uslubidagi 50–950 shkala yaratadi.
• Realtime Colors (realtimecolors.com) — palitrani namunaviy sayt ustida darhol ko'rsatadi: matn, fon, tugma va urg'u bir joyda.
• Coolors (coolors.co) — uyg'un palitra g'oyalarini tez yaratish; har rangni qulflab, qolganlarini almashtirasiz.
• Tailwind palitrasi — oklch dagi 26 ta tayyor oila (v4.3); o'z shkalangizni solishtirish uchun yaxshi namuna.

Qaysi vositadan olsangiz ham, oxirgi so'z — kontrast tekshiruvi: DevTools rang tanlagichi (DevTools'da CSS) yoki colorjs.io kabi kutubxona. Vosita chiroyli rang beradi, lekin sizning fon rangingizni bilmaydi.

9. Ko'p uchraydigan xatolar

9.1 hsl bilan shkala

hsl(145 40% 10%) dan hsl(145 40% 90%) gacha to'qqiz qadam — o'rtadagi qadamlar notekis, sariq va ko'k oilalar bir-biriga mos kelmaydi. Tuzatish: oklch va L zinapoyasi.

9.2 Chetlarda yuqori to'yinganlik

oklch(97% 0.1 147.7) — ekranga sig'maydi, brauzer uni qirqadi va "zaharli" rang chiqadi. Tuzatish: 50–100 va 900–950 da C ni kamaytiring; gamut'ni tekshiring.

9.3 Raqamga ishonish

"Tailwind'da 600 — matn rangi" deb green-600 ni oq fonga qo'yish — 3.3:1. Tuzatish: har qadamni o'z foningizda formula bilan tekshiring.

9.4 Faqat rang bilan xabar

Qizil chegara — va boshqa hech narsa. Tuzatish: belgi + so'z + rang.

9.5 Sof kulrang

#888, #ccc — brend yonida begona. Tuzatish: C = 0.01–0.02, brend tusi bilan.

9.6 Sariq matn

Ogohlantirish matni #ffc107 qaymoq fonda. Tuzatish: matn uchun to'q sariq-jigarrang (L ≈ 52%), yorqin sariq — faqat fon.

10. Mashqlar

1-mashq (oson): uyg'unlikni hisoblang

«Bahor» urg'u rangi oklch(53.7% 0.153 39.8). Uning komplementar rangi va ikki analog rangining (±30°) tuslarini hisoblang. Keyin komplementar rangni nisbiy rang sintaksisi bilan yozing.

Ishora: tus 360 dan oshsa — 360 ni ayiring. "Tus — aylana" bo'limidagi from sintaksisi.

.aksiya {
  --_rang: oklch(from var(--rang-urgu) l c calc(h + 180));
}

2-mashq (o'rta): qadamlarning vazifasi

«Bahor» menyusida "tanlangan" taom kartasi (mehmon savatga qo'shgan) ajralib tursin. Yashil shkaladan tanlang:

1. Kartaning foni.
2. Kartaning chegarasi.
3. "Tanlandi" yozuvi.

Har tanlovni kontrast bilan asoslang.

Ishora: "Qadamlarning vazifasi" ro'yxati va shkala jadvali.

.taom-karta:has(:checked) {
  background: var(--yashil-50);
  border: 2px solid var(--yashil-500);
}

3-mashq (qiyin): ikkinchi brend uchun shkala

Dizayn tokenlari darsidagi «Navro'z» choyxonasining asosiy rangi — oklch(45% 0.12 255) (ko'k). Uning uchun 11 qadamli shkala tuzing: shu darsdagi L zinapoyasi, H = 255, C o'rtada 0.12. Keyin:

1. Qaysi qadamlar oq fonda matn uchun yaraydi?
2. Tuslangan neytral kulrang uchun C va H ni tanlang.

Ishora: oklch.com'da har qadamni kiriting va gamut ogohlantirishiga qarang. Kontrastni DevTools rang tanlagichida yoki oklch.com'dagi kontrast bo'limida tekshiring.

:root {
  --kok-50: oklch(97% 0.014 255);
  --kok-100: oklch(94% 0.029 255);
  --kok-200: oklch(88% 0.059 255);
  --kok-300: oklch(80% 0.102 255);
  --kok-400: oklch(70% 0.12 255);
  --kok-500: oklch(59% 0.12 255);
  --kok-600: oklch(47.5% 0.12 255);
  --kok-700: oklch(42% 0.12 255);
  --kok-800: oklch(35% 0.102 255);
  --kok-900: oklch(28% 0.072 255);
  --kok-950: oklch(21% 0.054 255);
}

4-mashq: Portfolio qadami — portfolio palitrasi shkalaga

Portfolio'ning tokenlar.css ida semantik ranglar hozir xom oklch() qiymatlar (Qorong'i rejim darsidagi holat). Ularni «Bahor» kabi primitivlarga ajrating:

1. Brend rangingiz (namunada oklch(48.4% 0.097 158.9)) uchun 11 qadamli --yashil-* shkala quring: shu darsdagi L zinapoyasi, 600-qadam — aynan brend rangi.
2. Mavjud kulranglarni (--rang-matn, --rang-fon, --rang-ikkinchi va ularning qorong'i qiymatlari) --kul-* qadamlariga joylang.
3. Semantik tokenlarni primitivlarga ulang. Ko'rinish bir piksel ham o'zgarmasin.
4. Qaysi mavjud rang formulaga to'liq tushmadi? Nima qilasiz?

Ishora: C koeffitsiyentlari — 0.2, 0.4, 0.8, 1, 1, 1, 1, 1, 0.85, 0.6, 0.45 (brend C ga ko'paytiring). Kulranglarning L qiymatlari: 98.2, 93, 76, 49.9, 27.2, 21.

:root {
  /* Brend shkalasi: H 158.9, C 0.097 */
  --yashil-50: oklch(97% 0.019 158.9); /* #ebf9f0 */
  --yashil-100: oklch(94% 0.039 158.9);
  --yashil-200: oklch(88% 0.078 158.9);
  --yashil-300: oklch(80% 0.11 158.9); /* qo'lda: C 0.097 → 0.11 */
  --yashil-400: oklch(70% 0.097 158.9);
  --yashil-500: oklch(59% 0.097 158.9);
  --yashil-600: oklch(48.4% 0.097 158.9); /* #1f6f4a */
  --yashil-700: oklch(42% 0.097 158.9);
  --yashil-800: oklch(35% 0.081 158.9);
  --yashil-900: oklch(28% 0.058 158.9);
  --yashil-950: oklch(21% 0.044 158.9);

  /* Neytral: brend tusli kulrang */
  --kul-50: oklch(98.2% 0.004 157.2); /* #f7faf8 */
  --kul-100: oklch(93% 0.012 160);
  --kul-300: oklch(76% 0.016 162);
  --kul-600: oklch(49.9% 0.016 162);
  --kul-900: oklch(27.2% 0.019 161);
  --kul-950: oklch(21% 0.02 160);
}

:root {
  color-scheme: light;
  --rang-matn: var(--kul-900);
  --rang-fon: var(--kul-50);
  --rang-asosiy: var(--yashil-600);
  --rang-ikkinchi: var(--kul-600);
  --rang-urgu: oklch(53.7% 0.153 39.8);
}

@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
    --rang-matn: light-dark(var(--kul-900), var(--kul-100));
    --rang-fon: light-dark(var(--kul-50), var(--kul-950));
    --rang-asosiy: light-dark(var(--yashil-600), var(--yashil-300));
    --rang-ikkinchi: light-dark(var(--kul-600), var(--kul-300));
    --rang-urgu: light-dark(
      oklch(53.7% 0.153 39.8), oklch(75% 0.13 39.8));
  }
}

11. Real ishda

• Dizayn tizimlari — Material, Radix, Tailwind, GitHub Primer — hammasi shkala + neytral + semantik tuzilmada. Yangi kompaniyaga kelsangiz, birinchi ochadigan fayllardan biri — rang tokenlari.
• Brend qo'llanmasi. Kompaniyada ko'pincha bitta-ikkita "rasmiy" rang bo'ladi, xolos. Shkalani, holat va semantik ranglarni frontend dasturchi (yoki dizayner bilan birga) quradi.
• Accessibility audit. Davlat va bank saytlarida WCAG AA talab qilinadi — kontrast va "faqat rang emas" mezonlari birinchi tekshiriladi. Kontrastning to'liq qoidalari (APCA ham) — CSS'da accessibility darsida.
• Intervyuda so'raladi: "Nega hsl emas, oklch?", "Palitrani qanday qurasiz?", "Rang ko'r foydalanuvchi uchun nima qilasiz?".

Xulosa

• Tus — aylana; uyg'unliklar (komplementar +180°, analog ±30°, uchlik ±120°) — g'oya manbai, oklch(from ...) bilan hisoblanadi.
• 60-30-10 — tajriba qoidasi: neytral ko'p, brend o'rtacha, urg'u oz.
• Shkala oklch da: H o'zgarmaydi, L zinapoya, C chetlarda kamayadi; har qadam kontrast bilan tekshiriladi.
• Neytrallar brend tusidan ozgina oladi; iliq yoki sovuq — brendga mos.
• Semantik ranglar bir xil L da; holatlar — shkaladagi qo'shni qadamlar.
• Rang yagona signal emas: belgi va so'z bilan; DevTools'da rang ko'rligini emulyatsiya qiling.

Keyingi dars: Tipografik shkala va o'qiluvchanlik — shrift o'lchamlarini modul shkala bilan tanlaymiz, shriftlarni juftlaymiz va o'zbek matni uchun shrift tekshiramiz.

Manbalar

• W3C: "CSS Color Module Level 5" (nisbiy rang sintaksisi), "Understanding SC 1.4.1: Use of Color", "Understanding SC 1.4.3" — w3.org
• Radix Colors: "Understanding the scale" — radix-ui.com/colors
• Tailwind CSS v4: theme.css (standart palitra) — tailwindcss.com/docs/colors
• National Eye Institute: "Color Blindness" — nei.nih.gov
• Machado, Oliveira, Fernandes: "A Physiologically-based Model for Simulation of Color Vision Deficiency" (IEEE TVCG, 2009)
• colorjs.io, culori — rang hisoblash kutubxonalari