Rəng seçici
İstənilən rəngi seçin və onun kodunu bütün geniş yayılmış formatlarda, kopyalamağa hazır şəkildə alın. Uyğun palitralar yaradın, fotonu yükləmədən onun əsas rənglərini çıxarın və mətn ilə fon cütünün WCAG kontrast tələbinə cavab verib-vermədiyini yoxlayın.
Rəng seçici
Rəng kodları bütün formatlarda
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (təqribi)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
Bu rəngdən palitralar
Komplementar
Analoji
Triadik
Açıq tonlar (ağ ilə qarışıq)
Tünd tonlar (qara ilə qarışıq)
Şəkildən palitra
Şəkliniz yalnız brauzerinizdə oxunur və heç vaxt yüklənmir: piksellər bu cihazda canvas üzərində götürülür və heç bir yerə göndərilmir.
Foto, ekran görüntüsü və ya loqonu bura atın
Şəklinizin altı dominant rəngi burada görünəcək. Seçiciyə yükləmək üçün rəng nümunəsinə klikləyin.
Kontrast yoxlayıcı (WCAG 2.1)
Böyük mətn nümunəsi
Şərq ölkələrində çox gözəl çiçəklər açır. 0123456789
- AA · normal mətnKeçir
- AAA · normal mətnKeçir
- AA · böyük mətnKeçir
- AAA · böyük mətnKeçir
Böyük mətn ən azı 18 pt (24 px) normal və ya 14 pt (təxminən 18,7 px) qalın mətn deməkdir. AA normal mətn üçün 4,5:1, böyük mətn üçün 3:1 tələb edir; AAA isə 7:1 və 4,5:1.
Geniş yayılmış CSS adlı rənglər
Hər brauzerin tanıdığı iyirmi açar söz, dəqiq HEX, RGB və HSL dəyərləri ilə.
| Ad | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL və HSB əslində nəyi təsvir edir
Bu səhifədəki bütün rənglər sRGB məkanındadır. Brauzerlər 1990-cı illərin sonunda bu məkanı qəbul etdiyindən bəri o, veb üçün standart rəng məkanıdır. Ekran qırmızı, yaşıl və mavi işığı qarışdırır, hər kanalın 256 səviyyəsi (0–255) var və bu, 16 777 216 mümkün rəng verir. RGB həmin üç ədədi birbaşa yazır; HEX isə eyni üç ədədi 16-lıq say sistemində, hər biri iki rəqəmlə yazır, belə ki, #FF6600 qırmızı 255, yaşıl 102, mavi 0 deməkdir. Üç rəqəmli qısa yazılışda hər rəqəm təkrarlanır: #F60 #FF6600 ilə eynidir.
HSL və HSB (HSV də adlanır) eyni rəngləri əllə tənzimləmək üçün daha rahat şəkildə təsvir edir. Ton rəng çarxında bucaqdır: 0° qırmızı, 120° yaşıl, 240° mavi. Fərq sonuncu ədəddədir. HSL-də 100% açıqlıq həmişə ağdır, 50% isə tonun ən təmiz variantıdır; HSB-də 100% parlaqlıq təmiz tondur, ağ üçün isə doyma 0% olmalıdır. Photoshop və Figma kimi dizayn proqramları seçicilərində HSB-dən istifadə edir, CSS isə hsl() funksiyasını birbaşa dəstəkləyir, buna görə yuxarıda hər ikisi göstərilib.
CMYK dəyəri niyə yalnız təxminidir
Ekranlar işıq əlavə edir; printerlər isə firuzəyi, purpur, sarı və qara mürəkkəblə işığı azaldır. Bu iki sistem qamma adlanan müxtəlif rəng diapazonlarını əhatə edir. Parlaq RGB yaşılı, elektrik mavisi və ya neon narıncı kimi çox doymuş ekran rəngləri adi mürəkkəblərin təkrarlaya biləcəyi diapazondan kənardadır, ona görə də çapda monitordakından solğun görünür.
Buradakı CMYK ədədləri ICC profili olmadan sadə riyazi çevirmədən istifadə edir; bu, təxmini tapşırıq üçün yararlıdır, çap üçün isə yox. Çap evi öz kağızına və çap maşınına uyğun profillə, məsələn, Avropada FOGRA39 və ya ABŞ-də GRACoL ilə çevirir və eyni RGB rəngi hər birində fərqli mürəkkəb faizləri verə bilər. Çap işi üçün RGB və ya HEX dəyərini çap evinin istədiyi profillə birlikdə göndərin.
Kontrast nisbəti necə hesablanır
WCAG 2.1 iki rəngin nisbi parlaqlığını müqayisə edir: açıq rəng üstəgəl 0,05, tünd rəng üstəgəl 0,05-ə bölünür. Nəticə 1:1 (eyni rənglər) ilə 21:1 (ağ üzərində qara) arasında olur. AA səviyyəsi adi mətn üçün ən azı 4,5:1, iri mətn üçün (18 punkt və ya qalın 14 punkt) 3:1 tələb edir; AAA səviyyəsi bunu 7:1 və 4,5:1-ə qaldırır. Daxiletmə sahəsinin haşiyəsi və ikonlar kimi interfeys elementləri 1.4.11 uğur meyarına görə ətrafına nisbətən 3:1 olmalıdır.
Parlaqlıq hesablanarkən yaşıl mavidən qat-qat çox çəkiyə malikdir, çünki göz ona ən həssasdır. Buna görə ağ üzərində sarı mətn pis nəticə verir, ağ üzərində tünd mavi isə asanlıqla keçir, halbuki hər iki rəng tam doymuş görünür. Loqolar və sırf dekorativ mətn bu qaydadan istisnadır.
Foto və ya loqodan palitra almaq
Şəkil palitrası faylınızı brauzerin canvas elementi ilə oxuyur, uzun tərəfi ən çox 200 piksel olacaq şəkildə kiçildir və oxşar pikselləri Paul Heckbertin 1982-ci ildə təsvir etdiyi median-cut üsulu ilə qruplaşdırır: rəng diapazonu ən geniş kanal boyunca altı qrup qalana qədər dəfələrlə bölünür və hər qrupun ortası bir nümunə olur. Şəffaf piksellər nəzərə alınmır, ona görə şəffaf fonda olan loqo loqonun rənglərini verir.
Rəngləri əldə etdikdən sonra düz rəngli loqo çox vaxt vektor kimi daha yaxşı işləyir. Şəkli SVG-yə çevirmək aləti onu məhz bu rəngləri saxlayan formalara çevirir, kanal başlığı hazırlayırsınızsa, YouTube banner ölçüsü aləti işi təhlükəsiz sahəni nəzərə alaraq 2560 × 1440 ölçüsünə uyğunlaşdırır.
Tez-tez verilən suallar
- CSS-dəki "green" niyə RGB seçicisindəki yaşıldan tündür?
- green açar sözü #008000-dır, köhnə 16 rəngli HTML palitrasından qalan orta yaşıl rəngdir. Tam doymuş #00FF00 isə lime adlanır. CSS-in tam siyahısında oxşar sürprizlər var: gray (#808080) darkgray-dən (#A9A9A9) daha tünddür.
- Palitra çıxaranda şəklim serverə yüklənirmi?
- Xeyr. Fayl brauzeriniz tərəfindən açılır, yaddaşda canvas üzərində çəkilir və orada təhlil olunur. Şəkillə heç bir sorğu göndərilmir, tabı bağlayanda isə şəkil silinir.
- Əsas mətn üçün hansı kontrast nisbəti lazımdır?
- WCAG 2.1 AA səviyyəsi üçün ən azı 4,5:1, AAA üçün 7:1. 18 punkt və ya daha iri, yaxud qalın 14 punktluq başlıqlar AA üçün 3:1 istifadə edə bilər. Bir çox dizayn sistemi mətnin tutqun ekranlarda və gün işığında oxunaqlı qalması üçün hər yerdə 4,5:1 hədəfləyir.
- Şəffaflığı olan 8 rəqəmli HEX kodundan istifadə etmək olarmı?
- Bəli, CSS-də. Son iki rəqəm alfa kanalıdır, buna görə #2F6FED80 eyni mavinin təxminən 50% şəffaflıqlı variantıdır. Bu seçici qeyri-şəffaf rənglərlə işləyir, ona görə altı rəqəm göstərir; lazım olduqda alfa cütünü özünüz əlavə edin.
- CSS-də neçə adlı rəng var?
- CSS Color Module Level 4 gray və grey kimi təkrar yazılışları da sayaraq 148 rəng açar sözü müəyyən edir. Ən yenisi rebeccapurple (#663399) olub, 2014-cü ildə CSS müəllifi Eric Meyerin qızı Rebecca Meyerin xatirəsinə əlavə edilib.