# Tailwind Renk ve Class Çevirici

> HEX rengini Tailwind sınıfına çevir veya v4.1 renk sınıfının CSS değerini ücretsiz gör. Hazır kodu kopyala.

- Kategori: [Geliştirici Araçları](https://toolbrio.com/kategori/gelistirici/index.md)
- Alt kategori: Renk ve CSS
- Son güncelleme: 2026-09-30
- Etkileşimli araç: [https://toolbrio.com/tailwind-renk-cevirici/](https://toolbrio.com/tailwind-renk-cevirici/)

HEX modunda #3b82f6 gibi bir değer girip arka plan, yazı, kenarlık veya ring seçin. Araç rengi değiştirmeden bg-[#3b82f6] biçiminde bir sınıf üretir. Paletteki benzer bir renge yaklaşık eşleştirme yapılmaz. Üç ve dört haneli kısaltmalar tam biçime genişletilir.

## Sınıftan CSS değeri

Sınıf modunda bg-blue-500 veya hover:text-red-600/50 gibi bir değer girin. Tailwind CSS 4.1.0 varsayılan paletindeki renk değeri gösterilir. Bu sürüm renkleri OKLCH biçiminde tanımlar; gereksiz RGB yuvarlaması yapılmadan aynı değer korunur. black ve white de desteklenir.

## Opaklık ve varyant

Sonda /50 gibi yüzde opaklık varsa renk CSS color-mix ifadesiyle gösterilir. 0 ile 100 arasında tam sayı kabul edilir. hover, dark veya md gibi iki nokta ile ayrılan varyantlar ayrıca listelenir. Araç bu varyantların tam CSS seçicisini veya medya kuralını derlemez.

## Desteklenmeyen sınıflar

Özel tema renkleri, CSS değişkenli arbitrary değerler, dinamik sınıf birleştirme ve bütün Tailwind yardımcı sınıfları bu aracın kapsamı değildir. bg-brand-500 özel temanızda var olsa bile varsayılan palette bulunmadığı için sonuç vermez. Bu bir Tailwind derleyicisi değildir.

## Kaynak ve kullanım

Yerel renk listesi [Tailwind CSS 4.1.0 tema dosyasından](https://github.com/tailwindlabs/tailwindcss/blob/v4.1.0/packages/tailwindcss/theme.css) alınmıştır; MIT lisansı palet dosyasında korunur. [Tailwind renk belgeleri](https://tailwindcss.com/docs/colors) renk kullanımını açıklar. Kod üretimi cihazınızda yapılır. Üretilen sınıfın projenizde derlenebilmesi için Tailwind kaynak taramasına dahil edilmesi gerekir.