Renk Dönüştürücü

Herhangi bir rengi hex, RGB, HSL ve OKLCH arasında dönüştür. Canlı önizleme, tek tıkla kopyala.

Hex

RGB

HSL

OKLCH

Picker

Sonuç

Bu ne işe yarar?

Tasarımcılar ve front-end geliştiriciler renkleri sürekli biçimler arasında karıştırır — Figma sana hex verir, design tokens spec OKLCH ister, CSS'in HSL kullanır ve aldığın görsel RGB'dir. Bu araç her notasyonu eş zamanlı tutar: birini düzenle, diğerleri canlı güncellenir. CSS Color Module 4'te eklenen ve HSL'den çok daha kolay akıl yürütülen perceptually uniform renkler üreten modern oklch() biçimini içerir.

Ne zaman kullanılır

Bir marka hex kodunu CSS overlay için alfalı rgb()'ye çevirme.
Bir tasarım sistemini perceptual renge geçirirken HSL ile OKLCH arasında dönüştürme.
Bir screenshot aracından yapıştırılmış rgb(52, 152, 219)'ü stylesheet'in için hex koduna geri okuma.
Bir OKLCH chroma değerinin sanity check'i (~0,4 üzerindeki her şey muhtemelen sRGB gamut dışıdır).

Biçim hızlı referansı

Hex — #RRGGBB (veya 3 basamak kısaltma #RGB). Evrensel, 8 basamak (#RRGGBBAA) olmadıkça alfa yok.
RGB — rgb(0–255, 0–255, 0–255). Ekranının aldığı gerçek sRGB kanal değerleri.
HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Renk aileleri hakkında akıl yürütmesi kolay ama lightness perceptual değil: HSL 50% yeşil HSL 50% maviden daha parlak görünür.
OKLCH — perceptual lightness (0–1), chroma (sRGB'de 0–~0,4), hue (0–360°). Aynı L'ye sahip iki renk eşit parlaklıkta görünür; tasarım sistemleri ve erişilebilirlik için idealdir.

Sık yapılan hatalar

OKLCH lightness 0–100 değil 0–1 kullanır. CSS ikisini de kabul eder (0.65 veya 65%); bu araç her formu kabul eder.
Bazı OKLCH değerleri sRGB dışına düşer (örn. mavi için yüksek chroma). Araç dönüşümde gösterilebilir sRGB'ye clamp eder — sonuç yaklaşıktır, kesin değil.
HSL HSV ile aynı değildir. HSV'nin "value"'su en parlak kanaldır; HSL'nin "lightness"'i en parlak ve en karanlığın orta noktasıdır. Aynı renk için farklı sayılar verirler.
Round-trip her zaman kayıpsız değildir. hex → hsl → hex yuvarlamadan tek bir tamsayı kaydırabilir. Tam reprodüksiyon için hex'i sakla.
Hex ve RGB varsayılan olarak sRGB'dir, Display P3 veya Rec. 2020 değil. Tasarım aracın geniş gamut profildeyse aynı hex farklı görünür.