DevToolPal
TR

Renk Dönüştürücü (HEX, RGB, HSL)

Renkleri HEX, RGB, HSL, HSV ve CMYK arasında dönüştürün; canlı önizleme ve beyaz ile siyaha karşı kontrast oranıyla.

Yerelde çalışır, asla yüklenmez

Seçenekler

Renk

Sonuç

Sonuç burada görünür

Ne işe yarar

Renk dönüştürücü, yaygın CSS gösterimlerinden herhangi birindeki bir rengi alır ve aynı anda diğer tüm gösterimlerde gösterir: HEX, RGB, HSL, HSV ve CMYK. Ayrıca bir önizleme örneği, tam eşleşme varsa CSS renk adını ve okunabilirliği kontrol edebilmeniz için beyaz ve siyaha karşı kontrast oranını da gösterir.

Nasıl kullanılır

  1. Renk kutusuna bir renk yazın veya yapıştırın ya da yanındaki renk seçiciyi kullanın.
  2. Siz yazarken tüm gösterimler güncellenir. İhtiyacınız olanın yanındaki Kopyala düğmesine tıklayın.
  3. Stil rehberiniz hex değerlerini büyük harfle yazıyorsa Büyük harf hex seçeneğini açın.
  4. Rengi metin için kullanmadan önce kontrast satırlarını kontrol edin: yeşil rozet, WCAG AA’yı geçtiği anlamına gelir.

Örnek

#1e90ff, CSS’teki dodgerblue rengidir. Şu değerlere dönüşür:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Beyaz üzerindeki kontrastı 3.24:1’dir; bu, büyük başlıklar için yeterli ama gövde metni için yetersizdir.

Kısaca renk modelleri

  • HEX ve RGB, bir ekranın ne kadar kırmızı, yeşil ve mavi ışık yaydığını tanımlar. Tarayıcıların ve tasarım araçlarının dahili olarak kullandığı modeldir.
  • HSL, tonu (renk çemberindeki açı), doygunluğu ve açıklığı tanımlar; bu da aynı rengin daha açık veya daha koyu tonlarını oluşturmayı kolaylaştırır.
  • HSV (HSB olarak da bilinir), tasarım yazılımlarındaki renk seçicilerin çoğunda kullanılır.
  • CMYK, baskı için camgöbeği, eflatun, sarı ve siyah mürekkebi tanımlar.

#1e90ff80 veya rgb(30 144 255 / 50%) gibi saydamlık içeren renkler HEX, RGB ve HSL’de alfa kanalıyla gösterilir.

SSS

› HEX'i RGB'ye nasıl dönüştürürüm?

Altı onaltılık basamağı üç çifte ayırın ve her çifti 0 ile 255 arasında bir sayı olarak okuyun. #1e90ff için bu 1e = 30, 90 = 144 ve ff = 255 eder, yani rgb(30, 144, 255). Bu araç siz yazarken bunu sizin yerinize yapar.

› Hangi biçimleri yapıştırabilirim?

# işaretli veya işaretsiz hex (3, 4, 6 veya 8 basamak), rgb() ve rgba(), virgüllü ve boşluklu sözdizimiyle hsl() ve hsla(), yüzdeler, deg ve turn gibi açı birimleri ve 148 CSS renk adının tamamı.

› Kontrast oranı ne anlama geliyor?

Rengin beyaz veya siyah bir arka plana karşı WCAG 2 kontrastıdır. Gövde metni AA düzeyi için en az 4.5:1 gerektirir; büyük metin (yaklaşık 24px veya kalın 19px) için 3:1 yeterlidir.

› CMYK neden yalnızca yaklaşık bir değer?

Matbaalar kâğıda ve baskı makinesine bağlı mürekkep profilleri kullanır. Burada gösterilen CMYK, cihazdan bağımsız standart formüldür; iyi bir başlangıç noktasıdır ancak bir baskı profilinin yerini tutmaz.