HTML Renk Kodu Dönüştürücü

HEX, RGB ve HSL nedir?

Ekranlar renkleri kırmızı, yeşil ve mavi ışığı karıştırarak üretir. Bir rengi web'de yazmanın birkaç yolu var ve hepsi sonunda aynı üç sayıya dayanır. HEX bu üç değeri onaltılık sayı sistemiyle art arda dizer: #FF0000 saf kırmızıdır. RGB aynı değerleri 0 ile 255 arasında ondalık sayılarla verir: rgb(255, 0, 0). HSL ise rengi ışık miktarı yerine insan algısına daha yakın üç kavramla anlatır: ton (0 ile 360 derece arasında renk çarkındaki konum), doygunluk (rengin canlılığı, yüzde olarak) ve açıklık (siyahtan beyaza doğru parlaklık, yüzde olarak): hsl(0, 100%, 50%). Üç yazım da tam olarak aynı rengi gösterir; hangisini seçeceğin, işinde hangisinin daha okunaklı olduğuna bağlı.

Hesaplayıcı bu üç gösterim arasında çeviri yapar. Kutuya birini yazarsın, araç HEX, RGB ve HSL karşılıklarını tek seferde verir. Böylece bir tasarım dosyasından aldığın HEX değerini CSS'te HSL olarak kullanabilir ya da bir RGB değerini kısa bir HEX koduna çevirebilirsin.

HEX kodu nasıl okunur?

HEX kodu bir diyez işaretiyle başlar ve altı onaltılık haneden oluşur. Onaltılık sistemde rakamlar 0-9 ve A-F harfleridir; A on, B on bir, C on iki, D on üç, E on dört, F ise on beş demektir. Altı hane ikişerli üç gruba bölünür: ilk iki hane kırmızı, sonraki iki hane yeşil, son iki hane mavi kanaldır. Her grup 00 ile FF arasında, yani 0 ile 255 arasında bir değer taşır. Bir kanalın değerini bulmak için ilk haneyi 16 ile çarpıp ikinci haneyi eklersin.

#2A992F
2A → 2 × 16 + 10 = 42  (kırmızı)
99 → 9 × 16 + 9  = 153 (yeşil)
2F → 2 × 16 + 15 = 47  (mavi)
Sonuç: rgb(42, 153, 47)

