Kısaca özet
- HEX kodu nedir sorusunun kısa cevabı: bir rengi onaltılık sayı tabanıyla yazan,
#işaretiyle başlayan ve kırmızı, yeşil, mavi bileşenlerini ikişer haneyle taşıyan renk gösterimidir. - Altı hanenin ilk ikisi kırmızıyı, ortadaki ikisi yeşili, son ikisi maviyi anlatır; her çift
00ileFFarasında, yani 0 ile 255 arasında bir değer taşır. - Üç haneli kısa yazım yalnızca her çiftin iki hanesi aynıyken kullanılabilir:
#FA0tarayıcıda#FFAA00olarak okunur. - Sekiz haneli biçim sona saydamlık (alpha) ekler;
#1D355780yazımındaki80yaklaşık yüzde 50 saydamlık demektir. - HEX, RGB ve HSL aynı rengi farklı yazar; HEX kopyalamak için, HSL ise tonu koruyup açıklık ayarlamak için daha kullanışlıdır.
- Renk kodunu doğru taşımak yetmez; metin ile arka plan arasındaki kontrast oranı normal metinde en az 4,5:1 olmalıdır.
Tasarımcıdan gelen dosyada renk #1D3557 yazıyor, siteye eklendiğinde başka bir lacivert çıkıyor. Ya da menüdeki turuncu ile butondaki turuncu bir türlü tutmuyor. Bu tür karışıklıkların çoğu, kodun nasıl okunduğunun bilinmemesinden kaynaklanır. HEX kodu nedir ve altı hane tam olarak neyi anlatır sorusunu bu yazıda hane hane açıyoruz; yanına dönüşüm, CSS kullanımı ve kontrast kontrolünü de ekliyoruz.
HEX kodu nedir ve altı hane nasıl okunur?
HEX kodu nedir sorusunun teknik karşılığı şudur: rengin kırmızı, yeşil ve mavi bileşenlerini onaltılık (hexadecimal) sayı tabanında yazan bir gösterim. Kod # işaretiyle başlar ve altı haneden oluşur.
Haneler ikişerli okunur. #E63946 kodunda E6 kırmızı, 39 yeşil, 46 mavi bileşenidir. Onaltılık tabanda E6 onluk tabanda 230, 39 57, 46 ise 70 eder. Yani bu kod rgb(230, 57, 70) ile aynı rengi verir. Kırmızıya çalan bir ton olmasının sebebi, ilk çiftin diğer ikisinden belirgin biçimde yüksek olmasıdır.
Bilgi
Harflerin büyük ya da küçük yazılması sonucu değiştirmez. #fff ile #FFF tarayıcı için aynıdır. Ekip içinde tek bir yazım biçiminde karar kılmak, kod incelemelerinde gereksiz farkları önler. Renk gösterimlerinin genel çerçevesini renk kodları yazımızda ele almıştık; burada HEX biçiminin kendi ayrıntısına giriyoruz.
Onaltılık sayı tabanı neden kullanılıyor?
Günlük hayatta onluk tabanı kullanırız: on rakam vardır ve onuncu adımda basamak atlanır. Onaltılık tabanda on altı sembol bulunur. Rakamlar 0’dan 9’a kadar aynıdır, ardından A, B, C, D, E ve F gelir. A onluk tabanda 10, F ise 15 demektir.
İki haneli bir onaltılık sayı 0 ile 255 arasındaki her değeri tek bir çiftle yazabilir. Hesap basittir: soldaki hane 16 ile çarpılır, sağdaki hane üzerine eklenir. E6 için 14 çarpı 16 eşittir 224, üzerine 6 eklenince 230 çıkar. Bir bayt tam olarak bu aralığı taşıdığı için onaltılık taban renk değerlerine birebir oturur; üç bileşen altı haneye sığar.
Bu düzenin pratik sonucu, altı hanenin 16,7 milyon farklı rengi adresleyebilmesidir. 256 çarpı 256 çarpı 256 işlemi 16.777.216 sonucunu verir. Sayı tabanı mantığının başka alanlardaki karşılıklarını merak ediyorsanız algoritma yazımız adım adım işleyen kuralların nasıl kurulduğunu anlatıyor.
Üç haneli kısa yazım ve sekiz haneli saydamlık
Üç haneli biçim bir kısaltmadır. Tarayıcı her haneyi kendisiyle ikiler: #FA0 kodunu #FFAA00 olarak okur. Bu yüzden kısaltma yalnızca her çiftin iki hanesi aynıyken geçerlidir. #E63946 gibi bir kodun üç haneli karşılığı yoktur; zorlarsanız başka bir renk elde edersiniz.
Sekiz haneli biçim sona bir çift daha ekler ve bu çift saydamlığı (alpha) taşır. 00 tamamen saydam, FF tamamen opak demektir. #1D355780 kodundaki 80 onluk tabanda 128’e denk gelir; 255’in yaklaşık yarısı olduğu için yüzde 50 civarında bir saydamlık verir. Dört haneli kısa biçim de aynı mantıkla çalışır ve son hane alpha olur.
Dikkat
Saydam renk, kontrast hesabını bozar. Yüzde 50 saydamlıkla verilen bir metin rengi, arkasındaki yüzeye göre farklı bir sonuç üretir. Erişilebilirlik ölçümünü saydam değerle değil, yüzeyle karışmış gerçek sonuç rengiyle yapın. Tarayıcı denetçisi hesaplanmış rengi gösterir; ölçümü oradan okuyun.
HEX, RGB ve HSL arasında dönüşüm
Üç gösterim de aynı rengi anlatır, yazım biçimleri farklıdır. HEX’ten RGB’ye geçmek için her çifti onluk tabana çevirmek yeterlidir. Ters yönde her bileşen onaltılık tabana çevrilir ve tek hane çıkarsa başına sıfır eklenir: 7 değeri 07 olarak yazılır, 7 olarak değil.
HSL ise rengi ton, doygunluk ve açıklık olarak üç eksende tarif eder. Ton 0-360 derece arasında bir açıdır, diğer ikisi yüzdedir. #E63946 kodunun HSL karşılığı yaklaşık hsl(355, 78%, 56%) olur. Bu yazım, aynı tonun daha açık ya da daha koyu bir varyantını üretmek istediğinizde işi kolaylaştırır: yalnızca son değeri değiştirirsiniz.
| Gösterim | Örnek | Ne zaman tercih edilir |
|---|---|---|
| 6 haneli HEX | #1D3557 |
Marka renklerini kılavuzda ve kodda sabitlerken; kopyala yapıştır en güvenli biçimdir |
| 3 haneli HEX | #FA0 |
Hızlı taslak ve prototipte; yalnızca haneleri eşleşen renklerde |
| 8 haneli HEX | #1D355780 |
Gölge, örtü katmanı ve devre dışı durum gibi saydamlık gereken yerlerde |
| RGB | rgb(230, 57, 70) |
Değerin betikle hesaplanacağı ya da bileşen bileşen okunacağı durumlarda |
| HSL | hsl(355, 78%, 56%) |
Tek tondan açık ve koyu varyant üretirken; tema değişkeni kurarken |
Örnek senaryo
Bir mobilya atölyesi kurumsal kimliğini yeniledi ve ana rengi #1D3557 olarak belirledi. Site geliştiricisi rengi butonlara elle girdi, üç yerde son hane yanlış yazıldı. Ekran görüntüsünde fark edilmeyen sapma, baskı kataloğuyla yan yana konunca ortaya çıktı. Ekip renkleri CSS değişkenine taşıdı, tüm bileşenler tek kaynaktan beslendi ve elle yazım tamamen kalktı. Sonraki revizyonda ana rengi değiştirmek tek satırlık iş oldu.
CSS’te HEX kodunu doğru kullanmak
CSS tarafında kod doğrudan yazılır: color: #1D3557; ya da background-color: #E63946; gibi. Sorun genelde yazımda değil, aynı kodun onlarca yere kopyalanmasında çıkar. Tek bir revizyon istendiğinde tüm dosyada arama yapmak gerekir ve bir yer mutlaka atlanır.
Çözüm renkleri değişkende toplamaktır. Kök seçicide --marka-lacivert: #1D3557; gibi bir tanım yapar, kullandığınız her yerde var(--marka-lacivert) yazarsınız. Böylece palet tek dosyada durur, koyu tema gibi varyantlar aynı isimleri yeniden tanımlayarak kurulur. Renk değerlerinin CSS’te kabul edilen tüm biçimleri MDN renk değeri dokümanında listelenmiştir.
WordPress kullanıyorsanız tema özelleştiricisindeki renk alanları da aynı kodu bekler. Alana kodu # işaretiyle birlikte yapıştırın; bazı alanlar işaretsiz değeri kabul eder ama ikisini karıştırmak sonradan kafa karıştırır.
Marka paleti ve erişilebilirlik için kontrast oranı
Bir marka paleti genelde bir ana renk, bir vurgu rengi ve birkaç nötr griden oluşur. Bunları tek bir listede, HEX kodlarıyla yazılı tutmak gerekir. Kılavuzda kod yoksa herkes ekrandan göz kararı renk seçer ve palet kısa sürede dağılır.
İkinci kontrol kontrast oranıdır. Metin rengi ile arka plan arasındaki oran, normal boyutlu metinde en az 4,5:1 olmalıdır; büyük puntolu metinde 3:1 yeterli sayılır. #1D3557 üzerine beyaz metin yaklaşık 11,9:1 oran verir ve rahatlıkla geçer. Buna karşılık #9AA0A6 gibi bir açık gri üzerine beyaz metin yaklaşık 2,7:1’de kalır ve eşiğin altındadır. Eşiklerin tanımını W3C kontrast kılavuzunda bulabilirsiniz.
Renk kodunu nereden alırsınız?
Üç yaygın yol var. Birincisi tasarım aracıdır: dosyadaki nesneyi seçip renk alanından kodu kopyalarsınız, tasarımcıdan gelen en güvenilir kaynak budur. İkincisi tarayıcı denetçisidir; bir öğeyi seçtiğinizde stil panelinde hesaplanmış renk görünür ve tıklayınca gösterim biçimi HEX, RGB, HSL arasında değişir.
Üçüncüsü işletim sistemi ya da tarayıcı eklentisi olarak gelen renk seçicidir. Ekrandaki herhangi bir pikselin kodunu verir. Burada bir tuzak var: ekran görüntüsü sıkıştırılmışsa ya da üzerinde saydam bir katman varsa okuduğunuz kod gerçek marka rengi olmaz. Baskı ve ekran kaynakları arasındaki farkları yazıya dökmek isterseniz makale yazımızdaki kaynak gösterme yaklaşımı işinize yarar.
Uygulama kontrol listesi
- Marka paletindeki her rengi altı haneli HEX kodu ile yazılı bir listede tutun.
- Renkleri CSS değişkenine taşıyın, bileşenlerde kodu doğrudan yazmayın.
- Kısa yazımı yalnızca haneleri eşleşen renklerde kullanın, dönüşümü kontrol edin.
- Saydamlık gerekiyorsa sekiz haneli biçimi kullanın; son çiftin karşılığını not düşün.
- Metin ve arka plan çiftlerinin kontrast oranını ölçün, 4,5:1 eşiğini geçirin.
- Tasarım dosyasındaki kod ile sitedeki kodu yan yana karşılaştırın.
- Renk seçiciyle ekrandan alınan kodu asıl kaynağa doğrulatmadan palete eklemeyin.
- Palet değişikliklerini tek dosyada toplayın ve değişiklik tarihini yazın.
Sonuç
HEX kodu nedir sorusunun cevabı altı hanede saklı: iki hane kırmızı, iki hane yeşil, iki hane mavi. Kısa yazım hız kazandırır, sekiz haneli biçim saydamlık ekler, HSL ise varyant üretmeyi kolaylaştırır. Paleti değişkende toplayıp kontrast oranını ölçtüğünüzde renk sorunlarının büyük kısmı kendiliğinden biter.
Sıkça sorulan sorular
HEX kodu nedir, RGB ile arasında görüntü farkı var mı?
HEX kodu, rengin kırmızı, yeşil ve mavi bileşenlerini onaltılık tabanda yazan gösterimdir. RGB ile arasında görüntü farkı yoktur; #E63946 ile rgb(230, 57, 70) ekranda aynı rengi verir. Fark yalnızca yazım biçimindedir: HEX tek parça olduğu için kopyalamaya, RGB bileşenlere ayrık olduğu için hesaplamaya uygundur.
Üç haneli kod ile altı haneli kod aynı rengi mi verir?
Yalnızca her çiftin iki hanesi aynıysa. Tarayıcı üç haneli kodu okurken her haneyi ikiler, bu yüzden #FA0 ile #FFAA00 aynıdır. Haneleri farklı olan bir rengin üç haneli karşılığı bulunmaz; kısaltmaya zorlarsanız gözle fark edilen bir sapma çıkar.
Sekiz haneli koddaki son iki hane ne anlama geliyor?
Saydamlığı, yani alpha değerini taşır. 00 tamamen saydam, FF tamamen opak demektir. Aradaki değerler orantılı bir geçiş verir; 80 yaklaşık yüzde 50, CC ise yaklaşık yüzde 80 opaklık anlamına gelir. Gölge ve örtü katmanlarında sık kullanılır.
Tasarımcıdan gelen renk sitede farklı görünüyor, sebebi ne olabilir?
En sık üç sebep var. Kod elle yazılırken bir hane yanlış girilmiş olabilir. Rengin üzerinde saydam bir katman ya da gölge bulunuyor olabilir. Üçüncüsü, kod ekran görüntüsünden renk seçiciyle alınmıştır ve sıkıştırma yüzünden asıl değerden sapmıştır. Kodu her zaman tasarım dosyasından kopyalayın.
Renk kodunu CSS değişkenine taşımak gerçekten gerekli mi?
Tek sayfalık bir site için şart değil, ama sayfa sayısı arttıkça fark açılır. Değişken kullandığınızda palet tek yerde durur, revizyon tek satırda biter ve koyu tema gibi varyantlar aynı isimleri yeniden tanımlayarak kurulur. Kodu her bileşene elle yazmak, ilk renk değişikliğinde saatlik bir temizlik işine dönüşür.
Narhost’ta
Kurumsal kimliğinizi doğru taşıyan bir site için hızlı bir zemin gerekir. Web hosting paketlerinde NVMe SSD disk, ücretsiz SSL, Türkçe cPanel ve ücretsiz taşıma hazır gelir.