HTML Renk Kodu Hesaplama: HEX ve RGB Arasında Kayıpsız Dönüşüm

Bir web sayfasında gördüğünüz #2563EB kodu ile rgb(37, 99, 235) yazımı aynı opak sRGB rengini anlatır. İlkinde kanallar onaltılık sayı sistemiyle, ikincisinde ondalık sayılarla yazılır. Bu araç iki gösterim arasında dönüşüm yapar. HEX kodundan kırmızı, yeşil ve mavi kanallarını bulabilir; bu üç kanalı biliyorsanız altı basamaklı HEX karşılığını elde edebilirsiniz.

Hesabın kapsamı opak, 8-bit sRGB değerleridir. HEX girişinde üç veya altı basamak kabul edilir. RGB girişinde her kanal 0 ile 255 arasında bir tam sayı olmalıdır. Araç bir rengin tasarıma uygunluğunu, metnin okunabilirliğini veya basılı çıktının görünümünü belirlemez. Amacı aynı kanal bilgisini farklı sayı tabanlarıyla doğru yazmaktır. Sonuçları değerlendirirken bu sayısal dönüşümü renk seçimi kararından ayrı tutun.

Önce dönüşüm yönünü seçin

Elinizde HEX kodu varsa HEX'ten RGB'ye seçeneğini kullanın. Kodu ilgili kutuya yazdıktan sonra hesaplayın; ana sonuç RGB metnidir. Sonuç satırlarında altı basamaklı HEX karşılığı ve üç kanalın ayrı değerleri de bulunur. Böylece bir kodu başka bir araçtaki kanal kutularına aktarırken hangi sayının kırmızı, yeşil veya mavi olduğunu görebilirsiniz.

RGB'den HEX'e seçeneğinde ise üç kanal için ayrı kutular açılır. Kırmızıya R, yeşile G, maviye B denir. Her kutuya kendi ondalık kanalını yazın; rgb(...) metninin tamamını tek kutuya yapıştırmayın. Ana sonuç altı basamaklı HEX olur. İki yön de aynı kanal bilgisini korur; yön değiştirmek renkleri karıştırmaz veya yeni bir ton hesaplamaz.

RGB kanal sırası hangi bilgiyi taşır?

Bu modelde kanalların sırası daima kırmızı, yeşil, mavidir. rgb(255, 128, 0) ifadesindeki ilk sayı kırmızı, ikinci sayı yeşil, üçüncü sayı mavi kanalına aittir. Aynı üç sayıyı farklı sırayla yazmak genellikle farklı bir renk kodu oluşturur. Örneğin 255, 128, 0 ile 0, 128, 255 aynı kanal düzeni değildir.

Her kanalın 0 olması o kanalın kod değerinin alt sınırıdır; 255 olması üst sınırıdır. Üç kanal 0 olduğunda kod siyahı, üçü 255 olduğunda beyazı temsil eder. Buradaki sayılar ekran parlaklığı ölçümü, ışık gücü veya baskı mürekkebi yüzdesi değildir. RGB değerlerini fiziksel bir ölçüm gibi yorumlamadan, sRGB gösteriminin kanal değerleri olarak kullanın.

HEX kodunda altı basamak nasıl ayrılır?

Altı basamaklı kod üç ikili parçaya bölünür: RR, GG, BB. İlk çift kırmızı, ortadaki çift yeşil, son çift mavi kanalını taşır. #2563EB kodu bu yüzden 25, 63 ve EB olarak ayrılır. Baştaki # işareti kanal verisi değildir; yazımın HEX renk gösterimi olduğunu belirtir.

Çiftlerin her biri 00 ile FF arasındadır. Kodun tamamını tek büyük sayıya dönüştürüp çıkan sayıyı RGB kanalına yazmak doğru işlem değildir. Her iki basamak bir kanaldır ve ayrı dönüştürülmelidir. Aynı şekilde altı karakterin ortasına rastgele boşluk eklemek kodu üç kanal kutusu gibi göstermez; bu aracın HEX kutusunda kod bitişik yazılır.

Onaltılık sayı sistemiyle kanalı okuyun

Onaltılık sistemde 0'dan 9'a kadar alıştığımız rakamlar kullanılır; ardından A, B, C, D, E ve F gelir. Bunlar sırasıyla 10, 11, 12, 13, 14 ve 15 değerlerini temsil eder. Bir HEX çiftini ondalığa çevirmek için soldaki basamağı 16 ile çarpıp sağdaki basamağın değerini ekleyin.

Örneğin 25 çifti 2 × 16 + 5 = 37 olur. 63 çifti 6 × 16 + 3 = 99'dur. EB için E'nin değeri 14, B'nin değeri 11 olduğundan 14 × 16 + 11 = 235 bulunur. Böylece #2563EB kodu rgb(37, 99, 235) olarak yazılır. Buradaki 25 ifadesi ondalık yirmi beş değildir; iki HEX basamağının birlikte temsil ettiği değerdir.

