HEX, RGB ve HSL Renk Kodları Arasındaki Farklar ve Dönüşüm

Web tasarımda aynı rengi üç farklı şekilde ifade edebilirsiniz: HEX, RGB ve HSL. Hepsi aynı rengi tarif eder; fark, yazım biçiminde ve kullanım kolaylığındadır.

HEX

#4f46e5 biçiminde yazılır. Her iki hane sırayla kırmızı, yeşil ve mavi değerlerini onaltılık sistemde gösterir. Kısa, yaygın ve kopyalaması kolaydır.

RGB

rgb(79, 70, 229) biçiminde yazılır. Her kanal 0 ile 255 arasındadır. Yukarıdaki HEX ile aynı renktir: 4f = 79, 46 = 70, e5 = 229.

HSL

hsl(243, 75%, 59%) biçiminde yazılır:

• H (Hue / renk tonu): 0–360 derece renk çemberi
• S (Saturation / doygunluk): 0–100%
• L (Lightness / açıklık): 0–100%

HSL’nin avantajı, tonu sabit tutup açıklığı değiştirerek uyumlu açık ve koyu varyasyonlar üretmenin kolay olmasıdır.

Hangisini ne zaman kullanmalı?

Kontrast ve erişilebilirlik

Metin ile zemin arasındaki kontrast oranı, WCAG erişilebilirlik yönergelerine göre normal metinde en az 4,5:1 olmalıdır. Açık gri metni beyaz zeminde kullanmak sık yapılan bir hatadır.

Günlük işlerde işinize yarayacak diğer araçlar için araçlar sayfasına göz atabilirsiniz.