#ff8800 ile rgb(255, 136, 0) aynı rengi anlatır. Kodların nasıl okunduğunu, birbirine nasıl çevrildiğini ve bir metin renginin WCAG kontrast eşiklerini geçip geçmediğini nasıl hesaplayacağınızı örneklerle anlatıyoruz.
Renk kodları, ekrandaki bir rengi sayılarla tarif etmenin yoludur. Web'de en çok kullanılan iki yazım HEX (#ff8800) ve RGB'dir (rgb(255, 136, 0)). İkisi de aynı üç kanalı, yani kırmızı, yeşil ve mavi ışığın miktarını 0–255 arasında ölçer; fark yalnızca sayıların on altılık mı onluk mu yazıldığıdır. HSL ise aynı rengi ton, doygunluk ve açıklık olarak anlatır. Hangisini seçerseniz seçin, tarayıcı aynı pikseli boyar.
Bir rengin kodunu bulmak için renk seçici, seçtiğiniz rengin HEX ve RGB değerini birlikte gösterir. Küçültülmüş bir stil dosyasında renkleri aramanız gerekiyorsa CSS düzenleyici kodu satır satır okunur hâle getirir. Mevcut bir stil dosyasını Sass'a taşırken CSS'ten SCSS'e dönüştürücü kuralları iç içe yazar (renk değişkenlerini sizin tanımlamanız gerekir), SCSS'ten CSS'e dönüştürücü ise darken() ve rgba() gibi renk fonksiyonlarını gerçek değerlere çevirir.
Bir HEX kodu # işaretinden sonra üç çift on altılık rakamdan oluşur: #RRGGBB. İlk çift kırmızı, ikincisi yeşil, üçüncüsü mavi kanalıdır. On altılık sistemde rakamlar 0–9 ve a–f'dir; 00 sıfıra, ff 255'e karşılık gelir. Her kanal 256 değer alabildiği için toplam 256 × 256 × 256 = 16.777.216 farklı değer yazılabilir.
| HEX | Kırmızı | Yeşil | Mavi | Görünen |
|---|---|---|---|---|
#000000 | 0 | 0 | 0 | Siyah |
#ffffff | 255 | 255 | 255 | Beyaz |
#ff0000 | 255 | 0 | 0 | Saf kırmızı |
#ff8800 | 255 | 136 | 0 | Turuncu |
#2563eb | 37 | 99 | 235 | Canlı mavi |
#767676 | 118 | 118 | 118 | Orta gri |
Üç kanal eşit olduğunda sonuç her zaman gridir; değer yükseldikçe açılır. Bir kodun hangi tona yakın olduğunu tahmin etmek için en büyük çifte bakmak yeterlidir: #2563eb'de mavi çift (eb = 235) ötekilerin çok üstündedir. Kırmızıyla yeşilin birlikte yüksek olması ise sarıyı verir, çünkü ekran boya değil ışık karıştırır.
Her çiftin iki hanesi aynıysa kod üç haneye indirilebilir. Tarayıcı her haneyi ikiler: #f80, #ff8800 olarak okunur; #fff beyaz, #000 siyahtır. #8f39e8 gibi çiftleri farklı hanelerden oluşan bir kod kısaltılamaz; #8fe yazmak tamamen başka bir renk (#88ffee) üretir. Büyük/küçük harf tarayıcı için fark etmez, ama bir projede tek bir yazımda karar kılmak arama ve karşılaştırmayı kolaylaştırır.
CSS Color Module Level 4 ile isteğe bağlı dördüncü bir çift eklendi: #RRGGBBAA. Son çift saydamlıktır; ff tamamen opak, 00 tamamen saydamdır. #2563eb80 yaklaşık yüzde 50 opaklıktaki mavidir, çünkü 128 / 255 ≈ 0,5 eder. Dört haneli kısa biçimi de vardır: #f808, #ff880088 demektir. Güncel tarayıcıların hepsi destekler; yine de kodu okuyan bir ekip arkadaşı için rgb() içindeki yüzde değeri çoğu zaman daha anlaşılırdır.
RGB aynı üç sayıyı onluk tabanda yazar: rgb(255, 136, 0). Saydamlık için tarihsel olarak rgba() kullanılır ve dördüncü değer 0 ile 1 arasındadır. Güncel CSS'te virgülsüz yazım da geçerlidir ve rgb() saydamlığı eğik çizgiden sonra doğrudan kabul eder:
color: rgb(255 136 0 / 50%);background: rgba(37, 99, 235, 0.15);
İki yazım da aynı sonucu verir; çok eski tarayıcı desteği gereken projelerde virgüllü biçim daha güvenlidir. RGB'nin HEX'e göre tek gerçek avantajı hesaplamadır: bir değeri koyulaştırmak ya da saydamlık eklemek onluk sayılarla daha kolay düşünülür.
HSL bir rengi insanın soracağı üç soruyla tarif eder. Ton (hue) renk çemberindeki açıdır: 0 kırmızı, 120 yeşil, 240 mavi. Doygunluk (saturation) rengin ne kadar canlı olduğunu, açıklık (lightness) ne kadar aydınlık olduğunu yüzde olarak verir. Yüzde 50 açıklık rengin en saf hâlidir; yüzde 0 siyaha, yüzde 100 beyaza gider. #2563eb bu sistemde hsl(221, 83%, 53%) olarak yazılır.
HSL'nin gücü bir renk ailesi üretirken ortaya çıkar. Tonu ve doygunluğu sabit tutup yalnızca açıklığı değiştirerek bir düğmenin normal, üzerine gelinmiş ve basılmış hâllerini tutarlı biçimde türetebilirsiniz. SCSS'teki darken() ve lighten() fonksiyonları tam olarak bunu yapar: HSL açıklığını verilen puan kadar azaltır ya da artırır.
$marka: #2563eb;.btn:hover { background: darken($marka, 10%); }
Bu kod CSS'e derlendiğinde background: #134cca; satırını üretir. Açıklık 53'ten 43'e iner, ton ve doygunluk yerinde kalır.
Dönüştürme, aynı değerin farklı bir dilde yazılmasıdır; bilgi kaybı olmaz. Renk seçici seçtiğiniz rengin HEX ve RGB karşılığını birlikte verir. Mantığı oturtmak için bir kez elle yapmak isterseniz:
#8f39e8 → 8f, 39, e8.8f = 8 × 16 + 15 = 143; 39 = 3 × 16 + 9 = 57; e8 = 14 × 16 + 8 = 232.rgb(143, 57, 232).e8.| Ad | HEX | RGB | HSL |
|---|---|---|---|
| Marka mavisi | #2563eb | rgb(37, 99, 235) | hsl(221, 83%, 53%) |
| Turuncu | #ff8800 | rgb(255, 136, 0) | hsl(32, 100%, 50%) |
| Mor | #8f39e8 | rgb(143, 57, 232) | hsl(269, 79%, 57%) |
| Orta gri | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
HSL değerleri genellikle tam sayıya yuvarlanır; bu yüzden HSL üzerinden gidip dönen bir değer bir birim sapabilir. Bir rengi sistemler arasında taşırken asıl kaynağı HEX ya da RGB olarak saklamak daha güvenlidir.
Güzel bir palet okunamıyorsa işe yaramaz. W3C'nin Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.1 ve 2.2) metin ile arka plan arasındaki farkı bir oranla ölçer. Oran 1:1 (aynı renk) ile 21:1 (beyaz üzerinde siyah) arasındadır ve eşikler şöyledir:
Önce her rengin göreli parlaklığı (relative luminance) bulunur. Her kanal 255'e bölünür ve doğrusallaştırılır: değer 0,04045 veya altındaysa 12,92'ye bölünür, değilse ((değer + 0,055) / 1,055) sayısının 2,4'üncü kuvveti alınır. Yönergelerin eski kopyalarında bu eşik 0,03928 olarak geçer; 8 bitlik renklerde sonuç değişmez. Parlaklık L = 0,2126 × R + 0,7152 × G + 0,0722 × B ile hesaplanır; yeşilin ağırlığı, gözün o kanala daha duyarlı olmasındandır. Oran ise (açık olanın L değeri + 0,05) / (koyu olanın L değeri + 0,05) formülüyle bulunur.
| Metin | Arka plan | Oran | Sonuç |
|---|---|---|---|
#767676 | Beyaz | 4.54:1 | Normal metinde AA geçer |
#777777 | Beyaz | 4.48:1 | Normal metinde kalır, büyük metinde geçer |
#595959 | Beyaz | 7.00:1 | AAA geçer |
#ff8800 | Beyaz | 2.39:1 | Büyük metinde bile kalır |
| Siyah | #ff8800 | 8.77:1 | AAA geçer |
#2563eb | Beyaz | 5.17:1 | Normal metinde AA geçer |
Tablodaki iki gri, tek birimlik farkın eşiği nasıl değiştirdiğini gösterir. Turuncu satırlar ise sık yapılan bir hatayı: marka turuncusu beyaz zemin üzerinde metin rengi olarak kullanılamaz, ama turuncu zemin üzerine siyah ya da çok koyu metin rahatlıkla geçer. Parlak marka renklerinde genel kural budur: üzerine açık değil, koyu yazı koyun.
Pasif (devre dışı) arayüz bileşenleri ve tamamen süs amaçlı öğeler kontrast şartından muaftır; ama bu muafiyet okunması beklenen metni kapsamaz.
Büyüyen projelerde asıl sorun renk seçmek değil, aynı değerin on farklı yazımla dosyalara dağılmasıdır. Birkaç alışkanlık bunu önler:
--renk-marka: #2563eb;) ya da SCSS değişkenleri ($marka) kullanın.#FFF, #fff ve #ffffff üç ayrı sonuç gibi görünür.rgba($marka, 0.15).Yok. İkisi de kanal başına 8 bitlik aynı değeri farklı sayı tabanında yazar. #ff8800 ile rgb(255, 136, 0) ekranda aynı pikseli üretir; seçim tamamen okunabilirlik ve ekip alışkanlığı meselesidir.
İkisi de çalışır. Sekiz haneli HEX daha kısadır, ama saydamlığı on altılık bir çiftle yazdığı için ilk bakışta okunmaz. rgb(37 99 235 / 15%) gibi bir yazım, değeri kodu inceleyen herkes için açık hâle getirir.
Kodlar sRGB renk uzayındaki bir değeri tarif eder. Ekranın kalibrasyonu, parlaklığı ve geniş renk gamı desteği bu değeri farklı gösterebilir. Kod aynı kaldığı sürece tarayıcının istediği renk aynıdır.
Olur. Yönergelerde yuvarlama yoktur; 4.48:1 eşiği geçmez ve otomatik denetim araçları bunu hata olarak raporlar. Metni bir ton koyulaştırmak çoğu zaman tasarımı bozmadan sorunu çözer.
Renklerin vektör çizimlerde nasıl saklandığını merak ediyorsanız SVG dosyası nedir yazısına, renk sayısının dosya boyutuna etkisi için görsel formatı nasıl seçilir rehberine bakabilirsiniz. Stil dosyalarınızı yayına hazırlarken kod küçültme yazısı, küçük ikonları CSS'e gömmeyi düşünüyorsanız Base64 nedir yazısı işinize yarar.
