Renk Dönüştürücü
Bir rengi HEX, RGB, HSL ve HSV arasında dönüştürün; siyaha ve beyaza karşı kontrastıyla birlikte.
Tamamen tarayıcınızda çalışır. Hiçbir şey yüklenmez, günlüğe yazılmaz veya saklanmaz.
Onaltılık
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Göreli parlaklık
- 0,2830
- Beyaz üzerinde kontrast
- 3,15:1
- Siyah üzerinde kontrast
- 6,66:1
HEX, RGB, HSL ve HSV aynı sRGB rengini yazmanın dört yoludur. Hangisinin rahat olduğu ne yaptığınıza bağlıdır: bir tasarımdan değer kopyalamak için onaltılık, tonu değiştirmeden bir şeyi biraz açmak için HSL.
Nasıl çalışır
Girdi, sekiz bitlik kırmızı, yeşil ve mavi kanallara artı bir alfaya okunur ve tüm çıktılar bu kanallardan hesaplanır. Hiçbir şey başka bir çıktıdan dönüştürülmez; dolayısıyla bir değer bir yuvarlama zinciri boyunca kayamaz.
Kontrast değerleri WCAG 2.1’i izler: her kanal doğrusallaştırılır, göze ne kadar katkı yaptığına göre ağırlıklandırılır ve oran, (açık olan + 0,05) bölü (koyu olan + 0,05) olur. Ölçek, iki aynı renk için 1’den beyaz üzerinde siyah için 21’e kadar gider.
Örnekler
| Durum | Girdi | Sonuç |
|---|---|---|
| Bir tasarım dosyasından onaltılık değer | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| Her basamağı tekrarlayan kısa biçim | #39d | #3399DD, not #039D |
| Saydamlıkla | rgb(52 152 219 / 0.5) | #3498DB80 |
Sık sorulan sorular
4,5 kontrast metnimin uygun olduğu anlamına mı geliyor?
Metne bağlıdır; bir karar yerine sayının verilmesinin nedeni budur. WCAG normal metin için 4,5, büyük metin için 3 ister; burada büyük, en az 18 punto ya da kalın yazıda 14 punto demektir. Yalnızca iki renk gören bir araç hangi kuralın geçerli olduğunu bilemez.
HSL’ye dönüştürüp geri dönünce neden bazen bir basamak değişiyor?
Çünkü onaltılık gösterimde kanal başına 256 adım vardır ve HSL bunlara tam olarak bölünmez. Gidiş-dönüş bir adım öteye düşebilir. Burada tüm gösterimler özgün kanallardan hesaplanır; dolayısıyla gösterilen değerler her zaman yazdığınıza en yakın olanlardır.
HSL ile HSV arasındaki fark nedir?
Tonu paylaşırlar, gerisinde anlaşamazlar. HSL’de %100 açıklık beyazdır, %50 ise saf renktir. HSV’de %100 değer saf renktir ve beyaz yalnızca doygunluk sıfıra indiğinde ortaya çıkar. Tasarım araçları genellikle HSV gösterir; CSS ise HSL konuşur.
“rebeccapurple” gibi adlandırılmış renkler destekleniyor mu?
Hayır. CSS anahtar kelime listesi, aritmetiğe değil spesifikasyona ait yaklaşık 150 adlık bir tablodur ve bu araç ad aramak yerine gösterimler arasında dönüştürme yapar.
Bilmekte fayda var
- Buradaki her şey sRGB’dir; web’in her zaman varsaydığı renk uzayı. CSS Color 4’ün eklediği daha geniş uzaylar (lab, oklch, display-p3) sRGB’nin ulaşamadığı renkleri tanımlar ve bunlara dönüştürmek, dışarıda kalanlarla ne yapılacağına dair bir karar gerektirir. Bu karar burada verilmez.
- Kontrast değerleri karar değil, sayıdır. Bir çiftin uygun olup olmadığı metnin boyutuna ve kalınlığına bağlıdır; tek başına bir renk bunu bilemez.