Rang tizimi va brend palitralari

1) Nega rangni rasmiylashtirish

• brendning tan olinishi va vizual mustahkamligi,
• (WCAG),
• interfeyslarni (mavzular, platformalar, lokallar),
• bashorat qilinadigan A/B-eksperimentlar (kontrast, CTR, xatolar).

2) Tizim asoslari: modellar va metriklar

OKLCH (tavsiya etiladi): perseptual jihatdan bir tekis,’H’rangini saqlab qolganda’L’ning yorqinligini va’C’ning to’yinganligini nazorat qilish qulay.
Lab/LCH: ham yaroqli; OKLCH qabul qilish jihatidan barqarordir.
sRGB: oxirgi koʻrsatish maydoni; yakuniy qiymatlarni har doim sRGB va WCAG bo’yicha tasdiqlaymiz.
Kontrast (WCAG 2. 2): bazaviy matn ≥ 4. 5:1, yirik ≥ 3:1; tanqidiy bildirishnomalar - mumkin bo’lgan joyda AAAni (7:1) nishonga olish.

3) Tizim qatlamlari: brenddan semantikaga

1. Brend-yadro: 1-2 ta firma soyasi (+ qo’llab-quvvatlovchi urg’u).
2. Interfeys semantikasi: rollar (’primary’,’secondary’,’success’,’warning’,’danger’,’info’,’neutral’).
3. Tonlarning shkalalari: yorqinlik bo’yicha qadamlar (masalan, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Holatlar:’default/hover/active/focus/disabled’.
6. Kontekst: sirtlar (’bg/base’,’bg/subtle’,’bg/elevated’) va matn (’fg/primary’,’fg/secondary’,’fg/muted’).
7. Maʼlumotlarni vizualizatsiya qilish: alohida diskret va uzluksiz palitralar.

4) Brend-yadro: tanlash va cheklovlar

Asosiy rangni (Hue) tanlang va yorqin va qorong’i (ko’pincha’L ≈ 0. 60–0. 70’tugmalar uchun light va’L ≈ 0. 70–0. 80’uchun/ikonkalar uchun dark).
’C’ xromini cheklang: yuqori’C’bannerlarda chiroyli, lekin UIda o’qishni buzadi - 2 versiyani ushlab turing: «marketing» (to’yingan) va «oziq-ovqat» (ehtiyotkor).
Asosiy (’brand/primary’), muqobil (’brand/alt’) va neytral (’neutral’) variativlarni aniqlang.

5) Tonlar shkalasi (tonal scales)

• OKLCH uchun’L’bosqichlari bilan harakat qiling (masalan, 0. 98→0. 90→0. 80→…→0. 18), a’C’yorqin va qorong’i ranglarda «loyqa» ga yo’l qo’ymaslik uchun shkala chetlariga bir oz kichiklashtiring.
• Nazorat nuqtalarini belgilang:’50/100/300/500 (key )/700/900’.
• Har qadamda asosiy fon va kutilayotgan matn rangidagi juftlikning kontrastini tekshiring.

Namunasi brand/primary (OKLCH, taxminan)

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6) Semantik rollar va mapping

Brend va semantikani baham ko’ring: «muvaffaqiyat» brend-yashil bo’lishi shart emas.

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

’on’ matnlari avtomatik ravishda hisoblab chiqiladi (§ 10 ga qarang).

7) Yorqin/qorong’u mavzular va yuzalar

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

Ikkala mavzuda ham bir xil kontrast maqsadlarini saqlab qoling; sof qora rangda «ko’r» oqlardan qoching -’L’fonini ~ 0 ga ko’taring. 16.

8) Holatlar va interaktivlik

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9) Javobgarlik va WCAG

Boshqaruv elementlaridagi asosiy matn va ikonkalar - ≥ 4. 5:1.
Asosiy tizim xabarnomalari (KYC/AML, 18 +, to’lov xatolari) - AAAni nishonga olamiz (7:1).
Dalalarning holati va chegaralari 3:1 dan past emas.
Bogʻlarni nafaqat rang bilan ajrating (ustun/focus uslubi).

10) Kontrast matnni avtomatik tanlash (’on-’)