Üç basamaklı kodu doğru genişletin

Kısa HEX yazımında üç basamağın her biri çoğaltılır. #ABC, #AABBCC ile aynı kodu ifade eder. Bu işlem başa sıfır eklemek değildir. Örneğin #123 kodunu #010203 olarak açmak yanlış olur; doğru karşılık #112233 şeklindedir. Kısa yazımdaki tek karakter, ilgili kanalın her iki HEX basamağını belirler.

İkinci yüklenebilir örnekte #0F8 kullanılır. Genişletilmiş kod #00FF88 olur. 00 kanalı 0, FF kanalı 255, 88 kanalı 8 × 16 + 8 = 136'dır. Sonuç rgb(0, 255, 136) olarak gösterilir. Üç basamağın hızlı yazımı, kanal başına yalnız 0 ile 15 arasında bir RGB değeri kullanıldığı anlamına gelmez; çoğaltma sonrasında kanal 0 ile 255 aralığındadır.

RGB kanallarından HEX nasıl oluşturulur?

Her ondalık kanal için 16'ya bölümün tam kısmını ve kalanını bulun. Örneğin 128 = 8 × 16 + 0 olduğundan HEX çifti 80'dir. 255 = 15 × 16 + 15 olduğundan iki basamak da F olur. Kanalın değeri 16'dan küçükse soldaki basamak sıfırdır; 15 için F değil, 0F yazılır.

Ardından üç ikili parçayı R, G, B sırasıyla birleştirin ve başına # koyun. Üçüncü örnekte kanallar 255, 128 ve 0'dır. Bunlar FF, 80 ve 00 olur; sonuç #FF8000 şeklindedir. Sıfır kanalını atlamak veya iki yerine tek basamakla yazmak çiftlerin sınırlarını değiştirir. Altı basamaklı sonuçta her kanal için iki yer ayrılması bu karışıklığı önler.

Bir renk ne zaman kısa HEX olarak yazılabilir?

Altı basamaklı kodun kısa karşılığı, ancak her kanal çiftinin iki basamağı birbirinin aynısıysa kayıpsızdır. #112233 için çiftler 11, 22 ve 33 olduğundan #123 yazılabilir. #00FF88 için de #0F8 karşılığı vardır. Araç bu koşul sağlandığında kısa yazımı ayrı sonuç satırında gösterir.

#FF8000 kodunun ortasındaki 80 çifti aynı iki basamaktan oluşmaz. Bu yüzden onu üç karakterle aynı kanal değerlerini koruyarak yazamazsınız. Aracın kısa karşılık bulunmadığını söylemesi bir hesap hatası değildir. Sırf kodu kısaltmak için 80'i 88 veya 77 yapmak yeşil kanalı değiştirir. Böyle bir tercih dönüşüm değil, farklı bir renk seçimi olur.

Baştaki # ve harf büyüklüğünü nasıl kullanmalısınız?

Bu hesaplayıcının giriş kutusunda baştaki tek # isteğe bağlıdır. 2563eb ve #2563eb aynı sonucu verir. Bu kolaylık aracın giriş sözleşmesidir; çıktıyı CSS'de HEX renk olarak kullanırken # işaretini koruyun. ##2563eb veya 0x2563eb biçimlerini geçerli giriş saymayın. Bunlar desteklenen tek işaretli renk koduyla aynı yazım değildir.

A'dan F'ye kadar harflerin büyük ya da küçük olması renk değerini değiştirmez. #abcdef, #ABCDEF ve #AbCdEf aynı kanalları taşır. Araç okunaklı ve tutarlı çıktı için HEX harflerini büyük yazar. Bunun bir renk dönüşümü veya CSS'nin yalnız büyük harfi kabul ettiği iddiası olmadığını unutmayın. Harf biçimi değişse de basamakların sayısal değeri aynı kalır.

Kopyaladığınız kodun boşluklarını kontrol edin

HEX kodunun yalnız başında ve sonunda bulunan boşluklar temizlenir. Örneğin bir metinden #ABC kopyaladıysanız aynı kısa kod çözülür. Kodun içindeki boşluk ise temizlenmez; #AB C veya #12 3456 reddedilir. Böylece yanlışlıkla ayrılmış bir metin sessizce farklı bir geçerli renge çevrilmez.

Kutunun içinde baştaki # ile basamaklar arasına da boşluk koymayın. Kaynak belgedeki açıklamayı, tırnakları veya CSS satırının tamamını değil, yalnız renk kodunu aktarın. Örneğin color: #2563eb; bir CSS bildirimi olabilir ama bu aracın HEX girdisi değildir. Giriş kutusu CSS dosyasını ayrıştırmaz; gerekli kod parçasını sizin ayırmanız gerekir.

RGB girişinde tam sayı koşulunu koruyun

