HEX ve RGB Renk Kodları Arasında Dönüşüm

Herkese merhabalar, bu yazıda genellikle renklerden ve basit matematiksel hesaplamalardan bahsediyor olacağız. HEX ve RGB renk kodları arasında nasıl bir bağ olduğunu ve nasıl bu değerlerin birbirine dönüştürüldüğünden bahsedeceğiz.

Öncelikle bu 2 farklı renk kodunun yapısına bakalım. HEX kodu 6 basamaklıdır ve 0-e arasında değerler alır, ki bu da 16’lık tabanda sayılar anlamına geliyor. Yani buradaki a 10’a, b 11’e eşitleniyor. Buda 6 basamağın her birinin 16 değer alabileceği anlamına geliyor. Bu şekilde 16^6 farklı renge tekabül ediyor. RGB ise sırasıyla red, green ve blue kısaltmasını oluşturuyor ve 0-255 arasında 256 farklı değer alabilen 3 parçadan oluşuyor. Bu da aslında 256^3 anlamına geliyor.

Aslına bakarsanız 16^6 ve 256^3 basit bir sadeleştirmeyle 2^24’e dönüşüyor ve iki değerinde aslında 16.777.216 sayınına eşit olduğunu görebiliyoruz. Yani bu iki renk kodlarından hangisini kullandığınızın bir önemi olmadan maksimum aynı renklere ulaşabiliyorsunuz. Bunun mantığı da aslında HEX kodunun 2 basamaklı 3 parçadan oluşması.

Örneğin #333333 HEX kodunu RGB koduna çevirmek istesek ne yapacaktık? Hemen adım adım dönüşmeyi yapalım. Paint ile hazırladığım görsele bakarak adımları okumadan da anlayabilirsiniz 🙂

  1. HEX kodunu 2 basamaklı 3 parçaya böldük ve (33, 33, 33) şeklinde değerlerimizi ayarladık.
  2. Sonrasında bu 3 değerimiz için 16’lık tabandan 10’luk tabana dönüşüm yapıyoruz. Bunun için de ilk değeri 16^0’la yani 1 ile ikinci basamağı ise 16^1 ile yani 16 ile çarpıp bu 2 değeri topluyoruz. (basamak sırası sağdan soladır)
  3. 33 değeri için 16*3 + 1*3 değerlerinin toplamından 51 değerine ulaştık.
  4. Bu işlemi 1. adımda ayırdığımız 3 değer için de yaptığımızda RGB kodumuz hazır olacak. Örneğimizde 3 değer de aynı olduğu için #333333 = RGB(51, 51, 51) sonucuna ulaşmış olduk.

Bu dönüşümün tam tersini yapmak isterseniz bu sefer yapmanız gereken tek farklı şey 10’luk tabandan 16’lık tabana dönüşüm olacak. Uygulamalarınız içinde bu tarz dönüşümler yapmak istediğinizde ekstra kütüphaneler kullanmanıza gerek kalmadan birkaç satır kod ile basitçe bu şekilde dönüşümlerinizi yapabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir