Renk tonu skalası oluşturucu
Marka renginizden arayüz ve tasarım sistemleri için 11 adımlı, dengeli bir ton skalası üretin. Tonlar algısal olarak eşit aralıklıdır; her tonun üzerinde okunabilir yazı rengi ve kontrast oranı gösterilir.
Ücretsiz · Kayıt gerekmez · Tarayıcıda çalışır
Dosyalarınız sunucuya yüklenmez; tüm işlem tarayıcınızda yapılır.
Nasıl kullanılır?
- Ana renginizi seçin veya HEX kodunu yazın.
- Renge bir ad verin (ör. primary, marka).
- Ana rengin skalada aynen korunup korunmayacağını seçin.
- Tonları tek tek kopyalayın veya CSS, Tailwind, SCSS ya da JSON olarak dışa aktarın.
Öne çıkanlar
- 50'den 950'ye 11 adımlı ton skalası.
- Algısal olarak dengeli tonlar (OKLCH renk uzayı).
- Her ton için WCAG kontrast oranı ve uygun yazı rengi.
- CSS değişkenleri, Tailwind v4/v3, SCSS ve JSON çıktısı.
Sık sorulan sorular
Ton skalası nedir, neden kullanılır?
Ton skalası, bir rengin açıktan koyuya sıralanmış varyasyonlarıdır. Arayüzlerde arka plan, kenarlık, metin ve buton durumları için aynı renk ailesinden tutarlı tonlar kullanmayı sağlar.
50, 500 ve 950 neyi ifade eder?
Bu numaralandırma Tailwind CSS ile yaygınlaşmıştır: 50 en açık, 950 en koyu tondur; ana renk genellikle 500 veya 600 civarına denk gelir.
Tonlar neden OKLCH ile hesaplanıyor?
HSL'de aynı açıklık değerindeki renkler farklı parlaklıkta görünebilir. OKLCH insan algısına göre tasarlandığı için tonlar arasındaki geçiş daha eşit ve doğal olur.
Hangi tonun üzerine beyaz yazı yazabilirim?
Her tonun üzerinde, beyaz ve siyah yazıdan hangisinin daha okunur olduğu ve kontrast oranı gösterilir. Normal metin için 4,5:1 ve üzeri (WCAG AA) önerilir.
Profesyonel bir tasarıma mı ihtiyacınız var?
Sosyal medya tasarımları, reklam görselleri, afiş, logo ve kurumsal kimlik projeleriniz için iletişime geçebilirsiniz.