Renk seçici
Her formatta, herhangi bir renk için tam kodu bul.
Kontrast kontrolü
- AA
- AA büyük
- AAA
- AA
- AA büyük
- AAA
Tarayıcında çalışır. Yazdığın hiçbir şey bir yere gönderilmez.
- 5 renk formatı
- WCAG kontrast kontrolü
- Opaklık desteği
Bir renk nasıl seçilir
- Doygunluk ve parlaklığı ayarlamak için karede sürükle, sonra ton kaydırıcısını hareket ettir.
- Veya herhangi bir formatta bir kod yaz: HEX, RGB, HSL, HSV veya CMYK.
- İhtiyacın olan kodu kopyala ve aşağıda kontrastını kontrol et.
Renk formatları karşılaştırması
Aşağıdaki her satır aynı turuncuyu tanımlar. Sadece gösterim değişir.
| Format | Örnek | Kullanıldığı yer |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, tasarım araçları |
| RGB | rgb(240, 138, 60) | CSS, resim düzenleyiciler |
| HSL | hsl(24, 84%, 59%) | CSS, göz kararı ayarlaması en kolay olan |
| HSV/HSB | hsv(24, 75%, 94%) | Boya ve tasarım uygulaması seçicileri |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Baskı tasarımı ve mürekkep karıştırma |
Web için HEX veya RGB, bir rengin tonunu değiştirmeden parlaklığını veya doygunluğunu ayarlamak istediğinde HSL, baskı için başlangıç noktası olarak da CMYK kullan.
WCAG kontrast seviyeleri
Aşağıdaki kontrast kontrolü, rengini düz beyaz ve düz siyahla karşılaştırır ve ikisini de WCAG 2 seviyelerine göre notlandırır.
| Seviye | Normal metin | Büyük metin |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Büyük metin yaklaşık 24 px, veya kalın 19 px demektir. Çoğu sitenin sadece AA'yı geçmesi gerekir. AAA daha katı bir çıtadır, çoğunlukla devlet ve erişilebilirlik odaklı sitelerde kullanılır.
Erişilebilir renkler seçme ipuçları
- Hover ve active durumları için aynı rengin daha koyu bir tonunu almak üzere tonu sabit tut ve HSL'de açıklığı düşür.
- Beyaz üzerinde AA'yı geçen bir renk renkli bir arka planda başarısız olabilir, bu yüzden sadece beyaz veya siyaha değil, sayfanın gerçek arka planına karşı kontrastı kontrol et.
- Damlalık sadece bir bilgisayarda Chrome ve Edge'de çalışır. Firefox ve Safari henüz EyeDropper API'sini eklemedi.
- Tam bir baskı işi için bir CMYK değerine güvenmeden önce bir baskı atölyesi provası al. Aynı sayılar kuşe ve kuşesiz kağıtta farklı görünebilir.
Renk seçici SSS
Ekranımdaki bir şeyin renk kodunu nasıl alırım?
Bir bilgisayarda Chrome ve Edge'de, Ekrandan seç'e tıkla, sonra ekranındaki herhangi bir yere tıkla. Diğer tarayıcılar bunu henüz sunmuyor, bu yüzden bir ekran görüntüsü al ve bir resim renk seçicisinde aç.
HEX, RGB ve HSL arasındaki fark ne?
Aynı rengi farklı şekillerde tanımlarlar. HEX ve RGB, kırmızı, yeşil ve mavi miktarlarını verir (HEX bunları 16 tabanında yazar), HSL ise elle ayarlaması daha kolay olan ton, doygunluk ve açıklık verir.
Okunabilir metin hangi kontrast oranını ister?
WCAG AA seviyesi, normal metin için en az 4,5:1 ve büyük metin için 3:1 ister, yani yaklaşık 24 px veya kalın 19 px. AAA seviyesi normal metni 7:1'e çıkarır.
CMYK değerleri tam mı?
RGB'den doğrudan bir matematiksel dönüşümdür. Gerçek baskı renkleri mürekkeplere, kağıda ve yazıcı profiline bağlıdır, bu yüzden bunları bir başlangıç noktası olarak kullan ve bir baskı provası kontrol et.
Opaklık kaydırıcısı neyi değiştirir?
Saydamlığı 0'dan (görünmez) 100'e (katı) kadar ayarlar. 100'ün altında HEX koduna iki ekstra rakam eklenir ve RGB, rgba() olur. Kontrast, her arka planda göründüğü renk için kontrol edilir.
HSV, RGB'nin sunmadığı ne için kullanışlı?
HSV, bir rengin tonunu ne kadar parlak ve doygun göründüğünden ayırır; bu yüzden boya seçicileri ve fotoğraf düzenleyicileri, kırmızı, yeşil ve maviyi göz kararı karıştırmak yerine ton için bir kaydırıcı, parlaklık için başka bir kaydırıcı verir.
Buradan bir Pantone rengi alabilir miyim?
Hayır. Pantone, belirli mürekkeplere bağlı, lisanslı bir spot renk sistemidir, RGB veya CMYK'dan düz bir matematiksel dönüşüm değildir. CMYK değerini bir başlangıç noktası olarak kullan ve tam eşleşmeyi baskı atölyenle onayla.