ColorLab Kullanım Rehberi: Renk Biçimleri, Harmoni ve Kontrast
ColorLab bir rengi HEX, RGB ve HSL biçimleri arasında çevirir, ona uyumlu renk şemaları üretir ve seçtiğiniz rengin beyaz ile siyah metinle kontrast oranını ölçer. Aşağıda bu üç işlevi arayüz tahmininden çok kurala dayanarak kullanmanın yolunu bulacaksınız.
Nasıl kullanılır?
-
1
Rengi üç yoldan biriyle belirleyin: HEX kutusuna kod yazın, RGB kaydırıcılarını sürükleyin ya da bir görsel yükleyip baskın renkleri çıkarın.
-
2
HEX, RGB ve HSL sekmeleri arasında geçiş yaparak aynı rengin farklı gösterimlerini görebilir, kopyala düğmesiyle doğrudan koda alabilirsiniz.
-
3
Renk Harmonisi bölümünde benzer (analog), tamamlayıcı ve üçlü şemalara bakın; bunlar seçtiğiniz rengin renk çarkındaki konumundan türetilir.
-
4
Erişilebilirlik bölümünde rengin beyaz ve siyah metinle kontrast oranını okuyun. Rozet AA yazıyorsa oran normal gövde metni için yeterlidir.
Sponsorlu
HEX, RGB ve HSL arasındaki fark
Üçü de aynı rengi anlatır, farkları okunabilirliklerindedir. HEX (#3B82F6) kırmızı, yeşil ve mavi bileşenlerini on altılık tabanda yazar; kısa olduğu için kod ve tasarım dosyalarında standarttır. RGB ise aynı bileşenleri 0-255 aralığında ondalık olarak verir.
HSL ise rengi ton (hue), doygunluk (saturation) ve açıklık (lightness) olarak ayırır ve elle ayar yapmak için üçünün en kullanışlısıdır. Bir rengin daha açık tonunu isterseniz HEX üzerinde tahmin yürütmek yerine HSL'deki açıklık değerini yükseltmeniz yeterlidir; ton ve doygunluk bozulmadan kalır.
Pratik yöntem şudur: paletinizi HSL ile kurun, çıktıyı HEX olarak kopyalayıp projenize yazın. Aynı tonu sabit tutup açıklığı kademeli değiştirerek tutarlı bir renk skalası (100'den 900'e) oluşturabilirsiniz.
Renk harmonileri ne işe yarar?
Harmoniler, renk çarkı üzerindeki açısal ilişkilerden türetilir ve her biri farklı bir görsel etki üretir:
- Benzer (analog): çark üzerinde yan yana duran renkler. Sakin ve tutarlı görünür; arayüzlerde en güvenli seçimdir.
- Tamamlayıcı: çarkın tam karşısındaki renk. En yüksek karşıtlığı verir, bu yüzden vurgu ögelerinde (düğme, uyarı, çağrı) küçük alanlarda kullanılır. Geniş alanlarda yan yana konduğunda göz yorar.
- Üçlü (triadic): çark üzerinde eşit aralıklı üç renk. Canlı ve dengeli paletler verir; biri baskın, diğer ikisi destek olarak kullanıldığında iyi sonuç alınır.
- Pratik oran: alanın yaklaşık %60'ı nötr veya baskın renk, %30'u ikincil renk, %10'u vurgu rengi olacak şekilde dağıtın.
WCAG kontrast eşikleri
Kontrast oranı, iki rengin bağıl parlaklıkları arasındaki orandır ve 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında değişir. Erişilebilirlik ölçütleri bu orana dayanır.
Araçtaki rozet, normal gövde metni için geçerli olan 4.5:1 sınırını kullanır. Tasarımınızda karşılamanız gereken eşikler şunlardır:
- Normal metin, AA düzeyi: en az 4.5:1.
- Büyük metin (yaklaşık 24 piksel ve üzeri ya da 19 piksel kalın), AA düzeyi: en az 3:1.
- Normal metin, AAA düzeyi: en az 7:1; büyük metinde 4.5:1.
- Arayüz bileşenleri ve grafik ögeler (düğme kenarı, form alanı çerçevesi, ikon): en az 3:1.
- Dekoratif ögeler ve devre dışı bırakılmış denetimler için zorunlu bir eşik yoktur.
Rengi tek başına anlam taşıyıcısı yapmayın
Kontrast oranını geçmek erişilebilirliğin yalnızca bir parçasıdır. Bir bilgiyi yalnızca renkle anlatmak, renk körlüğü olan kullanıcılar için o bilgiyi tamamen kaybettirir. En yaygın hata, form hatalarını sadece kırmızı çerçeveyle göstermektir.
Çözüm renkten vazgeçmek değil, renge ikinci bir işaret eklemektir: bir ikon, bir metin açıklaması, altı çizili bir bağlantı ya da bir desen. Renk vurguyu güçlendirir, tek başına taşımaz.
Koyu tema tasarlarken kontrastı ayrıca ölçün. Açık temada yeterli olan bir renk çifti, arka plan koyulaştığında eşiğin altına düşebilir; iki temanın renklerini bağımsız olarak doğrulamak gerekir.
Sıkça sorulan sorular
Kontrast oranı nasıl hesaplanır?
İki rengin bağıl parlaklık değerleri hesaplanır, ardından açık olanın parlaklığına 0,05 eklenip koyu olanın parlaklığına 0,05 eklenmiş değere bölünür. Sonuç 1:1 ile 21:1 arasında bir orandır. Hesap tarayıcınızda yapılır.
Rozet neden sadece AA gösteriyor?
Araçtaki erişilebilirlik rozeti, normal gövde metni için geçerli 4.5:1 eşiğini kontrol eder. Oran bu değerin altındaysa başarısız olarak işaretlenir. AAA düzeyi (7:1) veya büyük metin eşiği (3:1) için ekrandaki sayısal oranı yukarıdaki tabloyla karşılaştırmanız gerekir.
Görselden renk çıkarma nasıl çalışıyor?
Yüklediğiniz görsel tarayıcınızda okunur ve pikselleri analiz edilerek baskın renkler belirlenir. Görsel hiçbir sunucuya gönderilmez; sekmeyi kapattığınızda bellekten silinir.
HEX kodundaki sekiz haneli biçim nedir?
Sekiz haneli HEX (#3B82F6CC) son iki hanede alfa, yani saydamlık değerini taşır. Araç altı haneli opak biçimle çalışır; saydamlık gerekiyorsa kopyaladığınız kodun sonuna alfa değerini kendiniz ekleyebilir ya da CSS tarafında rgba kullanabilirsiniz.
Aynı renk ekranımda neden farklı görünüyor?
Ekranların renk profili, parlaklığı ve kalibrasyonu farklıdır. HEX kodu kesin bir sayısal değerdir ancak her ekran onu biraz farklı gösterir. Bu nedenle renk kararlarını kontrast oranı gibi ölçülebilir ölçütlere dayandırmak, göz kararına güvenmekten daha güvenilirdir.
Seçtiğim renkler kaydediliyor mu?
Renk geçmişi yalnızca kendi tarayıcınızda tutulur; sunucuya gönderilmez. Tarayıcı verilerinizi temizlediğinizde veya gizli pencerede çalıştığınızda geçmiş boş gelir.
İlgili araçlar