HTML renk kodları nasıl çalışır?

Web tasarımında renk üç farklı sistemle tanımlanır: HEX, RGB ve HSL. Bunların yanı sıra baskı işlerinde CMYK kullanılır. Bu dört sistem aynı rengi farklı biçimlerde ifade eder; aralarında birebir matematiksel dönüşüm yapılabilir. HTML Renk Kodu Dönüştürücü, bu dört format arasında anlık çeviri yapar; ayrıca seçili renk çiftleri için WCAG erişilebilirlik puanını hesaplar.

HEX kodunun yapısı

HEX kodu onaltılık (base-16) tabanda yazılır. Her kanal (kırmızı, yeşil, mavi) iki haneyle temsil edilir. İki hane, 00'dan FF'e kadar 256 farklı değer verir; bu da kanalın 0-255 arasındaki tam sayı karşılığına denk gelir.

Örneğin #2563EB kodunu ele alalım. İlk iki hane 25 onaltılık değeri, ondalıkta 37'ye karşılık gelir. Yani kırmızı kanalı 37. Orta iki hane 63 ondalıkta 99, yani yeşil kanalı 99. Son iki hane EB ondalıkta 235, yani mavi kanalı 235. Sonuç: rgb(37, 99, 235).

Onaltılıktan ondalığa geçiş için basit bir çarpma kullanılır: sol hane 16 ile çarpılır, sağ hane eklenir. E harfi 14 değerine karşılık geldiğinden EB = 14 × 16 + 11 = 235. Onaltılık ve ikili (binary) sistemler arasındaki ilişkiyi merak ediyorsanız Binary Dönüştürücü aracını kullanabilirsiniz.

Kısa HEX biçimi

CSS, üç haneli kısa biçimi de kabul eder. #F80 yazıldığında tarayıcı bunu #FF8800 olarak okur. Her hane yinelendiğinden kısa biçim yalnızca her iki hanenin de aynı olduğu renklerde geçerlidir. Örneğin #2563EB kısaltılamaz; ancak #FF0000, #F00 olarak yazılabilir.

Sekiz haneli biçim #RRGGBBAA ise alfa kanalını da içerir. Son iki hane şeffaflığı belirtir: FF tam opak, 00 tam saydam demektir. Araç bu biçimi de tanır ve alfa değerini ayrıca gösterir.

RGB modeli

RGB, kırmızı (Red), yeşil (Green) ve mavi (Blue) ışığın karışımına dayanır. Her kanal 0 ile 255 arasında bir değer alır. Üç kanalın toplamı beyaz ışığı verir: rgb(255, 255, 255) beyaz, rgb(0, 0, 0) siyahtır. Ekran teknolojileri bu sistemi temel alır; dolayısıyla RGB değerleri CSS'e doğrudan yazılabilir.

Araçtaki kopyalama butonu rgb(), hsl() ve HEX formatlarını CSS'e hazır satırlar olarak panoya taşır.

HSL modeli ve tasarımda kullanımı

HSL üç bileşenden oluşur: renk tonu (Hue), doygunluk (Saturation) ve açıklık (Lightness). Renk tonu 0-360 derece arasında bir açıdır; 0 kırmızı, 120 yeşil, 240 mavidir. Doygunluk ve açıklık yüzde olarak verilir.

HSL'nin tasarımcılar için temel avantajı şudur: RGB'de bir rengi koyulaştırmak üç kanalı aynı anda değiştirmeyi gerektirir. HSL'de yalnızca açıklık değerini düşürmek yeterlidir. Bir buton için hover durumu üretmek ya da bir marka renginin soluk tonunu oluşturmak HSL'de tek parametre değişikliğine indirgenir.

RGB'den HSL'ye dönüşüm formülü

Önce R, G, B değerleri 255'e bölünerek 0-1 aralığına indirgenir. Ardından şu adımlar izlenir:

max = en büyük kanal değeri, min = en küçük kanal değeri

L = (max + min) / 2

S = (max − min) / (1 − |2L − 1|) [L ≠ 0 ve L ≠ 1 ise]

Renk tonu H, hangi kanalın en büyük olduğuna göre hesaplanır:

Kırmızı en büyükse: H = 60 × ((G − B) / (max − min))

Yeşil en büyükse: H = 60 × ((B − R) / (max − min) + 2)

Mavi en büyükse: H = 60 × ((R − G) / (max − min) + 4)

Sonuç negatif çıkarsa 360 eklenir. Örnek olarak #2563EB = rgb(37, 99, 235) için mavi kanal en büyük olduğundan H ≈ 221 çıkar; L ≈ %53 ve S ≈ %83 olur. Dolayısıyla bu rengin HSL karşılığı hsl(221, 83%, 53%)'dir.

CMYK ve ekran-baskı farkı

