RGB - Hex Dönüştürücü

Tasarım aracındaki renk seçici sana rgb(46, 134, 171) değerini verir; oysa üzerinde çalıştığın CSS dosyası tamamen hex kodlarıyla doludur. Aynı stil dosyasında iki ayrı renk formatını bir arada kullanmak, zamanla kod tabanının bakımını zorlaştıran küçük ama can sıkıcı bir tutarsızlık yaratır.

RGB renklerini hex formatına çevirme mantığı

RGB modelindeki her üç kanal, 0 ile 255 arasındaki değerleri temel alır. Her kanal iki basamaklı 16 tabanlı bir sayı çiftine dönüşür ve başına # işareti eklenerek birleştirilir. Örneğin rgb(46, 134, 171) ele alındığında: 46 değeri 2E, 134 değeri 86 ve 171 değeri AB ikilisine karşılık gelir; böylece dumanlı bir deniz mavisi olan #2E86AB elde edilir.

İşlemin arkasındaki matematik basittir ancak elle hesaplamak hataya fazlasıyla açıktır. Özellikle küçük sayılarda risk artar: 15 değeri 0F çiftine dönüşür ve baştaki sıfırı fark etmeden atlamak, geçerli bir hex çiftini geçersiz tek basamaklı bir değere çevirir.

RGB - hex dönüşüm tablosu ve yaygın değerler

RGB to Hex aracında RGBA ve 8 basamaklı hex kullanımı

Renge saydamlık eklemek gerektiğinde RGB formatına dördüncü bir kanal dahil olur: %50 opaklık için rgba(46, 134, 171, 0.5) yazılır. Hex formatında bunun karşılığı 8 basamaklı bir dizilimdir — #2E86AB80. Sondaki fazladan iki basamak, doğrudan bir yüzde değeri olarak değil, tıpkı ana renk kanallarında olduğu gibi 0–255 ve 00-FF aralığında tanımlanır.

Tüm geliştirme ortamları veya tasarım araçları 8 basamaklı hex formatını doğrudan tanımayabilir. rgba() yerine bu yapıyı projene dahil etmeden önce hedef CSS ortamının destekleyip desteklemediğini kontrol etmende fayda vardır.

Hex renk değerleriyle WCAG kontrast kuralları

• Web İçeriği Erişilebilirlik Yönergeleri (WCAG), standart gövde metinleri ile arka plan arasında en az 4.5:1 kontrast oranı şartı koyar.
• Büyük puntolu metinler için (18pt ve üzeri ya da 14pt kalın) bu gereksinim esnetilerek 3:1 olarak uygulanır.
• Beyaz zemin üzerinde yer alan #AAAAAA açık gri rengi bu eşiği geçemez; keskin gören bir göz için sorunsuz görünse de pek çok kişi için okunması imkansız hale gelir.
• Metin ve arka plan renklerini hex formatına çevirerek projeyi yayına almadan önce bir kontrast kontrolünden geçirebilirsin.

RGB to Hex dönüştürme hakkında sık sorulan sorular