HEX, RGB, HSL ve daha yeni renk uzayları

CSS'te bir renk, üç ya da dört sayı ile bunların nasıl okunacağını söyleyen bir kuraldan, yani renk uzayından oluşur. Ekranda dengesiz görünen paletler genellikle görmenin işleyişine uymayan bir uzayda adımlanmıştır.

HEX ile RGB aynı sayılardır

#3B82F6 on altılık tabanda üç bayttır: 3B 59, 82 130, F6 246 eder, dolayısıyla rgb(59, 130, 246) onluk tabanda aynı renktir ve bir renk dönüştürücü ikisi arasında kayıpsız gidip gelir.

Üç haneli kısaltma her haneyi dolgu yapmak yerine ikiye katlar, dolayısıyla #F80 açıldığında #F08000 değil #FF8800 olur; yalnızca 4.096 rengin kısa biçimi vardır. #RGBA aynı yolla bir alfa hanesi ekler, #RRGGBBAA ise dört baytı da açık açık yazar; o alfa baytı 0 ile 255 arasında gider (1A %10, 80 %50, CC %80 demektir), oysa CSS'teki diğer bütün alfa değerleri 0 ile 1 arasındadır. Modern sözdizimi ayrıca boşlukla ayrılmış bileşenleri ve eğik çizgiden sonra alfayı kabul eder: rgb(59 130 246 / 50%).

Bu sayılar ışık miktarı değildir. sRGB her kanalı kabaca 2.2'lik bir aktarım eğrisinden geçirerek kodlar, dolayısıyla 128 değeri 255 değerinin yaydığı ışığın yarısını değil yaklaşık %21,6'sını yayar ve ham değerler üzerinden hesaplanan her karışım bu eğriyi devralır.

HSL, HSV ve açıklık olmayan açıklık

HSL aynı RGB küpünü bir silindire yeniden dizer: renk tonu bir açıdır (0 kırmızı, 120 yeşil, 240 mavi), doygunluk merkezdeki gri eksene olan uzaklıktır ve açıklık 0'dan saf tonun bulunduğu %50'ye, oradan beyazın olduğu %100'e uzanır. HSV açıklığı değer ile değiştirir; değerin tepesinde beyaz değil saf ton vardır, dolayısıyla açık tonlar doygunluk düşürülerek elde edilir. İkisi de algı hakkında hiçbir şey bilmez.

İkisi de %50 açıklık iddiasındadır; biri diğerinin yaklaşık on üç katı ışık yayar. Her tonu %50'ye sabitlenmiş bir token satırı, ağırlıkları birbirine karışmış bir yığın gibi okunur.

Renk tonu ile doygunluk sabitken HSL açıklığını adımlamak da aynı nedenle, üstelik bir sebep daha yüzünden işe yaramaz: doygunluk, o açıklıkta kalan yere göre ölçülür, dolayısıyla en renkli adım %50'dir ve iki yanındaki her şey solar. Ton açısı da yerinde kalırken algılanan renklilik çöker; orta adımların çamurlu görünmesine yol açan budur. Bunlar taban rengin koyulaştırılmış hali değil, kimsenin seçmediği bir miktar grileştirilmiş halidir.

Sarı bunun en kötüsünü gösterir. HSL açıklığını düşürmek bir sarıyı doğruca zeytin yeşiline götürür, çünkü o ton açısındaki koyu bir sarı zaten zeytin yeşilidir; onu sarı tutmak da inerken tonu turuncuya doğru döndürmeyi gerektirir. Mavinin sorunu tam tersidir: luminansı o kadar düşüktür ki kullanılabilir değişiminin tamamı %50'nin üstünde yaşar.

LCH ve OKLCH

LCH, renk eşleştirme deneyleri üzerine kurulu CIE Lab'ın kutupsal biçimidir: 0 ile 100 arası açıklık, renklilik (kroma, sabit bir üst sınırı yok) ve bir ton açısı. OKLCH ise aynı biçimin Oklab üzerindeki halidir ve Lab'ın bilinen ton kaymalarını, en görünür biçimde de açılırken mora kayan mavileri düzeltir.

.a { color: oklch(0.62 0.21 260); }        /* L 0 to 1, C about 0 to 0.37, H in degrees */
.b { color: oklch(62% 0.21 260 / 50%); }   /* percentages and alpha both allowed */
.c { color: lch(52% 82 285); }             /* L runs 0 to 100 here */

