HEX, RGB, HSL: Renk Kodları Arasındaki Fark

Aynı rengi üç farklı şekilde yazmanın arkasındaki mantık.

Özet

HEX, tasarım dosyalarında ve CSS'te en sık görülen kısa gösterimdir. RGB, rengi kırmızı-yeşil-mavi oranlarıyla anlatır ve genellikle şeffaflık eklemek için tercih edilir. HSL ise rengi ton, doygunluk ve parlaklık olarak tanımlar; bir rengi elle ayarlamak için en sezgisel olanıdır.

Adım adım

Bir tasarımdan aldığınız rengin kodunu (HEX, RGB veya HSL) bir dönüştürme aracına girin.
CSS'te şeffaflık eklemeniz gerekiyorsa RGB veya HSL formatını, gerekmiyorsa HEX'i tercih edin.
Bir rengi biraz daha açık veya koyu yapmak istediğinizde HSL'deki parlaklık değerini oynatın.
Marka renklerinizi her üç formatta not alarak farklı araçlarda tutarlı kullanın.

Neden önemli?

Bir marka rengi tasarım programında, web sitesinde, sunumda ve sosyal medya görsellerinde kullanılır. Her araç rengi farklı bir biçimde isteyebilir. Kodu bir biçimden diğerine elle ya da tahminle çevirdiğinizde küçük sapmalar oluşur ve zamanla "bizim mavimiz" her yerde biraz farklı görünmeye başlar. Formatların mantığını bilmek, hem doğru dönüşüm yapmanızı hem de hangi durumda hangisinin işinizi kolaylaştırdığını seçmenizi sağlar.

Az bilinen birkaç ayrıntı

HEX kodları üç haneli kısa biçimde de yazılabilir. #F60, #FF6600 ile aynı renktir; her hane ikiye katlanarak okunur.
Modern tarayıcılar sekiz haneli HEX'i de destekler. Son iki hane şeffaflığı belirtir, yani yalnızca şeffaflık için RGB'ye geçmek zorunda değilsiniz.
HSL'de aynı parlaklık değeri her tonda aynı algılanmaz. Parlaklığı %50 olan bir sarı, parlaklığı %50 olan bir maviden göze çok daha açık görünür.
Bu üç format ekran renkleri içindir. Matbaa genellikle CMYK ile çalışır ve ekrandaki her renk baskıda birebir elde edilemeyebilir.

Sık yapılan hatalar

Rengi ekran görüntüsünden renk seçiciyle almak. Görüntü sıkıştırması ve ekran ayarları kodu birkaç değer kaydırabilir; asıl kaynağı tasarım dosyası olmalıdır.
Metin ve arka plan rengini yalnızca göze hoş geldiği için seçmek. Okunabilirlik için iki renk arasında yeterli kontrast olmalıdır; erişilebilirlik yönergeleri normal metin için en az 4.5:1 oranını önerir.
Bir rengi koyulaştırmak için RGB değerlerinin hepsinden aynı sayıyı çıkarmak. Bu, rengin tonunu da değiştirebilir; HSL'de yalnızca parlaklığı düşürmek daha tutarlı sonuç verir.
Aynı rengin farklı monitörlerde aynı görüneceğini varsaymak.

Örnek bir senaryo

Web sitenizdeki ana buton için marka renginiz bir HEX kodu olarak elinizde. Fare üzerine geldiğinde butonun biraz koyulaşmasını istiyorsunuz. Kodu dönüştürme aracına girip HSL karşılığını alıyorsunuz, ton ve doygunluğa dokunmadan yalnızca parlaklığı birkaç puan düşürüyorsunuz. Butonun pasif hali için de aynı rengin yarı şeffaf versiyonunu sekiz haneli HEX ya da RGBA olarak yazıyorsunuz. Son olarak beyaz buton yazısının her üç durumda da yeterli kontrasta sahip olup olmadığını kontrol ediyorsunuz.

Ne zaman uzmana danışmalı?

Ürün ambalajı, tabela veya kurumsal basılı malzeme gibi renk doğruluğunun önemli olduğu işlerde, ekran kodlarından yola çıkmak yerine matbaanız veya grafik tasarımcınızla birlikte bir renk kartelası ya da baskı provası üzerinden çalışın.