Tek bir hex değerini Tailwind v4, v3 veya CSS değişkenleri için 50-950 skalasına çevirin.
hsl(332, 82%, 59%) · Renginiz en yakın olduğu basamağa yerleştirilir ve girdiğiniz gibi korunur.
Hex değerini kopyalamak için herhangi bir renge tıklayın.
@theme {
--color-brand-50: #fdf2f7;
--color-brand-100: #fbe5ef;
--color-brand-200: #f6c1da;
--color-brand-300: #f197c2;
--color-brand-400: #ed63a5;
--color-brand-500: #ec4393;
--color-brand-600: #da1a75;
--color-brand-700: #b41862;
--color-brand-800: #931651;
--color-brand-900: #771342;
--color-brand-950: #4e0e2c;
}Renk kutusundan seçin ya da hex değeri yapıştırın. Tüm skala bu rengin etrafında kurulur ve yaklaştırılmak yerine birebir korunur.
Yapılandırmanızda istediğiniz adı kullanın; örneğin brand ya da primary. Bu, token önekiniz olur ve sınıflarınızda brand-500 gibi adlarla karşılaşırsınız.
Tailwind v4 CSS değişkenleriyle theme bloğunu, v3 yapılandırma dosyasındaki colors nesnesini kullanır; düz CSS seçeneği ise Tailwind olmayan projelerde de çalışır.
Çünkü 500 sabit bir yuva değil, bir açıklık değeridir. Zaten açık olan bir renk 300'e, koyu olan 700'e daha yakındır. Açıklığa göre yerleştirmek, renginizi ortaya zorlamak yerine skalayı dengeli tutar.
Evet. Denk geldiği basamak hex'inizi değiştirmeden döndürür ve renk kutularında bir halkayla işaretlenir. Yalnızca diğer basamaklar üretilir.
Tam doygunlukta çok açık veya çok koyu bir ton yapay görünür; gerçek bir palet adımından çok neon bir renge benzer. Uçlarda doygunluğu azaltmak, skalanın tasarlanmış görünmesini sağlayan şeydir.
v4 renkleri bir theme bloğu içinde CSS değişkeni olarak tanımlar, böylece düz CSS'te de çalışırlar. v3 ise yapılandırma dosyasında bir JavaScript nesnesi kullanır. Projenize uyanı seçin.
Evet. CSS değişkenleri seçeneği kök ögede düz özel özellikler verir ve her stil dosyasında kullanılabilir.
Hayır; skala üretmek ve kontrast kontrol etmek ayrı işlerdir. Eşleştirmeyi planladığınız tonları aşağıda bağlantısı olan kontrast denetleyiciden geçirin.
Evet, ancak doygunluğu olmayan bir renk tanımı gereği nötr bir skala üretir. Renk tonlu bir gri için az miktarda doygunluğu olan bir renk seçin; ton skala boyunca taşınır.
Evet, tamamen ücretsiz ve üyeliksiz.
Canlı önizleme ve CSS çıktısı ile HEX, RGB ve HSL formatları arasında renk dönüştürün.
Aracı AçHerhangi bir renk çiftini WCAG AA ve AAA'ya göre kontrol edin, başarısızsa düzeltme önerisi alın.
Aracı AçBir görselin baskın renklerini hex, HSL ve oranlarıyla çıkarın.
Aracı Aç