1. OKLCH bo’yicha ma’lumotlarni aniqlash. ’L _ on’ (L_text vs L_bg) matni ≥ 4. 5:1`.

2. Agar xrom yuqori boʻlsa,’C _ text’ni 0 ga tushiring. 01–0. 03.

3. Qorong’u mavzu uchun’L _ on’ni yana 0 ga ko’tarish. 02–0. 04 gleir kompensatsiyasi uchun.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) Ma’lumotlarni vizualizatsiya qilish

Toifali palitralar: 8-12 rang, daltonizmga chidamli (muqobil belgilarsiz «qizil-yashil» bug’dan qoching).
Uzluksiz:’bg/elevated’dan imzolar kontrastini nazorat qiluvchi aksentga.
Rangsiz farqlash uchun pattern/marker qoʻshing.

12) Xalqaro kontekst (madaniy uyushmalar)

Lokal konnotatsiyalarni hisobga oling (masalan, qizil - xavf/e’tibor; oltin - yutuq/sovrin).
iGaming uchun: bitta ekranda brend urg’ulari bilan «muvaffaqiyat/xavf» to’qnashuvlaridan qoching; ikonografiya va imzolar «yorqinlikdan» muhimroqdir.

13) Dizayn-tizimga integratsiya qilish

13. 1 Tokenlarni nomlash

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13. 2 Tokenlar (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13. 3 CSS oʻzgaruvchilari (mavzular qatlami)

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 Figma/hujjatlar

Komponentlar faqat tokenlardan foydalanadi, to’g’ridan-to’g’ri HEX/SRGB linterlar tomonidan taqiqlanadi.
Kutubxonada - «Kontrast matritsasi» sahifasi: haqiqiy koeffitsiyentlar bilan’fg × bg jadvali.

14) Sifatni nazorat qilish jarayonlari

Dizaynda: artbordlarda kontrastni tekshirish (ikkala rejim), daltonizm uchun alohida presetalar.
Kodda: yunit-xelperlar kontrastni hisoblab chiqadi va qoidabuzarliklarda tushadi; kritik ekranlar uchun vizual snepshotlar.
CI/CD’da: barcha token va holatlarni tekshirish, komponent, mavzu va haqiqiy qiymatga ega hisobot.

15) iGaming xususiyatlari

Promo va turnirlar: matn «cho’kib ketmasligi» uchun orqa fonda’C’chegarasi va overledan foydalaning.
Mas’ul bildirishnomalar (limitlar, 18 +, xavflar) - chin dildan AAA.
Metrika/jadvallar: raqamlar va o’zgarishlar belgilarini (↑/↓) faqat rang bilan emas, balki shakl va kontrast bilan ajrating.

16) Joriy etish chek-varaqasi

• Brend soyalari va ularning tonal shkalalari aniqlangan (OKLCH).
• Ikkita mavzu uchun rollar, holatlar va yuzalar berilgan.
• Avtogeneratsiya’on-’maqsadli kontrast bilan.
• CI’fg × bg matritsasi va WCAG testlari.
• Dataviz uchun alohida palitralar (daltonizmni qo’llab-quvvatlagan holda).
• Uslublar linteri «xom» ranglarni taqiqlaydi.
• Gidlayndagi «Istisnolar va sabablar» sahifasi.

17) Anti-patternlar

Brend-urg’uni bitta UX-signalda «muvaffaqiyat/xato» bilan aralashtirish.
Faqat ierarxiya uchun to’yinganlikka tayanish.
Yorugʻlik/qorongʻu sinxronlashtirilmasin (mavzulardan birida «ketgan» kontrast).
Qattiq HEX tokensiz → nazorat qilinmaydigan interfeys dreyfi.

Qisqacha xulosa

Palitrani yuqoridan pastga: brend-yadro → semantik rollar → ohanglar shkalasi → mavzular → holatlar. OKLCHda ishlang, tokenlarni mahkamlang,’on’va WCAG tekshiruvlarini avtomatlashtiring. Dataviz uchun palitralarni alohida yuriting. Bu brendning mustahkamligi, mahsulotning o’qishi va ko’lamliligini ta’minlaydi.