Renk Seçici
İstediğiniz rengi seçin ve kodunu yaygın tüm formatlarda, kopyalamaya hazır şekilde alın. Uyumlu paletler oluşturun, bir fotoğrafın baskın renklerini yüklemeden çıkarın ve bir metin-arka plan çiftinin WCAG kontrast şartını karşılayıp karşılamadığını test edin.
Renk seçici
Renk kodları, tüm biçimlerde
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (yaklaşık)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
Bu renkten paletler
Tamamlayıcı
Komşu renkler
Üçlü uyum
Açık tonlar (beyazla karışım)
Koyu tonlar (siyahla karışım)
Görselden palet
Görseliniz kendi tarayıcınızda okunur ve asla yüklenmez: pikseller bu cihazda bir canvas üzerinde örneklenir ve hiçbir yere gönderilmez.
Fotoğrafı, ekran görüntüsünü veya logoyu buraya bırakın
Görselinizin baskın altı rengi burada görünür. Seçiciye yüklemek için bir renk örneğine tıklayın.
Kontrast denetleyici (WCAG 2.1)
Büyük metin örneği
Pijamalı hasta yağız şoföre çabucak güvendi. 0123456789
- AA · normal metinGeçti
- AAA · normal metinGeçti
- AA · büyük metinGeçti
- AAA · büyük metinGeçti
Büyük metin, normal kalınlıkta en az 18 pt (24 px) veya kalın yazıda 14 pt (yaklaşık 18,7 px) demektir. AA, normal metin için 4,5:1, büyük metin için 3:1 ister; AAA ise 7:1 ve 4,5:1 ister.
Yaygın CSS adlı renkler
Her tarayıcının anladığı yirmi anahtar sözcük ve bunların kesin HEX, RGB ve HSL değerleri.
| 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 ve HSB aslında neyi tanımlar?
Bu sayfadaki her renk, tarayıcıların 1990'ların sonunda benimsemesinden beri web'in varsayılan renk uzayı olan sRGB içindedir. Ekran kırmızı, yeşil ve mavi ışığı karıştırır; her kanalın 256 düzeyi (0–255) vardır ve bu da 16.777.216 olası renk eder. RGB bu üç sayıyı doğrudan yazar; HEX aynı üç sayıyı 16'lık tabanda, her biri iki basamak olacak şekilde yazar. Yani #FF6600, kırmızı 255, yeşil 102, mavi 0 demektir. Üç basamaklı kısa yazım her basamağı ikiler: #F60, #FF6600 ile aynıdır.
HSL ve HSB (HSV olarak da bilinir) aynı renkleri elle ayarlaması daha kolay bir biçimde tanımlar. Ton (hue), renk çemberi üzerinde bir açıdır: 0° kırmızı, 120° yeşil, 240° mavi. Fark son sayıdadır. HSL'de %100 açıklık her zaman beyazdır, %50 tonun en saf halidir; HSB'de %100 parlaklık saf tondur ve beyaz için doygunluğun %0 olması gerekir. Photoshop ve Figma gibi tasarım uygulamaları renk seçicilerinde HSB kullanır, CSS ise hsl() işlevini doğrudan anlar; bu yüzden ikisi de yukarıda listelenmiştir.
CMYK değeri neden yalnızca yaklaşık bir değerdir?
Ekranlar ışık ekler; yazıcılar ise camgöbeği, eflatun, sarı ve siyah mürekkeple ışığı çıkarır. İki sistem, gamut adı verilen farklı renk aralıklarını kapsar. Parlak bir RGB yeşili, elektrik mavisi veya neon turuncu gibi çok doygun ekran renkleri, süreç mürekkeplerinin üretebileceği aralığın dışında kalır; bu yüzden basılı hali monitörde göründüğünden daha mat çıkar.
Buradaki CMYK değerleri, ICC profili olmadan düz matematiksel dönüşümle hesaplanır. Bu, kabaca bir brif için yararlıdır ama baskı için uygun değildir. Matbaa, kâğıdına ve makinesine uygun bir profille (Avrupa'da FOGRA39, ABD'de GRACoL gibi) dönüştürür ve aynı RGB rengi her profilde farklı mürekkep oranlarıyla çıkabilir. Baskı işlerinde RGB veya HEX değerini, matbaanın istediği profille birlikte gönderin.
Kontrast oranı nasıl hesaplanır?
WCAG 2.1, iki rengin bağıl parlaklığını karşılaştırır: açık rengin değeri artı 0,05, koyu rengin değeri artı 0,05'e bölünür. Sonuç 1:1 (aynı renkler) ile 21:1 (beyaz üzerinde siyah) arasında değişir. AA düzeyi normal metin için en az 4,5:1, büyük metin için (18 punto veya 14 punto kalın) 3:1 ister; AAA düzeyi bunları 7:1 ve 4,5:1'e çıkarır. Giriş kutusu kenarlıkları ve simgeler gibi arayüz parçaları, 1.4.11 başarı ölçütü uyarınca çevresine karşı 3:1 gerektirir.
Parlaklık hesabında yeşil, mavidan çok daha ağır basar, çünkü göz en çok ona duyarlıdır. Bu yüzden her iki renk de tam doygun görünse de beyaz üzerinde sarı metin ağır biçimde başarısız olurken beyaz üzerinde koyu mavi kolayca geçer. Logolar ve yalnızca süs amaçlı metinler bu kuraldan muaftır.
Bir fotoğraftan veya logodan palet çıkarma
Resim paleti, dosyanızı tarayıcının canvas'ıyla okur, uzun kenarı en fazla 200 piksele küçültür ve benzer pikselleri Paul Heckbert'in 1982'de tanımladığı median-cut yöntemiyle gruplar: renk aralığı, altı grup kalana dek en geniş kanal boyunca tekrar tekrar bölünür ve her grubun ortalaması bir renk örneği olur. Saydam pikseller yok sayılır; bu yüzden saydam arka planlı bir logo, logonun renklerini verir.
Renkleri aldıktan sonra düz renkli bir logo çoğu zaman vektör olarak daha iyi çalışır. Resmi SVG'ye dönüştürme aracı, bu renkleri aynen koruyan şekiller çıkarır; bir kanal başlığı tasarlıyorsanız YouTube banner boyutlandırma aracı çalışmayı güvenli alanı gözeterek 2560 × 1440 ölçüsüne uyarlar.
Sık sorulan sorular
- CSS'teki "green" neden RGB seçicideki yeşilden daha koyu?
- Green anahtar sözcüğü #008000'dir; eski 16 renkli HTML paletinden miras kalan orta tonda bir yeşildir. Tam doygun #00FF00 ise lime olarak adlandırılır. CSS'in tam listesinde benzer sürprizler var: gray (#808080), darkgray'den (#A9A9A9) daha koyudur.
- Palet çıkarırken resmim yükleniyor mu?
- Hayır. Dosya tarayıcınızda açılır, bellekte bir canvas üzerine çizilir ve orada analiz edilir. Görselle birlikte hiçbir istek gönderilmez; sekmeyi kapattığınızda görsel silinir.
- Gövde metni için hangi kontrast oranı gerekir?
- WCAG 2.1 AA düzeyi için en az 4,5:1, AAA düzeyi için 7:1. 18 punto veya daha büyük ya da 14 punto kalın başlıklar AA için 3:1 kullanabilir. Birçok tasarım sistemi, metnin loş ekranlarda ve güneş ışığında okunaklı kalması için her yerde 4,5:1'i hedefler.
- Saydamlık içeren 8 haneli HEX kodu kullanabilir miyim?
- Evet, CSS'te. Son iki basamak alfa kanalıdır; yani #2F6FED80, aynı mavinin yaklaşık %50 opaklıktaki halidir. Bu renk seçici opak renklerle çalışır, bu yüzden altı basamak gösterir; gerektiğinde alfa çiftini kendiniz ekleyin.
- CSS'te kaç tane adlandırılmış renk vardır?
- CSS Color Module Level 4, gray ve grey gibi çift yazımlar dahil 148 renk anahtar sözcüğü tanımlar. En yenisi, 2014'te CSS yazarı Eric Meyer'in kızı Rebecca Meyer'in anısına eklenen rebeccapurple'dır (#663399).