Tasarım / Renk

Tailwind Renk Skalası Oluşturucu

Tek bir marka rengini, Tailwind'in kendi renkleri gibi OKLCH ile oluşturulan 50–950 arası eksiksiz bir Tailwind CSS paletine dönüştürün; Tailwind 4 tema CSS'i, Tailwind 3 yapılandırması veya CSS değişkenleri olarak kopyalayın.

Tailwind Renk Skalası Oluşturucu: Her ton, OKLCH renk uzayında ölçülen ve Tailwind'in kendi paletlerinde o adımdaki açıklık, krom ve hafif renk tonu kaymasını alır; ardından renginizin seçtiğiniz tona tam olarak oturması için bunlar kaydırılır. Gri renkler bunun yerine Tailwind'in gri ailelerini izler. sRGB gamının gösteremediği renkler, tarayıcıların kullandığı CSS Color 4 gamut eşleme yöntemiyle uygun aralığa getirilir; Tailwind 4 çıktısı OKLCH değerlerini korur, diğer biçimlerde hex kullanılır. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Günlük araçlar
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
Tailwind renk ölçeği oluşturucuYerel işleme

Tamamen tarayıcınızda çalışır

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

Tonlar, OKLCH ile ölçülen Tailwind'in kendi paletlerindeki açıklık, kroma ve renk tonu değişimini izler; bu nedenle Tailwind'in blue-500 renginden oluşturulan bir ölçek, Tailwind'in mavisinden yalnızca birkaç farkla ayırt edilebilir. sRGB aralığı dışındaki renkler, CSS Color 4 gamut eşleme yöntemiyle aralığa dahil edilir.

Ölçeği kullanma

Yaygın bir düzenlemede sayfa ve kart arka planları için 50–100, kenarlıklar için 200–300, düğmeler ve bağlantılar için 500–600, üzerine gelme durumları için 700, açık arka planlardaki metin için 800–950 kullanılır. Metin ve arka plan çiftlerini renk kontrastı kontrol aracıyla kontrol edin.

Tek bir rengi hex, RGB, HSL ve OKLCH arasında dönüştürmek için renk dönüştürücüyü, fotoğrafla başlamak için renk paleti çıkarıcıyı kullanın.

Tailwind 4 ve OKLCH

Tailwind CSS 4, geniş renk gamına sahip ekranlarda sRGB'nin ötesindeki renkleri tanımlayabilen OKLCH ile renklerini belirler. Buradaki Tailwind 4 çıktısı sRGB sınırları içinde kalır; bu nedenle renkler her ekranda aynı görünür.

Nasıl kullanılır?

  1. Rengin önizlemesini seçin veya hex kodunu yapıştırın.
  2. Rengin hangi ton olması gerektiğini (genellikle 500) seçin ya da oluşturucunun konumlandırmasına izin verin.
  3. Tailwind 4, Tailwind 3 veya düz CSS değişkenleri için kodu kopyalayın.

Gizlilik ve sınırlamalar

Her şey tarayıcıda oluşturulur.

İlgili araçlar

Renk DönüştürücüKontrast Kontrol AracıPalet Çıkarıcı

Sık sorulan sorular

Neden OKLCH?

OKLCH açıklığındaki eşit adımlar, her renk tonu boyunca göze eşit adımlar gibi görünür. Böylece aynı yöntemle oluşturulan sarı ve mavi skalaları kontrast açısından eşleşir; HSL bunu sağlayamaz.

Marka rengim hangi ton olmalı?

Genellikle Tailwind'in en güçlü renklerini kullandığı 500 veya 600 tercih edilir. Pastel gibi çok açık bir renk 200 veya 300'e daha iyi uyar; açıklığına göre konumlandırmak için Otomatik'i seçin.

Bu tonların üzerinde metin okunabilir mi?

Genellikle beyaz metin için 600 veya daha koyu, koyu metin için 400 veya daha açık tonlar gerekir; ancak her çifti bir kontrast kontrol aracıyla denetleyin.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez