Renkleri sayılarla yazmak: RGB, HSL, HSV ve hex

Kısa cevap

Ekrandaki bir renk dört yaygın biçimde yazılabilir: kırmızı, yeşil ve mavi kanalların 0 ile 255 arasındaki değerleri, bu üç değerin onaltılık kodu, ton–doygunluk–açıklık olarak HSL ve ton–doygunluk–değer olarak HSV. Dördü aynı rengi farklı sözcüklerle anlatır ve birinden ötekine kayıpsız dönüştürülebilir, ama HSL ve HSV'deki «açıklık» ile «değer» gözün gördüğü parlaklığı ölçmez. HSL'de yüzde elli açıklıktaki sarı ile mavi aynı parlaklıkta görünmez, çünkü göz yeşil ve kırmızı ışığa maviden çok daha duyarlıdır; ekran rengini ölçen standart formül sarıya maviden yaklaşık on üç kat fazla parlaklık verir, HSL ise ikisine aynı sayıyı yazar.

Üç sayı, bir renk

EK-01'de her pikselin üç alt pikselden oluştuğunu ve her birinin sekiz bitlik ekranlarda 256 basamakta parladığını gördük. Bir rengi yazmanın en doğrudan yolu, bu üç basamağı sırayla vermektir.

rgb(255, 255, 0) sarıdır: kırmızı ve yeşil tam, mavi kapalı. rgb(0, 0, 255) tam mavidir. rgb(128, 128, 128) ortada bir gridir. Açık bir ten tonu, #F1C7A9, rgb(241, 199, 169) olarak; koyu bir ten tonu, #4A2C1D, rgb(74, 44, 29) olarak yazılır. Bu yazım ekranın ne yaptığını doğrudan söyler, ama bir insanın zihnindeki renkle zayıf bir bağı vardır: rgb(198, 136, 99) sayılarına bakıp bunun sıcak orta bir ten tonu olduğunu görmek kolay değildir.

Onaltılık kod

Web'de ve tasarım araçlarında en sık görülen yazım, aynı üç sayının onaltılık tabanda, yan yana yazılmasıdır.

Onaltılık sistemde basamaklar 0'dan 9'a, sonra A'dan F'ye gider; iki basamak 00'dan FF'ye, yani 0'dan 255'e kadar bütün değerleri taşır. #C68863'te C6 kırmızının 198, 88 yeşilin 136, 63 mavinin 99 değeridir.

CSS Color 4 belirtimi bu yazımın iki kısa ve bir uzun biçimini de tanımlar. Üç basamaklı biçimde her basamak kendini tekrar eder: #FA0, #FFAA00 ile aynıdır. Sekiz basamaklı biçimde son iki basamak saydamlığı verir: 00 tamamen saydam, FF tamamen örtücüdür; belirtimin kendi örneğine göre #0000ffcc, yüzde seksen örtücü bir mavidir.

Hex kodu kısa, kopyalanması kolay ve tasarım araçlarıyla kod arasında taşınabilir olduğu için yaygındır. Ama GT-10'da gördüğümüz eksikliği taşır: hangi renk uzayına ait olduğunu söylemez ve varsayılan olarak sRGB kabul edilir.

HSL ve HSV: insanın sorusuna cevap

RGB ve hex ekranın dilini konuşur. Tasarımcı ise çoğu zaman başka sorular sorar: bu rengi biraz daha açsam ne olur, biraz daha soluk yapsam? Bu sorular için bilgisayar grafiği iki dönüşüm geliştirdi. SIGGRAPH konferansında aynı yıl yayımlanan iki makale, Alvy Ray Smith'in «Color gamut transform pairs» ve George Joblove ile Donald Greenberg'in «Color spaces for computer graphics» çalışmaları, RGB'yi insanın sezgisine daha yakın eksenlere çeviren modellerin erken tanımlarını verdi.

İki model tonu aynı biçimde, 0 ile 360 derece arasında bir açı olarak verir: 0 kırmızı, 60 sarı, 120 yeşil, 240 mavidir. Ayrıldıkları yer, rengin açıklığını ve doygunluğunu nasıl tanımladıklarıdır. HSL'de tam doygun sarı hsl(60, 100%, 50%) olarak yazılır; açıklığı yüze çıkarmak onu beyaza götürür. HSV'de aynı sarı hsv(60, 100%, 100%)'dür; değeri sıfıra indirmek onu siyaha götürür, beyaza ulaşmak için doygunluğu azaltmak gerekir. DT-01'deki ton, doygunluk ve değer sözcükleri bu modellerde sayıya dönüşür, ama aynı anlama gelmez.

