Color Lab: Renk paleti oluşturucu ve kontrast denetleyici
YeniTek renkten palet kurun, kontrastı WCAG'a göre test edin ve kullanıma hazır tasarım tokenları alın.
- RGB
- rgb(13 148 136)
- HSL
- hsl(175 84% 32%)
Uyum
#0d9444#0d9488#0d5d94Ton ve gölge skalası
#dafcf9#c2faf5#92f5ed#55f0e2#14e3d0#0d9488#0b7a70#085e56#06443e#042a27Kontrast denetleyici
WCAG 2.1, gövde metni için en az 4,5 ve büyük metin için en az 3 oran ister. AAA seviyesi bunları 7 ve 4,5'e çıkarır.
Büyük başlık örneği
Gövde metni örneği — kullanıcılarınızın gerçekten okuduğu boyut olduğu için daha katı kurala tabidir.
Dışa aktar
Paleti doğrudan projenize taşıyın: özel CSS özellikleri, Tailwind yapılandırması, düz JSON veya SVG sayfası.
:root {
--brand-1: #0d9444;
--brand-2: #0d9488;
--brand-3: #0d5d94;
}Tek renkten kullanılabilir bir sisteme
Palet kurmak ve erişilebilirliği ölçmek aynı ekranda; güzel görünen bir renk üretime çıkmadan kontrast kuralını da geçsin.
Altı uyum kuralı
Ana renginizden türeyen tamamlayıcı, komşu, üçlü, ayrık tamamlayıcı, dörtlü ve tek renk kümeleri.
10 adımlı skala
Ana rengi 500 adımında tutan, açık ve koyu girdilerde yön değiştirmeyen 50–900 ton skalası.
WCAG AA ve AAA
WCAG 2.1 parlaklık formülüyle canlı kontrast oranı; gövde metni ve büyük metin için ayrı sonuç.
Canlı örnek
Bir sayıyı tek başına yorumlamak yerine seçtiğiniz renklerde başlık ve paragraf görün.
Her tonu kopyala
Her kutu kendi hex değerini kopyalar ve hangi skala adımına ait olduğunu etiketinde gösterir.
Dört dışa aktarma biçimi
CSS özel özellikleri, Tailwind renk yapılandırması, JSON token'ları veya teslim dokümanı için SVG sayfası.
Renk ve kontrast hakkında sorular
Hangi kontrast oranına ihtiyacım var?
WCAG 2.1 AA seviyesi gövde metni için 4,5:1, 18pt veya 14pt kalın metin için 3:1 ister. AAA seviyesi bunları 7:1 ve 4,5:1'e çıkarır. Bu denetleyici iki sonucu birlikte gösterir.
Color Lab ücretsiz mi, çevrimdışı çalışır mı?
Evet. Color Lab ücretsizdir; hesap, kayıt veya kullanım sınırı yoktur. Tamamen tarayıcınızda çalıştığı için sayfayı bir kez internete bağlıyken açtıktan sonra bağlantı olmadan da çalışmaya devam eder.
Kontrast geçtiyse tasarımım erişilebilir mi?
Yalnızca metin kontrastı kuralını karşıladığı anlamına gelir. Erişilebilirlik ayrıca yazı boyutu, odak durumları, hareket ve anlamı tek başına renkle taşımamaya da bağlıdır.
Ton skalası nasıl hesaplanıyor?
Ana renginizin tonu ve doygunluğu korunur, parlaklık açık adımlarda %96'ya, koyu adımlarda %4'e doğru ara değerlenir. Ana renk 500 adımında durur; beyaza veya siyaha çok yakın bir ana renkte uçlar otomatik genişler, böylece skala yön değiştirmez.
Dışa aktardığım paleti ticari projede kullanabilir miyim?
Evet. Renk değerleri telif hakkına konu değildir ve çıktı sizindir. Yalnızca markanızın logosu ve işaretleri kendi kısıtlarını taşır.
Marka rengim beyaz üzerinde neden başarısız oluyor?
Orta parlaklıktaki doygun renkler — çoğu turkuaz, yeşil ve turuncu — beyaz üzerinde genellikle 3:1 ile 4,5:1 arasında kalır. Metin için skalanın daha koyu adımını kullanın, parlak adımı büyük yüzeylere ve dolgulara bırakın.
Sonraki adım
Bu Lab’dan hemen sonra en çok kullanılan Lab’lar.