Renk Çevirici

HEX, RGB, HSL arasında çevir

Önizleme

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

RGB değiştir

HSL değiştir

H (0-360)

S (%)

L (%)

Nasıl çalışır

Renk Çevirici — HEX, RGB, HSL arasında çevir. Tüm işlemler tarayıcında yapılır — yükleme yok, üyelik yok, e-posta gerek yok. Sonsuza dek ücretsiz.

Son güncelleme: 2026-05-06

Editör notu

Bunu en çok tasarım hand-off'larında açıyoruz. Tasarımcı hue, saturation ve lightness üzerinden düşünür — "biraz daha sıcak olsun", "doygunluğu bir tık düşür" der. Geliştirici HEX üzerinden düşünür, çünkü stylesheet'e giren odur. İkisi arasındaki bu kopukluk akıl almaz miktarda Slack mesajına dönüşüyordu. Sonunda HEX, RGB ve HSL'i aynı panelde canlı bir swatch ile yan yana koyduk; çünkü "bu doğru teal mi" sorusunu bitirmenin en hızlı yolu, renge birlikte parmakla işaret etmek.

Tailwind arbitrary-value çıktısı bu kadar kullanılacağını beklemediğimiz parçaydı. Küçük bir kolaylık olsun diye eklendi — bg-[#1F2937]'i tek seferde kopyala — ve sessizce, config'e yazacak kadar değerli olmayan tek seferlik tonları gönderme yöntemimiz oldu. Hazır palet özelliği eklemeye direndik. Palet kürasyonu kendi başına bir tasarım problemidir ve bu araç onun çözüldüğü yer değil; burada sadece zaten seçtiğin rengi çeviriyoruz.

Renk Çevirici hakkında

Renk Dönüştürücü; herhangi bir renk değerini HEX, RGB ve HSL gösterimleri arasında çevirir ve sonucu yan yana önizler. Ayrıca className'e direkt bırakabileceğin Tailwind "arbitrary value" string'i çıkarır. HEX RGB dönüştürme front-end işinin en sık tekrar eden işi — bu araç hesap makinesi adımını ortadan kaldırır.

Tasarımcılar Figma dosyasından marka rengini CSS'e çevirmek, geliştiriciler beklenmedik tonu debug etmek, erişilebilirlik denetçileri HSL'de açıklığı oynayarak rengin doğru okunduğunu doğrulamak için kullanır.

Her şey tarayıcında gerçekleşir. Paletin, marka renklerin ve prototiplerin uzak sunucuya hiçbir zaman ulaşmaz.

Renk Çevirici nasıl kullanılır

Renk swatch'ına tıklayıp işletim sistemi renk seçicisini aç ya da HEX değerini doğrudan yaz.
RGB sayı girişleriyle kırmızı, yeşil ve mavi kanalları (her biri 0-255) hassas şekilde ayarla.
Biraz daha koyu veya daha sıcak bir varyant istediğinde HSL editörüne geç ve hue (0-360), saturation, lightness değerlerini değiştir.
Önizleme panelinde rengin gerçek boyutta nasıl göründüğünü anında izle.
HEX, RGB, HSL veya Tailwind arbitrary value'nun yanındaki kopyala butonlarıyla doğrudan panoya gönder.

Yaygın kullanım senaryoları

Tasarımcının HEX olarak verdiği marka rengini, CSS-in-JS çözümünün beklediği rgb() formatına çevirmek.
Tarayıcıdan çıkmadan bg-[#1f2937] gibi Tailwind arbitrary class string'leri üretmek.
Buton hover state'ini hue'yu sabit tutarken HSL'de lightness'ı oynayarak ince ayarlamak.
Bir paydaşın e-postada gönderdiği hex kodunun gerçekten kafalarındaki renk olduğunu doğrulamak.
Açık bir rengin HSL'sini okuyup lightness'ı düşürerek dark-mode varyantı üretmek.

İpuçları ve dikkat edilmesi gerekenler

Parlaklık ve doygunluğu ayarlarken HSL, RGB'den çok daha sezgiseldir — "birazcık daha koyu mavi" istediğinde HSL'i düzenle.
Hex kodları 3 veya 6 basamaklı olabilir. 3 basamaklı form (#abc) #aabbcc'ye genişler — yani #f00 ve #ff0000 aynıdır.
Figma'dan yapıştırırken sondaki alpha byte'larına dikkat (örn. #1f2937FF). Tooling'in opak hex bekliyorsa alpha'yı kırp.
Erişilebilirlik için iki HSL değeri üretip lightness farklarını kıyasla — body metni için en az %50 L farkı güvenli bir kuraldır.

Sıkça sorulan sorular

Hangi renk uzayları destekleniyor?

HEX, RGB ve HSL. Class isimlerine direkt yapıştırabileceğin Tailwind 'arbitrary value' formatı da çıkıyor.

Palet kaydedebilir miyim?

Henüz değil. Şimdilik kopyala butonlarıyla her değeri panoya gönder. Palet kaydetme roadmap'te.

Alpha channel destekleniyor mu?

Şu an hayır. Opak renklere odaklanıyoruz; HEX-A ve RGBA desteği planlandı.

RGB(255, 0, 0) ve HSL(0, 100%, 50%) neden aynı rengi üretiyor?

Aynı renk uzayı noktasını farklı eksenlerden tanımlıyorlar. RGB ışık primary'lerinin karışım oranını, HSL ise hue/saturation/lightness'ı tarif eder. İkisi de saf kırmızıya götürür.

"crimson" veya "rebeccapurple" gibi renk ismi yapıştırabilir miyim?

Doğrudan değil. Tarayıcılar ~140 CSS adlı rengi belirli hex değerlerine eşler — editöründe ismi arat ve hex karşılığını buraya yapıştır.

Tailwind arbitrary value çıktısı nasıl görünür?

[#1F2937] gibi. Bunu istediğin Tailwind class'ına sar: text-[#1F2937], bg-[#1F2937] veya border-[#1F2937] — tailwind.config.js'i genişletmeden tam o rengi kullanırsın.