Doygunluk sözcüğü özellikle yanıltıcıdır, çünkü iki model onu farklı hesaplar. Açık ten tonu #F1C7A9 HSL'de yüzde yetmiş iki doygunluğa sahip görünür; aynı renk HSV'de yüzde otuz doygunluktadır. İlk sayı bu rengi neredeyse canlı bir renk gibi, ikincisi soluk bir renk gibi anlatır. Koyu ten tonu #4A2C1D için durum tersine döner: HSL'de yüzde kırk dört, HSV'de yüzde altmış bir. Bir tasarım aracındaki doygunluk kaydırıcısının hangi modele göre çalıştığını bilmeden sayıyı yorumlamak, açık ve koyu tenler için ters yönde yanlış sonuçlar verir.

Aynı açıklık, farklı parlaklık

Kartın sorusu: HSL'de aynı açıklık değerine sahip sarı ve mavi neden aynı parlaklıkta görünmez?

HSL'nin açıklığı, bir rengin en büyük ve en küçük kanal değerinin ortalamasıdır. Tam sarı, rgb(255, 255, 0), için bu değer 255 ile 0'ın ortası, yani yüzde ellidir. Tam mavi, rgb(0, 0, 255), için de aynı hesap yüzde elliyi verir. Formül, hangi kanalın yandığına bakmaz; yalnız en büyük ve en küçük değere bakar.

Göz ise hangi kanalın yandığına bakar. Gözün duyarlılığı yeşil ışıkta en yüksek, kırmızıda orta, mavide en düşüktür. WCAG'ın ve ekran standartlarının kullandığı göreli parlaklık formülü bu farkı katsayılarla yazar.

Bu formülle hesap yapıldığında sonuç açıktır. Tam sarının göreli parlaklığı yaklaşık 0,93'tür: kırmızının 0,21'i ile yeşilin 0,72'si toplanır. Tam mavinin göreli parlaklığı yalnız 0,07'dir. Sarı, maviden yaklaşık on üç kat parlaktır ve HSL ikisine de aynı «yüzde elli» açıklığı yazar. Tam kırmızının göreli parlaklığı yaklaşık 0,21'dir; bu, HSL'de yine yüzde elli açıklıktaki orta grinin, rgb(128, 128, 128)'in parlaklığına, yaklaşık 0,22'ye, neredeyse eşittir. Formüldeki değerlerin önce doğrusal ışığa çevrilmesinin nedeni ve 128'in neden beyazın yarısı olmadığı EK-05'in konusudur; algıya göre düzenlenmiş modeller ise BI-24'ün.

Sonuç şudur: HSL ve HSV, renkleri insanın sorularına yakın eksenlerle yazar, ama «açıklık» ve «değer» sözcükleri gözün gördüğü parlaklığın ölçüsü değildir. Kontrast ya da okunurluk hesaplanacaksa göreli parlaklık kullanılır.

Örnek — avatar rengini ayarlamak

Bir uygulama, kullanıcıların profil avatarının arka planını bir renk seçiciden seçmesine ve üzerine adlarının baş harfini beyazla yazmasına izin veriyor. Renk seçici HSL ile çalışıyor ve tasarım ekibi, beyaz harfin okunur kalması için «açıklık yüzde ellinin altında kalsın» kuralını koymuş.

Kural bazı renklerde işliyor, bazılarında çöküyor. Tam mavi, yüzde elli açıklıkta, beyaz harfle yaklaşık 8,6:1 kontrast veriyor ve rahatça okunuyor. Tam sarı, aynı yüzde elli açıklıkta, beyaz harfle yalnız 1,07:1 veriyor ve harf görünmez oluyor. Kural sayıya bakıyor, göze değil.

Ekip kuralı göreli parlaklıkla yeniden yazıyor: arka planın göreli parlaklığı beyaz harfle en az 4,5:1 kontrast verecek düzeyin altında kalmalı; aksi hâlde harf koyu renkle yazılıyor. Kullanıcılar avatar rengi olarak sık sık kendi ten tonlarına yakın renkler seçiyor. Açık bir ten tonu, #F1C7A9, yaklaşık 0,62 göreli parlaklıkla koyu harf alıyor; koyu bir ten tonu, #4A2C1D, yaklaşık 0,03 ile beyaz harf alıyor; aradaki #8D5524 ve #C68863 tonları da hesaba göre doğru rengi buluyor. HSL doygunluk kaydırıcısının açık ve koyu tenlerde ters yönde yanıltıcı sayılar gösterdiğini bilen ekip, seçicinin yanına ayrıca rengin hex kodunu ve beyaz harfle kontrast oranını gösteren küçük bir etiket koyuyor.

Sık yapılan yanlış

Özet