RGB yönünde her kanal 0–255 aralığında bir tam sayı olmalıdır. 0, 128 ve 255 geçerli örneklerdir; −1 ve 256 aralığın dışındadır. 128,5 ise tam sayı değildir. Araç kanalı en yakın tam sayıya yuvarlamaz ve aralık dışındaki değeri sessizce sınırlandırmaz. Hangi kanalda düzeltme gerektiğini ilgili kutuyla birlikte gösterir.

Bir kanala yüzde işareti veya rgb(255, 128, 0) metninin tamamını yazmayın. Sayıları üç ayrı kutuya dağıtın. Başında ve sonunda boşluk olan bir tam sayı sayısal olarak okunabilir; fakat boş kutu sıfır yerine geçmez. Kırmızı kanalınız gerçekten 0 ise 0 yazın. Bu sayede eksik bilgi ile bilinçli sıfır girdisi birbirinden ayrılır.

Bu araç ile CSS standardının kapsamı aynı mı?

W3C CSS Color standardı yalnız bu iki sınırlı gösterimden oluşmaz. RGB işlevlerinde kesirli sayılar, yüzde kanalları ve başka yazım biçimleri bulunabilir. CSS'nin aralık dışındaki kanal değerleri için kullandığı sınırlama kuralları da vardır. Bu araç ise kullanıcının niyetini değiştirmemek için 8-bit tam sayı dönüşümünü seçer ve desteklenmeyen girdiyi reddeder.

Dolayısıyla araçta reddedilen her metnin bütün CSS bağlamlarında geçersiz olduğu sonucu çıkmaz. Örneğin yüzdeyle yazılmış bir RGB gösterimi standartta bulunabilir, fakat burada ayrı yüzde modu yoktur. Tersine, başında # olmayan altı HEX basamağının hesap kutusunda kabul edilmesi onu doğrudan CSS renk sözdizimi yapmaz. Hesaplayıcının giriş kolaylığı ile kullandığınız dilin sözdizimini ayrı düşünün.

Alpha ve HSL değerleri neden dışarıda?

Alpha, rengin saydamlık bilgisini ifade eder. CSS'de dört ve sekiz basamaklı HEX gösterimleri bu bilgiyi taşıyabilir; burada yalnız üç ve altı basamak çözülür. #ABCD veya #11223344 kodları geldiğinde araç son karakterleri atıp kalanları opak renk gibi hesaplamaz. Çünkü bu davranış kaynak koddaki saydamlık bilgisini kaybettirirdi.

HSL ise farklı parametrelerle ifade edilen bir renk gösterimidir. Bu formda ton, doygunluk ve açıklık alanları veya HSL metin ayrıştırıcısı bulunmaz. İsimli CSS renkleri, transparent, daha geniş renk uzayları ve göreli renk ifadeleri de bu dönüşümün girdisi değildir. Elinizde böyle bir gösterim varsa bu araca aktarmadan önce uygun bir yöntemle desteklenen opak sRGB kanal bilgisine ulaşmanız gerekir.

Sonucu nasıl kontrol edebilirsiniz?

İki yön arasında tekrar dönüşüm yapmak yararlı bir kontroldür. HEX'ten RGB'ye elde ettiğiniz kanalları ters yönde girin; çıkan altı basamaklı kod aynı renk bilgisini taşımalıdır. Örneğin #ABC için 170, 187, 204 bulunur ve ters dönüşüm #AABBCC verir. Metin uzunluğu farklıdır ama kanal değerleri aynıdır.

Kontrol sırasında harf büyüklüğüne veya kısa yazım farkına bakarak renklerin değiştiğini düşünmeyin. Önce genişletilmiş altı basamağı ve üç ondalık kanalı karşılaştırın. Sonuç farklıysa kanal sırasını, baştaki sıfırları ve her çiftin 16 tabanında okunduğunu kontrol edin. Bu yöntem matematiksel dönüşümün tutarlılığını değerlendirir; ekranınızın gerçek renk üretimini ölçmez.

Aynı kod her kullanımda aynı görünümü garanti eder mi?

Bir dönüşümün kanal bilgisini koruması, farklı ekran, baskı ve görüntü işleme koşullarının aynı görünümü üretmesini garanti etmez. Araç renk profili, ekran kalibrasyonu, ortam ışığı, baskı malzemesi veya CMYK dönüşümü hakkında bilgi almaz. Sonuçta görülen kodu bir fiziksel renk eşleştirme raporu olarak kullanmayın.

Benzer şekilde metin okunabilirliği için yalnız bir renk kodu yeterli değildir; metin ve arka plan birlikte değerlendirilir. Bu hesaplayıcı kontrast oranı veya erişilebilirlik uygunluğu üretmez. Tasarımda kullanacağınız kodu doğru dönüştürmek yararlıdır, ancak tasarım kararının diğer koşullarını ayrıca ele almalısınız. Renk seçimi ile sayısal gösterim dönüşümünü ayırmak, araçtan ne sonuç bekleyeceğinizi netleştirir.