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.

brand/primary shkalasi namunasi (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) # ключевой тон 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 к 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 # контраст кольца ≥ 3:1 к окружению disabled.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.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)); / автоподбор /
}
[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.