Renk Tonu Oluşturucu
Açık tonlar, koyu tonlar ve WCAG kontrast puanlarıyla tam bir renk paleti oluşturun
Renk Tonu Oluşturucu
Kullanım Örnekleri
Açık tonlar (50-200) arka planlar ve ince vurgular için en iyi sonucu verir.
Orta tonlar (400-600) düğmeler, bağlantılar ve birincil öğeler için idealdir.
Koyu tonlar (700-900) başlıklar ve yüksek kontrastlı metinler için mükemmeldir.
Her zaman WCAG kontrastını kontrol edin; normal metin için AA 4,5:1 gerektirir.
Kontrast
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA Büyük: 3:1 (Large text)
- AAA: 7:1 (Normal text)
Özellikler
Tam 50-900 Paleti
Herhangi bir temel renkten eksiksiz bir Tailwind tarzı palet oluşturun
WCAG Kontrastı
Her ton beyaz ve siyah arka planlara karşı kontrast puanlarını gösterir
Çoklu Dışa Aktarma Biçimleri
CSS değişkenleri, SCSS, Tailwind yapılandırması veya JSON olarak kopyalayın
Gizli ve Çevrimdışı
Tamamen tarayıcınızda çalışır, hiçbir sunucuya veri gönderilmez
Nasıl Kullanılır
Temel Renk Seçin
Seçici kullanarak bir renk seçin veya bir HEX, RGB ya da HSL değeri girin.
Paleti İnceleyin
Erişilebilirlik için WCAG kontrast göstergeleriyle oluşturulan tonları görün.
Dışa Aktarın veya Kopyalayın
Tek tek renkleri kopyalayın veya tüm paleti CSS, SCSS, Tailwind ya da JSON olarak dışa aktarın.
Sıkça Sorulan Sorular
Renk Tonu Oluşturucu Nedir?
Renk Tonu Oluşturucu, tek bir temel renkten tam bir açık ve koyu ton yelpazesi oluşturur. Hangi açık veya koyu varyasyonu kullanacağınızı tahmin etmek yerine, düğmeler, arka planlar, kenarlıklar ve metinlerde çalışan tutarlı bir palete sahip olursunuz. Bu araç, popüler Tailwind CSS renk sistemiyle eşleşen 50 (en açık) ile 900 (en koyu) arasında 10 adımlı bir ölçek oluşturur.
Nasıl Çalışır
Oluşturucu, temel renginizi HSL formatına dönüştürür ve 10 eşit dağıtılmış adım oluşturmak için parlaklık değerini ayarlar. Ardından her ton, WCAG 2.1 kontrast formülü kullanılarak beyaz ve siyah arka planlara göre değerlendirilir, böylece hangi renklerin metin için erişilebilir olduğunu anında öğrenirsiniz. Her şey sunucu gidiş dönüşü olmadan tarayıcınızda çalışır.
Yaygın Kullanım Alanları
Tasarımcılar marka paletleri oluşturmak, tasarım belirteçleri üretmek ve bir ürün genelinde görsel tutarlılığı korumak için ton oluşturucuları kullanır. Geliştiriciler, Tailwind yapılandırma girişleri veya CSS özel özellikleri oluşturmak için onları sever. Ayrıca erişilebilirlik denetimleri için de gereklidir ve WCAG AA veya AAA gereksinimlerini karşılayan metin ile arka plan çiftleri seçmenize yardımcı olur.
Gizlilik ve Güvenlik
Bu Renk Tonu Oluşturucu %100 istemci tarafıdır. Tüm renk hesaplamaları JavaScript kullanılarak tarayıcınızda gerçekleşir. Hiçbir renk, palet veya dışa aktarma herhangi bir sunucuya gönderilmez. Hiçbir çerez seçimlerinizi izlemez ve mevcut oturumunuzun ötesinde hiçbir şey saklanmaz. Gizli marka çalışmaları ve kurumsal tasarım sistemleri için güvenlidir.
Web Tasarımı için Renk Teorisi - Tonlar ve WCAG Kontrast Rehberi
Renk teorisi, tonlar, WCAG kontrast standartları ve eksiksiz bir tasarım sistemi paleti oluşturmayı öğrenin.