Rəng Çevirici
İstənilən CSS rəngini HEX, RGB, HSL, HWB, OKLCH və CMYK arasında çevirin, mətn kontrastını dəqiq WCAG düsturu ilə yoxlayın və istənilən rəngdən on pilləli açıqlıq şkalası çıxarın — hamısı brauzerinizdə.
Bir rəng, altı yazılış
Bu səhifədəki hər format eyni sRGB rəngini başqa cür adlandırır. Hex və
rgb() qırmızı, yaşıl və mavi kanalları birbaşa saxlayır —
hex hər kanala iki onaltılıq rəqəmlə; kanal başına bir baytlıq rəngin
həmişə altı rəqəm olması buradandır. hsl() eyni ədədləri
ton, doyğunluq və açıqlığa düzür — düşünmək asanlaşır, amma sRGB-nin
əyri parlaqlıq hissi qalır. hwb() tonun ağ və qara ilə
qarışığını təsvir edir — boya qarışdıranın modeli. oklch()
müasir persept yazılışdır, CMYK isə rəngin çapda necə ayrılacağının
təqribidir.
| Format | #336699 belə yazılır | Harada işlənir |
|---|---|---|
| HEX | #336699 | hər yerdə; mübadilə formatı |
| RGB | rgb(51 102 153) | CSS, canvas, şəkil datası |
| HSL | hsl(210 50% 40%) | CSS-də tonu/açıqlığı əllə düzəltmək |
| HWB | hwb(210 20% 40%) | CSS Level 4; seçici düşüncəsi |
| OKLCH | oklch(49.93% 0.0987 250.4) | müasir dizayn sistemləri, persept palitralar |
| CMYK | cmyk(67%, 33%, 0%, 40%) | çapa hazırlıq, təqribi |
Kontrast: oxunaqlığı həll edən rəqəm
WCAG nisbəti 1:1-dən (eyni rənglər) 21:1-ə (ağ üzərində qara) qədərdir. O, iki tonun nə qədər fərqli göründüyündən yox, parlaqlıqdan hesablanır — qırmızı ilə yaşıl tonca maksimal fərqli, parlaqlıqca az qala eyni ola bilər; rəng korluğu olan oxucuların ayıra bilmədiyi cütlük məhz budur. Hədlər:
| Səviyyə | Adi mətn | İri mətn (18pt / 14pt qalın) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Hər şey brauzerinizdə yerli işləyir — yazdığınız və seçdiyiniz heç bir rəng heç yerə göndərilmir.
Tez-tez verilən suallar
Alət hansı rəng formatlarını oxuyur?
Dörd uzunluqda hex (#369, #3699, #336699, #33669980), köhnə vergüllü və müasir boşluqlu sintaksisdə rgb() və hsl() — faizlər və dördüncü qiymət yaxud slash-dan sonra yazılmış alfa kanalı daxil olmaqla. Nə daxil olursa olsun, bütün çıxış formatları eyni anda göstərilir.
OKLCH nədir və niyə HSL əvəzinə işlədim?
OKLCH bütün müasir brauzerlərin dəstəklədiyi elə rəng yazılışıdır ki, açıqlıq qiyməti rəngin həqiqi parlaqlığına uyğun gəlir. HSL-də 50% açıqlıqda sarı işıq saçır, mavi isə tünd görünür — rəqəm aldadır. OKLCH-də eyni L-li iki rəng həqiqətən bərabər açıqdır; pillələri bərabər hiss olunmalı palitralar üçün bu, qat-qat yaxşıdır. Yeni CSS rəng sistemləri əsasən onunla yazılır.
Kontrast nisbəti necə hesablanır?
WCAG 2-nin dəqiq düsturu ilə: hər kanal xəttiləşdirilir (0.04045 dirsəyindən aşağı qiymətlər 12.92-yə bölünür, qalanları 2.4 dərəcəsinə qaldırılır), 0.2126/0.7152/0.0722 çəkiləri ilə nisbi parlaqlığa yığılır və iki parlaqlıqdan (L1+0.05)/(L2+0.05) alınır. Nəticə əlçatanlıq audit alətlərinin göstərdiyi ilə üst-üstə düşür — düşməlidir, çünki bu, auditlərdə sitat gətirilən rəqəmdir.
AA və AAA nəticələri nə deməkdir?
WCAG mətn üçün minimum kontrast müəyyən edir: AA adi mətnə 4.5:1, iri mətnə (18pt və ya 14pt qalın) 3:1 tələb edir; AAA bunları 7:1 və 4.5:1-ə qaldırır. Qaydaların əksəriyyəti AA səviyyəsinə istinad edir. Məşhur sərhəd halı: ağ üzərində təmiz qırmızı 4.0:1-dir — iri başlıqlara bəs edir, əsas mətn üçün keçmir.
Yoxlayıcı şəffaflığı nəzərə alırmı?
Nisbət qeyri-şəffaf rənglər üzərində hesablanır. Mətn rənginizdə alfa varsa, həqiqi kontrast altdan nəyin göründüyündən asılıdır və bu, pikseldən-pikselə dəyişir — əvvəlcə rəngi real fonuna qarışdırıb yastılayın, sonra yoxlayın. Yarımşəffaf qiymət formatlarda göstərilir, amma kontrast əsas rəngi işlədir.
Açıqlıq şkalası necə qurulur?
Rənginizin tonu və doyğunluğu saxlanılır, açıqlıq HSL-də 95%-dən 5%-ə bərabər addımlarla düşür. Bu, hover halları, haşiyələr və brend rənginin qaranlıq rejim variantları üçün işlənən klassik açıqdan-tündə rampasıdır. İstənilən pillənin hex kodunu klikləməklə kopyalayın.
Oxşar alətlər
- Diaqram və Blok-sxem QurucusuBlok-sxem və diaqram çəkin, qutuları özü marşrutlaşan oxlarla birləşdirin, düzülüşü avtomatik qurdurun. SVG ixracı var.
- Şifrə GeneratoruBrauzerin kriptoqrafik təsadüfi say generatoru ilə güclü şifrələr yaradın, gücünü dərhal görün.
- HTML Entity ÇeviriciMətni HTML üçün kodlayın və ya entity-ləri geri açın — markap pozucuları, adlı dəstlər, emojiyə qədər rəqəmsal istinadlar. Düz bir dəfə açır.