Algısal tekdüzelik, eşit sayısal uzaklığın eşit algılanan uzaklığa yakın olması demektir. 0.08 açıklık adımlarıyla kurulan bir rampa eşit adımlar gibi görünür, tek bir açıklığa sabitlenmiş bir ton dizisi tek bir sıra gibi okunur ve açıklığı değiştirmek tonu koyduğunuz yerde bırakır. Ara değerleme de bu uzayı kullanabilir, örneğin linear-gradient(in oklch, #0000FF, #FFFF00). Bir uyarı: OKLCH açıklığı HSL'ye göre görünen parlaklığa çok daha yakındır, ama WCAG luminans formülü değildir, dolayısıyla metin çiftleri yine bir kontrast denetleyicisinden geçer.

Gamut ve kırpma

Gamut, bir uzayın temsil edebildiği renkler kümesidir. Uzun süredir varsayılan olan sRGB'dir; Display P3, görünür rengin kabaca dörtte bir fazlasını kapsar ve bu kazancın neredeyse tamamı koyu kırmızılar ile yeşillerdedir. OKLCH'de kroma sınırsızdır, dolayısıyla hiçbir ekranın gösteremeyeceği bir renk yazmak kolaydır.

@supports (color: color(display-p3 1 1 1)) {
  .vivid { background: color(display-p3 0.9 0.1 0.14); }
}

Kanal başına kırpma, gamut dışındaki bir rengi her kanalı ayrı ayrı sınırına sabitleyerek geri getirir; bu da tonu kaydırır ve komşu tonları tek bir değere düzler, dolayısıyla geçişler bantlanır ve ayrıntı kaybolur. CSS Color 4 bunun yerine eşleme yapar: açıklık ile tonu koru, renk sığana kadar OKLCH'de kromayı azalt.

Canlı bir fotoğrafın ekran görüntüsünün neden donuk görünebildiğini de bu açıklar. Fotoğraf bir P3 profili taşır ve ekran onu tümüyle gösterir; sRGB'ye çevrilmiş bir dışa aktarım ise o doygun pikselleri daha küçük bir hacme sıkıştırır ve en uzun yolu kırmızılar ile yeşiller katetmek zorundadır.

Alfa birleştirme

Bir zeminin üstündeki yarı saydam bir renk, kanal kanal işlenerek üçüncü ve opak bir renk üretir:

result = alpha * source + (1 - alpha) * backdrop

Beyaz üzerinde %50 siyah (127.5, 127.5, 127.5), yani #808080 verir. "Siyahın %50 opaklığı gridir" sözü bu rastlantıdan gelir ve yalnızca beyaz üzerinde geçerlidir: aynı siyah #3B82F6 üzerinde yaklaşık #1E417B, yani koyu bir mavi verir, bir fotoğrafın üzerinde ise her pikselde başka bir renk verir. Yarı saydam siyah bir gri değil, bir koyulaştırma işlecidir.

Birleştirme kodlanmış değerler üzerinde çalışır, dolayısıyla o #808080 rengin bağıl luminansı 0.5 değil yaklaşık 0.216'dır. Bildirilen rengi değil, birleştirilmiş hex değerini ölçün. Alfa da beklendiği gibi üst üste binmez: %50'lik iki katman %75'i kapatır, çünkü ikincisi yalnızca birincinin geçirdiği kısma etki eder.

Açık tonlar, koyu tonlar, kırık tonlar ve uyumlar

Uyumlar birer ton kaydırmasıdır. Bir vurgu rengi seçerler; bir sistem kurmazlar.

RGB çarkındaki kaydırmalar algısal olarak eşit aralıklı değildir, çünkü o çark yayın orantısız bir bölümünü yeşile ayırır; bu yüzden hesaplanmış bir uyumu ilk taslak sayın ve gözle düzeltin. Tek bir tabandan açık tonlar, koyu tonlar ve uyumlar üreten bir palet üreticisi, o taslağı hızla ekrana getirir.

Nötr rampa kendi kararını gerektirir. Kırmızısı, yeşili ve mavisi eşit olan saf bir gri, renkli bir arayüzün yanında ölü ve hafif kirli görünür. Nötrlere marka tonuna yakın küçük bir kroma verin, OKLCH'de kabaca 0.005 ile 0.02 arası: 60° ile 90° dolayındaki sıcak griler kâğıt gibi okunur, 250° dolayındaki soğuk griler ise teknik durur. Arka planlar renk almış görünmesin diye bu kromayı en açık adımlara doğru inceltin.

Renk körlüğü

Erkeklerin yaklaşık 12'de 1'inde, kadınların 200'de 1'inde renk görme eksikliği vardır. Bunun neredeyse tamamını kırmızı yeşil türleri oluşturur ve arayı açık farkla döteranomali kazanır; mavi sarı türü tritan eksiklikleri 10.000'de 1'den az kişiyi etkiler.

Arayüzlerde önem taşıyan karışıklıklar şunlardır: benzer açıklıktaki kırmızı ile yeşil, yeşil ile kahverengi ve turuncu, mor ile mavi, pembe ile gri. Protan görme ayrıca kırmızıları koyulaştırır, dolayısıyla aciliyet için seçilmiş bir kırmızı ekrandaki en sessiz şey haline gelebilir.

Bu yüzden renk asla anlamın tek taşıyıcısı olmamalıdır. Her durumu bir etiketle, bir simgeyle, bir biçimle ya da bir konumla eşleştirin ve eşleşen durumların yalnızca tonda değil açıklıkta da farklı olmasını sağlayın, çünkü OKLCH açıklığı aynı olan bir kırmızı ile bir yeşil mümkün olan en kötü bileşimdir. Bir ekran görüntüsünü gri tonlamaya çevirmek bu çakışmaları saniyeler içinde yakalar.