Her kanal 256 farklı değer alabildiği için toplam 256 × 256 × 256 = 16.777.216 farklı renk yazılabilir. 00 bir kanalın hiç yanmadığını, FF ise tam parlaklıkta yandığını gösterir. Üç kanal da 00 ise renk siyah (#000000), üçü de FF ise beyazdır (#FFFFFF). Üç kanal birbirine eşit olduğunda renk gri olur; #808080 orta gridir, çünkü her kanal 128'dir.

Kısa HEX yazımı

Altı hanenin her çifti iki aynı karakterden oluşuyorsa kod üç haneye kısaltılabilir. #FFF, #FFFFFF demektir; #F80 ise #FF8800 olarak açılır. Kural basit: her hane ikilenir. Hesaplayıcı üç haneli girdiyi kendiliğinden altı haneye genişletir. Kısa yazım her renk için kullanılamaz; #2A992F gibi çiftleri aynı olmayan bir kod kısaltılamaz. Diyez işaretini yazmasan da araç kodu tanır, ama CSS dosyalarında işaret zorunludur.

RGB ve HSL arasındaki fark

RGB makinenin bakış açısını yansıtır: üç ışık kanalı ne kadar parlıyor? Bir rengi ekranda göstermek için bu doğal bir yoldur. Ama "bu rengi biraz açayım" dediğinde zahmetlidir, çünkü üç sayıyı aynı anda ve orantılı olarak değiştirmen gerekir. HSL bu işi kolaylaştırır. Tonu sabit tutup açıklığı artırırsan aynı rengin daha açık bir tonunu elde edersin; doygunluğu azaltırsan renk griye yaklaşır. Bu yüzden bir arayüz için tek bir ana renkten açık ve koyu varyantlar türetirken HSL tercih edilir.

Ton değeri renk çarkı üzerinde bir açıdır: 0 derece kırmızı, 60 sarı, 120 yeşil, 180 camgöbeği, 240 mavi, 300 eflatundur ve 360 yeniden kırmızıya döner. Doygunluk yüzde 0 olduğunda renk tamamen gridir ve tonun bir anlamı kalmaz; araç bu durumda tonu 0 olarak gösterir. Açıklık yüzde 0'da siyah, yüzde 100'de beyaz verir; saf, canlı renkler yüzde 50 civarındadır.

Hesaplayıcı hangi girdileri kabul eder?

Üç biçimin her biri için kabul edilen yazımlar şöyle. HEX için üç ya da altı haneli kod, diyezli ya da diyezsiz. RGB için virgül ya da boşlukla ayrılmış üç sayı; istersen rgb(...) biçiminde de yazabilirsin, yalnız açtığın parantezi kapatman gerekir. HSL için hsl(ton, doygunluk%, açıklık%) biçimi gerekir ve yüzde işaretleri yazılmalıdır. Sekiz haneli HEX (saydamlık kanallı), yüzdeyle yazılan RGB ve renk adları (red, blue gibi) desteklenmez.

#1E90FF            → rgb(30, 144, 255)   → hsl(210, 100%, 56%)
255, 165, 0         → #FFA500             → hsl(39, 100%, 50%)
hsl(120, 100%, 50%) → #00FF00             → rgb(0, 255, 0)
rgb(128, 0, 128)    → #800080             → hsl(300, 100%, 25%)

Kanal değerleri 255'i, ton 360'ı, doygunluk ve açıklık yüzde 100'ü aşamaz. Aşan değerler geçersiz sayılır ve araç hata mesajı gösterir. Ondalıklı RGB değerleri (örneğin 12.6) en yakın tam sayıya yuvarlanır.

Adım adım örnek: HEX'ten HSL'ye

#336699 koduyla ilerleyelim. Önce kanalları ayırırız: onaltılık sistemde 33 değeri 51, 66 değeri 102, 99 değeri 153 eder. Elimizde rgb(51, 102, 153) var. HSL'ye geçmek için kanalları 255'e böler, en büyük ve en küçük değeri buluruz: en büyük mavi (153), en küçük kırmızı (51). Açıklık bu ikisinin ortalamasıdır: (153 + 51) ÷ 2 ÷ 255 = 0,40, yani yüzde 40. Doygunluk, aradaki farkı açıklığa göre oranlayarak bulunur ve yüzde 50 çıkar. Baskın kanal mavi olduğu için ton çarkın mavi bölgesinde, 210 derece civarındadır.

#336699 → rgb(51, 102, 153) → hsl(210, 50%, 40%)
Tersi: hsl(210, 50%, 40%) → #336699

Bu örnekte iki yönlü dönüşüm tam tutar. Her zaman böyle olmuyor; nedenini bir sonraki bölümde anlattım.

RGB ve HSL dönüşüm formülleri nasıl çalışır?

RGB'den HSL'ye geçerken kanallar önce 255'e bölünerek 0 ile 1 arasına getirilir. En büyük kanal Cmax, en küçük kanal Cmin, aradaki fark Δ olsun. Açıklık ikisinin ortalamasıdır. Doygunluk, farkın açıklığa göre oranıdır. Ton ise baskın kanala göre bir açı olarak bulunur.

L = (Cmax + Cmin) ÷ 2
S = Δ ÷ (1 − |2L − 1|)        (Δ = 0 ise S = 0)
Cmax = R ise H = 60° × ((G − B) ÷ Δ mod 6)
Cmax = G ise H = 60° × ((B − R) ÷ Δ + 2)
Cmax = B ise H = 60° × ((R − G) ÷ Δ + 4)

Ters yönde, HSL'den RGB'ye geçmek için önce renk yoğunluğu C = (1 − |2L − 1|) × S hesaplanır. Ardından ton 60 derecelik altı dilime bölünür ve ara değer X bulunur. Son adımda her kanala m = L − C ÷ 2 eklenir ve sonuç 255 ile çarpılır.

hsl(210, 50%, 40%)
C = (1 − |0,8 − 1|) × 0,5 = 0,4
H ÷ 60 = 3,5 → X = 0,4 × (1 − |3,5 mod 2 − 1|) = 0,2
m = 0,4 − 0,2 = 0,2
180°–240° diliminde (R, G, B) = (0, X, C) → (0, 0,2, 0,4)
(0 + m, 0,2 + m, 0,4 + m) × 255 = (51, 102, 153)
→ rgb(51, 102, 153) = #336699

Yuvarlama ve dönüşümün kayıpsızlığı

HEX ile RGB aynı bilginin iki yazımıdır; ikisi de 0-255 aralığında tam sayılarla çalıştığı için aralarındaki dönüşüm kayıpsızdır. HSL ise ton, doygunluk ve açıklığı tam sayıya yuvarlayarak gösterir ve bu bilgiyi biraz seyreltir: 16 milyonu aşkın renge karşılık, HSL'de tam sayı ayarlarıyla ulaşılabilen renk sayısı daha azdır. Bu yüzden bir rengi HSL'ye çevirip yeniden HEX'e dönersen bir kanalda en fazla bir birimlik fark görebilirsin. Araçtaki varsayılan renk #2A992F, HSL'de hsl(123, 57%, 38%) olarak gösterilir. HSL değerleri tam sayıya yuvarlandığı için bu değerden geri dönünce birim düzeyinde bir sapma olabilir. Gözle ayırt edilemeyen bu fark web tasarımında sorun yaratmaz. Yine de bir markanın kesin HEX kodunu korumak gerekiyorsa kaynak olarak HEX değerini sakla.

Renk kodu dönüşümünde sık yapılan hatalar

En sık karşılaşılan hata, HEX koduna yanlış sayıda hane yazmaktır; yalnızca üç ya da altı hane kabul edilir, beş ya da yedi hane geçersizdir. Onaltılık sistemde olmayan harfleri (G, H gibi) kullanmak da sık görülür; yalnızca 0-9 ve A-F geçerlidir. HSL'de yüzde işaretlerini unutursan hsl(120, 100, 50) yazımı kabul edilmez. RGB kanalına 255'ten büyük bir değer girmek ya da parantezlerden birini unutmak da hata verir: rgb(255, 0, 0 yazımı geçersizdir. Son olarak, bir rengin farklı ekranlarda aynı görünmeyeceğini aklında tut; kod aynı kalsa da ekranın kalibrasyonu algıyı değiştirir.

Renk seçerken erişilebilirlik

Renk kodlarını çevirmek işin yarısı; seçtiğin rengin okunabilir olması da gerekir. Web içeriği erişilebilirlik yönergeleri (WCAG), normal boyuttaki metin için arka planla en az 4,5:1, büyük metin için 3:1 kontrast oranı önerir. Bu araç kontrast oranı hesaplamaz. Ama HSL gösterimindeki açıklık değerine bakarak açık zemin üzerinde koyu, koyu zemin üzerinde açık renk seçme kararını hızlıca verebilirsin. Bilgiyi yalnız renkle vermemek de iyi bir alışkanlıktır: hata durumunu sadece kırmızıyla belirtmek yerine yanına bir simge ya da metin ekle.

Sıkça sorulan sorular

HEX kodunun başındaki diyez işareti zorunlu mu?

CSS ve HTML içinde evet, zorunludur. Hesaplayıcı ise diyezsiz yazılan 3 ya da 6 haneli kodu da tanır; çıktıda her zaman diyezli HEX verir.

HEX harfleri büyük mü küçük mü yazılmalı?

Tarayıcılar iki yazımı da aynı kabul eder; #ff8800 ile #FF8800 aynı renktir. Araç çıktıdaki HEX kodunu büyük harfle gösterir. Kendi kod tabanında tek bir yazım biçimini tutarlı kullanman yeterli.

Hangi gösterimi kullanmalıyım?

Tasarım araçlarından aktarım yapıyorsan çoğunlukla HEX kullanılır. Renkleri programla açıp koyulaştıracaksan HSL daha pratiktir. RGB ise bir kanalı doğrudan kodla hesaplayan işlerde ya da bir görüntünün piksel değerleriyle çalışırken doğal seçimdir.

Gri renkte ton neden 0 çıkıyor?

Üç kanalın değeri eşit olduğunda renk bir ışık rengi taşımaz, yalnızca parlaklığı vardır. Bu durumda doygunluk 0 olur ve ton anlamsızlaştığı için 0 olarak gösterilir. #808080 için sonuç hsl(0, 0%, 50%) olur.

Saydam renkler HEX'te nasıl yazılır?

CSS sekiz haneli HEX yazımını destekler; son iki hane saydamlık (alfa) kanalıdır. Bu hesaplayıcı ise yalnızca üç ve altı haneli HEX, RGB ve HSL girdisini kabul eder ve saydamlık kanalını işlemez. Saydam bir renge ihtiyacın varsa önce opak rengi burada çevir, alfa değerini CSS'te kendin ekle.

Renk adları (red, blue) çevrilir mi?

Hayır. Araç yalnızca HEX, RGB ve HSL biçimlerini tanır. Renk adının kod karşılığını bulduktan sonra buraya yazabilirsin.

HTML renk kodu çevirici nasıl kullanılır?

Renk kutusuna HEX, RGB ya da HSL biçiminde bir değer yaz. Araç girdinin türünü kendisi tanır ve HEX, RGB ile HSL karşılıklarını birlikte gösterir. Çıktıdaki değerleri CSS'e olduğu gibi yapıştırabilirsin.

İlgili araçlar

HSL'deki doygunluk ve açıklık değerleri yüzde olduğu için bir değeri belli bir oranda artırmak ya da azaltmak istersen yüzde hesaplama aracını kullanabilirsin. Rastgele bir renk denemek için rastgele sayı aracıyla 0 ile 255 arasında üç sayı üretip RGB olarak girebilirsin. Tasarımda ölçü birimleri arasında geçiş gerekirse birim çevirme aracı da işe yarar.