1. Bir renk kanal değerleriyle, onaltılıkla ve iki sezgisel modelle, HSL ile HSV'yle yazılabilir; dördü aynı rengi anlatır ve kayıpsız dönüştürülebilir, hex kodunun kısa ve saydamlıklı biçimleri de vardır.
2. HSL ve HSV renkleri ton, doygunluk ve açıklık ya da değerle insanın sorularına yakın eksenlerde yazar, ama doygunluğu farklı hesaplar ve açıklıkları gözün gördüğü parlaklığı ölçmez.
3. Gözün gördüğü parlaklık göreli parlaklıkla hesaplanır; yüzde elli açıklıktaki sarı maviden yaklaşık on üç kat parlaktır ve okunurluk kuralları, ten tonları dahil her renk için bu formülle yazılır.

Kendini sına

1. (Kolay) #FA0 kısa hex kodu altı basamakla nasıl yazılır?
2. (Kolay) Göreli parlaklık formülünde en büyük katsayı hangi kanala aittir?
3. (Orta) HSL'de aynı açıklık değerine sahip sarı ve mavi neden aynı parlaklıkta görünmez?
4. (Orta) HSL ile HSV beyaza ve siyaha nasıl ulaşır?
5. (Zor) #F1C7A9 ten tonu HSL'de yüzde yetmiş iki, HSV'de yüzde otuz doygunluk gösteriyor. Bu fark nereden gelir ve bir tasarımcı için ne anlama gelir?
6. (Zor) Avatar arka planı için «açıklık yüzde ellinin altında kalsın» kuralı neden çöker ve nasıl düzeltilir?

Cevaplar

1. #FFAA00 («Onaltılık kod»).
2. Yeşil, 0,7152 («Aynı açıklık, farklı parlaklık»).
3. HSL'nin açıklığı en büyük ve en küçük kanal değerinin ortalamasıdır ve tam sarı ile tam maviye aynı yüzde elliyi verir. Göz ise yeşil ve kırmızı ışığa maviden çok daha duyarlıdır; göreli parlaklık formülü sarıya yaklaşık 0,93, maviye 0,07 değer verir ve sarı yaklaşık on üç kat parlaktır («Aynı açıklık, farklı parlaklık»).
4. HSL'de açıklık yüze çıkınca renk beyaza, sıfıra inince siyaha gider; tam doygun renk yüzde elli açıklıktadır. HSV'de değer sıfıra inince renk siyaha gider, beyaza ulaşmak için değer yüzdeyken doygunluk azaltılır («HSL ve HSV: insanın sorusuna cevap»).
5. İki model doygunluğu farklı formüllerle hesaplar; HSL'de açık renklerde doygunluk yüksek çıkabilirken HSV'de düşük kalır, koyu ten tonu #4A2C1D'de ise tersi olur. Tasarımcı bir doygunluk kaydırıcısının hangi modele göre çalıştığını bilmeden sayıyı yorumlarsa açık ve koyu tenler için ters yönde yanılır («HSL ve HSV: insanın sorusuna cevap»).
6. Kural HSL açıklığına bakar; yüzde elli açıklıkta mavi beyaz harfle yaklaşık 8,6:1 verirken sarı 1,07:1 verir. Kural göreli parlaklıkla yeniden yazılır: beyaz harfle 4,5:1 sağlanamıyorsa harf koyu renkle yazılır; ten tonlarına yakın avatar renkleri de bu hesapla doğru harf rengini bulur («Örnek — avatar rengini ayarlamak»).

Kaynaklar

• W3C, «CSS Color Module Level 4», hex-color bölümü.
• W3C, «Web Content Accessibility Guidelines (WCAG) 2.2», relative luminance tanımı.
• Alvy Ray Smith, «Color gamut transform pairs», ACM SIGGRAPH Computer Graphics, 1978, s. 12–19.
• George H. Joblove ve Donald Greenberg, «Color spaces for computer graphics», ACM SIGGRAPH Computer Graphics, 1978, s. 20–25.

Sonraki adım

EK-04 bu sayıların sınırına bakıyor: sRGB, Display P3, Adobe RGB ve Rec. 2020 gamlarını kromatiklik diyagramı üzerinde karşılaştırıyor ve geniş gamlı bir ekranın sRGB için hazırlanmış bir görüntüyü neden aşırı doygun gösterebildiğini anlatıyor. EK-05 ise bu derste bir cümleyle geçtiğimiz doğrusal ışığa dönüşümü açıyor: 128 değerinin neden beyazın yarı parlaklığı olmadığını ve gamma eğrisinin gradyanlarda ve bulanıklaştırmada nasıl yanlış hesaplara yol açtığını gösteriyor.