Renk Paleti Oluşturucu
Kırmızı #ff0000'ın tamamlayıcı rengi, renk çemberinde tam karşısında duran #00ffff rengidir. Kırmızının üçlü paleti #00ff00 ve #0000ff renklerini ekler. Beyaz üzerinde siyah yazının kontrast oranı 21:1'dir.
Nasıl kullanılır
- Renk kutusundan bir ana renk seçin ya da #0b7a6a gibi bir HEX kodu yazın. rgb(11, 122, 106) gibi RGB ve HSL yazımları da çalışır.
- Bir uyum seçin: Tamamlayıcı, Analog, Üçlü veya Tek renk. Ana renginizin etrafında çerçeve görünür.
- Değeri kopyalamak için HEX, RGB veya HSL satırına tıklayın. Bütün palet için Tüm HEX'leri kopyala düğmesine basın.
- Her renkteki iki kontrast satırına bakın. Bu satırlar o rengin üzerinde beyaz ve siyah yazının ne kadar okunaklı olduğunu gösterir.
Nasıl hesaplanır
Renkler HSL ile işlenir: ton (hue) renk çemberindeki 0-360 derece arası konumdur, doygunluk rengin canlılığı, açıklık ise ne kadar açık ya da koyu olduğudur. Paletler yalnızca tonu döndürür, doygunluk ve açıklığı korur; böylece paletteki bütün renkler benzer bir his taşır.
Tamamlayıcı, çemberde 180 derece karşıdaki rengi ekler. Analog iki yandaki 30 derecelik komşuları kullanır. Üçlü, aralarında 120 derece olan üç renktir. Tek renk ise ton ve doygunluğu sabit tutup yalnızca açıklığı 15 puanlık adımlarla değiştirir; uçlar saf beyaza ya da siyaha dönmesin diye yüzde 8 ile 92 arasında kalır.
Kontrast oranı WCAG 2'ye göre hesaplanır. Her kanal doğrusal ışığa çevrilir, bağıl parlaklık L = 0.2126 R + 0.7152 G + 0.0722 B bulunur ve oran (açık L + 0.05) / (koyu L + 0.05) olarak 1:1 ile 21:1 arasında çıkar.
WCAG normal metin için en az 4.5:1 (AA), AAA için 7:1 ister. Büyük metin, yaklaşık 24 px ya da kalın 19 px ve üstü, AA için 3:1 ile yetinir. Her oranın altındaki etiket normal metin eşiklerini kullanır; yalnızca büyük metin kuralı sağlanıyorsa AA büyük yazar.
Kontrast oranı eşikleri
| Seviye | Oran | Kullanım |
|---|---|---|
| AA büyük | 3:1 | Büyük metin ve arayüz parçaları |
| AA | 4.5:1 | Normal gövde metni |
| AAA | 7:1 | Daha yüksek okunabilirlik |
Sık sorulan sorular
Tamamlayıcı renk nedir?
Renk çemberinde ana rengin tam karşısındaki, 180 derece uzaklıktaki renktir. Bu ikili güçlü kontrast verir; arka plandan ayrışması gereken bir harekete geçirici düğmeye uyar.
Bir web sitesi için hangi paleti seçmeliyim?
Sakin bir arayüz için en güvenlisi tek renktir. Analog uyumlu görünür ve biraz çeşitlilik katar. Tamamlayıcı ve üçlü daha cesurdur; bir rengi ana renk yapın, diğerlerini küçük vurgular olarak kullanın.
Yüksek kontrast oranı her zaman gerekli mi?
Metin için evet. Gövde metni arka planına göre 4.5:1'e ulaşmalı. Süs amaçlı şekiller ve büyük başlıklar daha düşük olabilir, ama düğme ve bağlantı içindeki yazılar kurala uymalı.
Üretilen renk neden elle seçtiğimden biraz farklı?
Ana renginiz girdiğiniz gibi korunur. Diğer renkler HSL ile hesaplanıp tam sayı RGB değerlerine yuvarlanır, bu yüzden elle seçilen renkten bir adım farklı olabilir.
Renklerim kaydediliyor mu?
Hayır. Her şey tarayıcınızda hesaplanır. Ana renginizi ve paleti bir URL'de saklamak için Bağlantıyı paylaş'ı kullanın.