Tailwind CSS Renk Bulucu Herhangi bir HEX koduna en yakın Tailwind CSS renk sınıfını bulun.

🎨

Tailwind Renk Bulucu

Herhangi bir HEX koduna en yakın Tailwind CSS renk sınıfını bulun.

Renk Girin

Bir HEX kodunu yazın veya renk seçiciyi kullanın.

Eşleşmeleri Görüntüle

Uzaklığa göre sıralanmış en yakın 10 Tailwind CSS rengini görün.

Sınıf Adını Kopyala

Projeniz için Tailwind renk sınıf adını (örneğin, blue-500) kopyalayın.

Loading tool...

What Is Tailwind Renk Bulucu?

Tailwind CSS Renk Bulucu, herhangi bir HEX rengini Tailwind CSS'in varsayılan paletindeki en yakın renge eşler. Tailwind, her biri 11 gölgeli (50-950) olan 22 renk ailesi (slate, gri, çinko, kırmızı, turuncu vb.) içerir ve toplamda 242 önceden tanımlanmış renk bulunur. Bu araç, girdiğiniz rengin RGB Euclidean uzaklığını Tailwind'in her rengiyle hesaplar ve en yakın 10 eşleştirmeyi sıralar. Tasarımları Tailwind'e geçiren, marka renklerini Tailwind sınıflarına eşleyen veya tasarım belirtimine uygun olan doğru Tailwind yardımcı sınıfını bulan geliştiriciler için çok değerlidir. Her eşleşme, görsel bir örnek, Tailwind sınıf adı (örneğin, mavi-500), gerçek HEX değeri ve eşleşme kalitesini yargılayabilmeniz için uzaklık ölçütü gösterir.

Why Use Tailwind Renk Bulucu?

Tüm 242 varsayılan Tailwind palet rengini en yakın eşleşme için arar
Giriş ve Tailwind rengi arasındaki yan yana görsel karşılaştırma
Kodu kullanmak için tam Tailwind sınıf adını gösterir
Mesafe ölçütü, eşleşme kalitesini yargılamak için yardımcı olur
En iyi uyumu seçmek için ilk 10 sonuç

Common Use Cases

Tasarım'dan Tailwind'e

Figma/Sketch tasarım renklerini en yakın Tailwind yardımcı sınıflarına dönüştürün.

Marka Entegrasyonu

Hızlı prototipleme için marka kılavuzlarına en yakın Tailwind renklerini bulun.

Eski Sürüm Geçişi

Mevcut CSS renklerini, çerçeve geçişi sırasında Tailwind eşdeğerlerine haritalayın.

Renk Keşfi

Sürekli yardımcı-önceki stillendirme için beğendiğiniz bir renge benzer Tailwind renklerini keşfedin.

Technical Guide

Bulucu, RGB renk uzayında Euclidean uzaklığını hesaplar: D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) girdi rengi ve Tailwind'in varsayılan paletindeki 242 rengin her biri arasında. Sonuçlar artan uzaklığa göre sıralanır. 0 uzaklığı, tam bir eşleşme anlamına gelir. 20'nin altında olan uzaklıklar çok yakın eşleşmeleri gösterir; 50'nin üzeri ise belirgin bir farkı gösterir. Tailwind paleti, her biri 11 gölgeli (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) olan 22 renk ailesine organize edilmiştir. Her ailenin "temel" rengi genellikle 500 gölgelidir. Tailwind 3.x renkleri, algısal uniformiteye dikkat ederek tasarlanmıştır, yani eşit gölge adımları (örneğin, 400'den 500'e) tüm renk aileleri boyunca yaklaşık olarak eşit görsel parlaklık farklılıkları üretir.

Tips & Best Practices

1
10'un altında bir mesafe, Tailwind renginin girişinizden几乎 ayırt edilemeyeceğini gösterir
2
En yakın eşleşme büyük bir mesafeye sahipse,Tailwind'i özel bir renk ile genişletmeyi düşünün
3
Sınıf adı formatı "renkAdı-gölge" şeklindedir (örneğin, bg-blue-500, text-red-600)
4
Tailwind 500-gölge renkleri "standart" yoğunluktadır - daha açık 50-400, daha koyu 600-950
5
tailwind.config.js'de tema.extend.renkler ile Tailwind paletini özel renklerle genişletebilirsiniz

Related Tools

HEX'ten RGB'ye Dönüştürücü

HEX renk kodlarını anında RGB değerlerine dönüştürün ve canlı önizleme swatch'i ile birlikte kullanın.

🎨 Color Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Marka Renk Paletleri

50'den fazla popüler marka ve teknoloji şirketinin resmi renk paletlerini keşfedin.

🎨 Color Tools

Material Tasarım Renkleri

Tüm gölgeleri ve vurgulamaları ile Material Design renk paletini keşfedin.

🎨 Color Tools

Renkleri CSS Değişkenlerine Dönüştür

Bir dizi rengi CSS özel özelliklerine (değişkenlere) dönüştürün.

🎨 Color Tools

Frequently Asked Questions

Q Hiçbir Tailwind rengi yeterince yakın değilse ne olur?

En yakın eşleşme yüksek bir mesafeye sahipse, tam olarak aynı renginizi tailwind.config.js'deki tema.extend.renkler'e ekleyin. Bu, marka renkleri için yaygındır.

Q Bu, Tailwind v4 ile çalışır mı?

Varsayılan Tailwind paleti, sürümler boyunca tutarlı olmuştur. Temel renk aileleri ve gölge yapısı, Tailwind v3 ve v4'te aynı kalır.

Q İyi bir eşleşme için ne tür bir mesafe kabul edilir?

10'un altında mükemmeldir (hemen hemen fark edilemeyecek kadar küçük bir fark). 10-30 iyi (küçük bir fark), 30-50 kabul edilebilir. 50'nin üzerinde ise özel bir renk düşünmelisiniz.

About This Tool

Tailwind Renk Bulucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.