CMYK, baskı sektöründe kullanılan mürekkep modelidir: siyan (Cyan), macenta (Magenta), sarı (Yellow) ve siyah (Key). Araç, ekrandaki RGB değerlerinden CMYK'ya şu formülle geçer:

R' = R/255, G' = G/255, B' = B/255

K = 1 − max(R', G', B')

C = (1 − R' − K) / (1 − K)

M = (1 − G' − K) / (1 − K)

Y = (1 − B' − K) / (1 − K)

Bu hesaplama basit bir matematiksel dönüşümdür ve ICC baskı profili kullanmaz. Gerçek bir matbaada çıktı alırken mürekkep yoğunluğu, kağıt cinsi ve baskı makinesi kalibrasyonu rengi etkiler; dolayısıyla ekranda gördüğünüz CMYK değerleri matbaa makinesiyle birebir örtüşmeyebilir. Profesyonel baskı işlerinde renk yönetimi yazılımı ve kalibre edilmiş ICC profili gerekir. Araçtaki CMYK değerleri ön fikir edinmek ve taslak çalışmalarda referans olarak kullanmak için uygundur.

WCAG kontrast oranı ve erişilebilirlik

Web İçeriği Erişilebilirlik Kılavuzu (WCAG 2), metin ile arka plan arasındaki kontrast için minimum eşikler belirler. Araçtaki kontrast bölümünde bir ön plan ve bir arka plan rengi seçilir; ikisi arasındaki oran hesaplanır.

Göreli parlaklık hesabı

Her kanal önce doğrusallaştırılır. 0-255 değeri 255'e bölünerek c elde edilir, ardından:

c ≤ 0,04045 ise: doğrusal değer = c / 12,92

c > 0,04045 ise: doğrusal değer = ((c + 0,055) / 1,055) ^ 2,4

Göreli parlaklık L şöyle hesaplanır:

L = 0,2126 × R_dogrusal + 0,7152 × G_dogrusal + 0,0722 × B_dogrusal

Kontrast oranı için L1 daha parlak rengin parlaklığıdır:

oran = (L1 + 0,05) / (L2 + 0,05)

Siyah ile beyaz arasındaki maksimum oran 21:1'dir. WCAG AA standardı normal metin için 4,5:1, büyük metin için 3:1 gerektirir. WCAG AAA ise normal metin için 7:1 ister.

Pratik bir örnek: gri ton #777777, beyaz arka plan üzerinde yaklaşık 4,48:1 kontrast oranı verir. Bu değer AA eşiğinin (4,5:1) hemen altında kaldığından normal beden metin için AA testini geçemez. Büyük metin (18pt veya 14pt kalın) için 3:1 eşiği geçildiğinden AA onaylanır. Bu fark yalnızca 0,02:1 aralığında oluştuğundan gri tonlamalarla çalışırken kontrast araçlarıyla kontrol etmek önem taşır.

Araç, kontrast sonuçlarını dört ayrı kategoride gösterir: AA normal metin, AA büyük metin, AAA normal metin, AAA büyük metin. Her biri için "geçti" ya da "kaldı" etiketi ve önizleme kutusu görüntülenir.

Yüzde Hesaplama aracıyla CMYK ve HSL değerlerindeki yüzde dönüşümlerini ayrıca doğrulayabilirsiniz. Renk oranları üzerinde çalışıyorsanız Oran-Orantı Hesaplama aracı da işe yarar.

Renk örnekleri: HEX, RGB ve HSL karşılaştırması

Alfa kanalı ve şeffaflık

Sekiz haneli HEX formatında (#RRGGBBAA) son iki hane şeffaflık değerini taşır. FF tam opak, 80 yaklaşık %50 saydam, 00 tam saydamdır. CSS'te bu değer rgba() ya da hsla() fonksiyonunda 0-1 aralığında bir ondalık sayıya karşılık gelir. Araç, alfa değerini diğer kanallardan ayrı olarak gösterir ve CSS'e hazır kopyalama seçeneğine dahil eder.

CSS kopyalama özelliği

Araçtaki kopyalama butonu seçili rengi üç farklı CSS formatında panoya taşır: onaltılık HEX kodu, rgb() fonksiyonu ve hsl() fonksiyonu. Bu değerler doğrudan CSS dosyasına yapıştırılabilir; ek düzenleme gerekmez.

QR kod üretmek için QR Kod Oluşturucu aracından yararlanabilirsiniz. Genel matematik araçlarının tamamını görmek için Matematik Hesaplama Araçları sayfasını ziyaret edebilirsiniz. Onaltılık sayı sistemini daha ayrıntılı incelemek isterseniz Binary Dönüştürücü sayfasındaki açıklamalar HEX'in temelini anlamaya yardımcı olur.