OKLCH rəng generatoru və palitrası
Köhnə HSL modelində sarı rəng gözü qamaşdırır, göy rəng isə qaranlıq qalır? Müasir CSS oklch() modeli insan görmə qabiliyyətinə uyğunlaşdırılıb: eyni Lightness dəyərində bütün çalarlar eyni dərəcədə aydın görünür və Display P3 ekranlarının canlı rənglərini açır.
:root {
--brand-color: oklch(65% 0.22 145);
--brand-light: oklch(92% 0.06 145);
--brand-dark: oklch(35% 0.16 145);
}Necə istifadə etmək olar
- Hazır müasir presətlərdən birini seçin (Elektrik Bənövşəyi, Neon Çəhrayı, Zümrüd Yaşılı, Günəş Qızılı, Okean Mavisi).
- Lightness (Parlaqlıq), Chroma (Doyğunluq) və Hue (Rəng bucağı) sürüşdürücülərini dəyişərək rənginizi qurun.
- Avtomatik yaranan 5 addımlıq UI şkalasına və harmonik çalarlara baxın, istənilən çaları bir kliklə kopyalayın.
- Müasir
oklch()və köhnə brauzerlər üçün HEX ehtiyat kodunu (fallback) əldə edin.
Bu necə işləyir
OKLCH nədir və niyə HSL-dən qat-qat yaxşıdır?
OKLCH — insan gözünün rəng qavrayışına əsaslanan ən müasir rəng fəzasıdır (Perceptually Uniform). HSL-də hsl(60, 100%, 50%) (sarı) və hsl(240, 100%, 50%) (göy) eyni 50% parlaqlığa malik görünsə də, əslində sarı həddindən artıq parlaqdır. OKLCH-də isə L = 0.7 istənilən çalarda həmişə eyni parlaqlıq verir, bu da kontrast və əlçatanlıq (WCAG) üçün idealdır.
Display P3 və geniş rəng qamutu
Klassik sRGB modeli müasir iPhone, MacBook və OLED monitorların göstərə bildiyi rənglərin yalnız 75%-ni əhatə edir. OKLCH sayəsində sRGB-nin göstərə bilmədiyi daha parlaq neon və zəngin yaşıl/qırmızı rənglərə çıxış əldə edirsiniz.
/* Display P3 ekranlar üçün zəngin neon rəng */
.btn-glow {
background: oklch(65% 0.28 350);
}UI Dizayn Sistemləri üçün ən yaxşı seçim
OKLCH ilə dizayn sistemi (Design System) qurmaq inanılmaz dərəcədə asandır: tək bir rəng tonu (Hue) saxlayaraq yalnız Lightness-i (90%, 70%, 50%, 30%) dəyişməklə düymələr, arxa fonlar və haşiyələr üçün mükəmməl balanslı rəng şkalası yaradırsınız.
Tez-tez verilən suallar
OKLCH brauzerlərdə necə dəstəklənir?
OKLCH Chrome 111+, Safari 15.4+, Edge 111+ və Firefox 113+ versiyalarından etibarən bütün müasir brauzerlərdə tam dəstəklənir (93%+ qlobal dəstək).
Chroma parametri nəyi bildirir?
Chroma — rəngin saflığını və intensivliyini göstərir. 0 qiymətində rəng tamamilə boz olur, 0.1–0.2 normal canlı rənglər, 0.25+ isə güclü neon və parlaq çalarlar yaradır.
Köhnə brauzerlər üçün necə ehtiyat vermək olar?
Əvvəlcə standart background: #6366f1;, növbəti sətirdə isə background: oklch(...); yazmaq kifayətdir; dəstəkləyən brauzer avtomatik OKLCH-i seçəcək.
