1. Ana sayfa
  3. Tasarım
  5. Renk Skalası Oluşturucu (50–950)

Renk Skalası Oluşturucu (50–950)

Tek bir temel rengi CSS değişkenleri ve yapılandırma çıktısıyla Tailwind tarzı 50–950 ton skalasına dönüştürün.

Tarayıcınızda çalışır Ücretsiz
Tarayıcınızda yerel olarak işlenir.

Marka renginizden eksiksiz bir skala

Tasarım sistemleri ve Tailwind CSS gibi çerçeveler her rengi açıktan koyuya 50, 100, 200 ... 900, 950 tonlarıyla tanımlar. Bu tonlar arka planlar, kenarlıklar, metinler ve hover durumları için tutarlı seçenekler sunar. Renk Skalası Oluşturucu, tek bir temel renkten bu skalanın tamamını üretir.

Algısal olarak eşit tonlar

Tonlar OKLCH algısal renk uzayında hesaplanır. Bu sayede açıklık adımları göze eşit görünür ve renk tonu (hue) skalanın tamamında sabit kalır; HSL tabanlı yöntemlerde görülen kirli ara tonlar oluşmaz. sRGB gamı dışında kalan renkler geçerli değerlere ayarlanır.

Çıktılar

  • CSS özel değişkenleri (--brand-500 gibi)
  • Tailwind yapılandırma nesnesi
  • Her tonun HEX değeri

İsterseniz temel renginiz skalada olduğu gibi korunur.

Renk Skalası Oluşturucu (50–950) nasıl kullanılır?

  1. Temel marka renginizi seçin veya HEX kodunu girin.
  2. Temel rengin korunup korunmayacağını belirleyin.
  3. Oluşan 50–950 skalasını inceleyin.
  4. CSS değişkenlerini veya Tailwind yapılandırmasını kopyalayın.

Neden bu aracı kullanmalısınız?

Tasarım sistemleri için tutarlı ve profesyonel renk tonlarını dakikalar yerine saniyelerde üretir.

Sıkça sorulan sorular

Kendi temel rengim skalada yer alır mı?

Evet. 'Temel rengi olduğu gibi koru' seçeneği açıkken, açıklığı en yakın olan adımın yerine geçer.

OKLCH neden HSL'den daha iyi?

OKLCH insan algısına göre tasarlandığı için aynı açıklık değerindeki farklı renkler gerçekten eşit parlaklıkta görünür.

Koyu tema için hangi tonları kullanmalıyım?

Koyu temada genellikle arka planlar için 900–950, metinler için 100–200 tonları tercih edilir.

İlgili araçlar

Gizli

Renk Paleti Oluşturucu

Uyumlu 5–8 renklik paletler üretin: rastgele, tamamlayıcı, analog, monokromatik veya üçlü.

Aracı aç
Gizli

WCAG Kontrast Kontrolü

Metin ve arka plan renklerinin kontrast oranını WCAG AA ve AAA'ya göre kontrol edin.

Aracı aç
Gizli

Renk Kodu Dönüştürücü

Renkleri HEX, RGB ve HSL arasında canlı önizlemeyle dönüştürün; alfa kanalı desteklenir.

Aracı aç
Gizli

Rastgele Renk Üretici

HEX, RGB ve HSL biçiminde rastgele renkler üretin; tek tek veya 50 adede kadar, pastel, canlı veya koyu.

Aracı aç