Helmholtz-Kohlrausch etkisi: doygun renkler neden parlak gorunur - renk bilimi ve UI tasarim

Bir arayuz tasarliyorsunuz. Gri arka plan uzerine doygun kirmizi bir rozet koyuyorsunuz. Lightness degerlerini esitliyorsunuz — ikisi de tam olarak ayni L degerinde. Ama gozunuz size farkli bir sey soyluyor: kirmizi rozet acik bir sekilde daha parlak gorunuyor. Gozunuzde bir sorun yok. Bu, renk biliminin en eski ve en onemli yanilsamalarindan biri: Helmholtz-Kohlrausch etkisi.

Bu yazida, bu etkinin arkasindaki bilimi, modern renk uzaylarinin neden bunu gormezden geldigini ve Helmlab'in bunu nasil dogrudan pipeline'ina gomdugunu inceliyoruz.

Kesfin Tarihi: Helmholtz ve Kohlrausch

Bu etki adini iki Alman bilim insanindan aliyor. Hermann von Helmholtz (1821–1894), insan gorusunun fizyolojisini sistematik olarak inceleyen ilk bilim insanlarindan biriydi. Handbuch der physiologischen Optik adli dev eseri, renk biliminin temel taslarindan birini olusturur. Friedrich Kohlrausch (1840–1910) ise optik olcumlerdeki hassas deneysel yontemleriyle taninan bir fizikci ve muhendisti.

Kesfettikleri sey basitti ama derindi: bir rengin doygunlugu (saturasyonu) arttikca, ayni luminans degerinde bile daha parlak algilanir. Baska bir deyisle, kromatisite (renklilik) tek basina parlaklik hissi yaratir.

Bu etki 19. yuzyildan beri biliniyor. Ancak modern renk uzaylarinin buyuk cogunlugu bunu hala modellemedigi icin, tasarimcilar ve gelistiriciler her gun bu tuzaga dusuyor.

Gozunuzle Gorun: Gri vs Doygun Kirmizi

Asagidaki iki daire ayni CIE luminans degerine sahip. Soldaki notr bir gri, sagdaki doygun bir kirmizi. Hangisi daha parlak gorunuyor?

Buyuk cogunluk, kirmizi daireyi daha parlak olarak algilayacaktir. Bu bir optik illuzyon degil — gorunuzun fizyolojik bir ozelligi. Retinanizdaki kon hucreleri farkli dalga boylarinda farkli seviyelerde uyarilir ve bu toplam uyarilma, saf luminans degerinin otesinde ek bir parlaklik sinyali uretir. Renkli bir uyaran, noral seviyede daha fazla "aktiflestirme" yaratir.

Neden Onemli? Cunku Gunluk Tasarim Kararlarini Etkiliyor

Bu etki akademik bir merak konusu degil — her gun tasarim kararlarini dogrudan etkiler:

Butonlar — "Onayla" butonu doygun yesil, "Iptal" butonu notr gri. Ayni L degerini verseniz bile, yesil buton daha one cikar ve gorsel hiyerarsiyi bozar.
Rozetler ve etiketler — Doygun kirmizi bir "Acil" rozeti, ayni lightness'taki bir gri rozetin yaninda daha parlak gorunur. Bu kasitli olabilir, ama farkinda olmadan oluyorsa sorun yaratir.
Metin okunabilirligi — Doygun bir arka plan uzerinde beyaz metin, beklediginden dusuk kontrastla sonuclanabilir. Cunku doygun arka plan "beklediginden daha parlak" gorunuyor.
Renk olcekleri — 50-950 palet basamaklarinda, yuksek chroma degerleri tasiyan adimlar algisal olarak "kayar" ve esit aralikli olmasi gereken adimlar gorsel olarak esitsiz hale gelir.
Karanlik mod — Koyu arka planlarda H-K etkisi daha belirgin olur. Doygun vurgu renkleri beklenenden cok daha fazla one cikar.

Lab, Oklab ve CIEDE2000 Neden Bu Etkiyi Yok Sayar?

Renk biliminde uc buyuk standart var: CIE Lab (1976), CIEDE2000 (2001) ve Oklab (2020). Ucunun de ortak bir kor noktasi var: Helmholtz-Kohlrausch etkisini modellememek.

CIE Lab

CIE Lab, L* degerini hesaplarken sadece Y (luminans) kanalini kullanir: L* = 116 * (Y/Yn)^(1/3) - 16. Kromatisite (a*, b*) degerleri L* hesaplamasinda hicbir sekilde yer almaz. Dolayisiyla iki rengin Y degeri ayniysa L* degeri de ayni olur — renklilige bakilmadan.

Oklab

Oklab daha modern bir yaklasim kullanir: XYZ→LMS matris donusumu ve kup kok. Ancak toplam 18 parametreyle, L ekseni yine kromatisiteden bagimsiz olarak hesaplanir. Doygun bir mavi ve ayni luminanstaki bir gri, Oklab'da ayni L degerini alir.

CIEDE2000

CIEDE2000 bir mesafe formulu oldugu icin dogrudan bir lightness hesaplamasi yapmaz — CIE Lab uzerine agirlikli duzeltmeler uygular. Ama temelinde CIE Lab'in L* degerine dayanir, dolayisiyla H-K koru noktasini miras alir.

Uc standardin da bu etkiyi ihmal etmesinin tarihsel bir nedeni var: basitlik. CIE Lab 1976'da "yeterince iyi" bir pratik cozum olarak tasarlandi. Oklab ise 18 parametrelik minimalist bir model olmayi hedefledi. H-K etkisini modellemek ekstra parametreler, ekstra karmasiklik ve her seyin terslenebilir olmasi gerektiginde ekstra zorluk demek. Bu uzaylar basitligi secti — ama bunun bir bedeli var.

Helmlab Bunu Nasil Cozuyor: L Eksenine Gomulu H-K

Helmlab 13 asamali bir pipeline kullanir. 3.7 numarali asamada, hue duzeltmesinden hemen sonra ve kubik L duzeltmesinden hemen once, chroma'ya bagimli bir lightness kaymasi uygulanir:

// Helmlab pipeline'inin 3.7 numarali asamasi
// L += hk_weight * C^hk_power * hue_factor(h)

// Gercek parametre degerleri (v19):
// hk_weight = 0.370
// hk_power  = 0.852

L += 0.370 * pow(C, 0.852) * hueFactor(h);

Bu formul ne yapiyor?

C (chroma): Rengin doygunlugu. Gri icin C=0, saf kirmizi icin C yuksek.
hk_weight = 0.370: Etkinin genel buyuklugu. Sifir olmasi H-K'nin kapali oldugu anlamina gelir.
hk_power = 0.852: Chroma'nin etki usteli. 1'den kucuk olmasi, dusuk chroma'da bile etkinin basladigini gosterir.
hueFactor(h): 4 harmonikli Fourier serisi. H-K etkisi her tonda esit degil — mavi ve kirmizi icin daha guclu, sari icin daha zayif. Bu seri bunu yakalar.

Sonuc: gri bir rengin chroma'si sifir oldugu icin L degismez. Ama doygun bir rengin chroma'si yuksek oldugu icin L degerine pozitif bir miktar eklenir. Boylece doygun kirmizi daha yuksek bir L degeri alir — tam olarak gozumuzun algiladigi gibi.

Neden Tam Olarak Bu Noktada?

H-K duzeltmesinin pipeline'da nerede uygulandigi kritiktir. Helmlab bunu hue duzeltmesinden sonra (dogru hue acilarina gore calismak icin) ama kubik L duzeltmesinden once (L ekseninin geri kalan asamalarinin duzeltilmis L degerini gormesi icin) yapar. Bu siralama kasitlidir — yanlislikla son asamaya koymak, L-chroma etkilesimlerini bozar ve ters donusum hatalarina yol acar.

Pratikte: Helmlab ile H-K Etkisini Gozlemlemek

Helmlab npm paketiyle, H-K etkisinin renk koordinatlarina nasil yansdigini dogrudan gorebilirsiniz:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Orta gri: sRGB (0.5, 0.5, 0.5)
const gray = hl.fromSRGB(0.5, 0.5, 0.5);
console.log('Gri  L:', gray.L.toFixed(4));

// Doygun kirmizi: sRGB (0.9, 0.2, 0.2)
const red = hl.fromSRGB(0.9, 0.2, 0.2);
console.log('Kirmizi L:', red.L.toFixed(4));

// Doygun mavi: sRGB (0.2, 0.2, 0.9)
const blue = hl.fromSRGB(0.2, 0.2, 0.9);
console.log('Mavi L:', blue.L.toFixed(4));

// Helmlab'da L degerleri farkli cikiyor:
// Doygun renkler, ayni luminanstaki griden daha yuksek L alir.
// Bu, gozumuzun algiladigi parlakligi yansitir.

// Simdi deltaE ile fark olcelim:
const dGrayRed = hl.deltaE(
  { r: 0.5, g: 0.5, b: 0.5 },
  { r: 0.9, g: 0.2, b: 0.2 }
);
console.log('Gri-Kirmizi deltaE:', dGrayRed.toFixed(4));

Oklab ile Karsilastirma

Ayni renkleri Oklab'da incelediginizde, gri ve doygun kirmizi benzer L degerleri alir — cunku Oklab, chroma'nin L uzerindeki etkisini modellemez. Bu, gozunuzun gordugu parlaklilk farkini yansitamaz.

Tablodaki degerler temsildir. Onemli olan, Oklab'in her uc renk icin ayni L degerini vermesi, Helmlab'in ise doygun renklere daha yuksek L atamasi. Bu fark — H-K kaymasi — gozumuzun gercekte algiladigi parlakligi yansitir.

UI Tasariminda Pratik Sonuclar

1. Buton Hiyerarsisi

Bir formda "Kaydet" (doygun mavi) ve "Vazgec" (gri) butonlari var. Her ikisini de ayni Oklab L degerinde tanimlarsaniz, mavi buton daha parlak gorunecektir. Bu gorsel hiyerarsiyi guclendirmek istiyorsaniz sorun yok — ama eger esit gorsel agirlik istiyorsaniz, Oklab sizi yaniltir. Helmlab'da ayni L degeri, gercekten ayni algilanan parlakligi ifade eder.

2. Bildirim Rozetleri

Doygun kirmizi "3 yeni mesaj" rozeti, gri navigasyonun uzerinde beklenenden daha fazla dikkat ceker — sadece renkten degil, H-K etkisiyle eklenen ekstra parlakliktan dolayi. Bunu bilmeden tasarim yaparsaniz, rozet kontrolden cikmis bir gorsel agirliga sahip olur.

3. Karanlik Modda Vurgu Renkleri

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Karanlik mod arka plani
const darkBg = hl.fromSRGB(0.12, 0.12, 0.14);

// Vurgu rengi: doygun mor
const accent = hl.fromSRGB(0.65, 0.30, 0.90);

// Helmlab'da L farki, H-K etkisini iceriyor
// Dolayisiyla kontrast hesabi gercek algiyi yansitir
const contrast = hl.deltaE(
  { r: 0.12, g: 0.12, b: 0.14 },
  { r: 0.65, g: 0.30, b: 0.90 }
);
console.log('Arka plan - Vurgu deltaE:', contrast.toFixed(3));

4. Semantik Olceklerde Tutarlilik

Helmlab'in semanticScale() fonksiyonu, H-K etkisini her adimda otomatik olarak hesaba katar:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Kirmizi olcek: her adim algisal olarak esit aralikli
const redScale = hl.semanticScale('#EF4444');

// Mavi olcek: ayni garantiyle
const blueScale = hl.semanticScale('#3B82F6');

// Her iki olcekte de 500-600 arasi algisal fark aynidir
// H-K etkisi L ekseninde gomulu oldugu icin,
// ek bir duzeltmeye gerek yok

Formul Detayi: 6 Parametre, 4 Harmonik

Helmlab'in H-K modeli toplam 6 parametre kullanir:

hk_weight (0.370): Genel etki buyuklugu
hk_power (0.852): Chroma usteli
hk_hue_mod: cos(h) katsayisi — hangi tonlarda etki daha guclu
hk_sin1: sin(h) katsayisi
hk_cos2: cos(2h) katsayisi
hk_sin2: sin(2h) katsayisi

Son dort parametre, bir 4 harmonikli Fourier serisi olusturur. Bu seri, H-K etkisinin her tonda farkli buyuklukte oldugunu yakalar. Deneysel veriler gosteriyor ki mavi ve kirmizi tonlarda H-K etkisi daha guclu, sari ve yesil tonlarda daha zayiftir. Fourier serisi bu profili veri uzerinden ogrenilmis katsayilarla modelliyor.

Tum bu parametreler, 64.000'den fazla insan renk-farki gozlemi uzerinde optimize edilerek belirlenmistir. El yapimi degil — veriden ogrenmis degerler.

Neden Diger Uzaylar Bunu Ekleyemiyor?

Teorik olarak herhangi bir renk uzayina H-K duzeltmesi eklenebilir. Ama pratikte uc engel var:

Terslenebilirlik — H-K duzeltmesi, L eksenine chroma'ya bagimli bir kayma ekler. Bu kaymanin tam olarak terslenebilir olmasi gerekir (Lab→XYZ donusumu icin). Helmlab bunu basit cikarma ile saglar, ama pipeline'daki her asamanin birbirine uyumlu olmasi gerekir.
Parametre optimizasyonu — H-K parametreleri izole olarak optimize edilemez. Pipeline'daki diger 66 parametreyle birlikte, toplam 72 parametrenin es zamanli optimizasyonu gerekir. Bu, kapsamli deney altyapisi gerektirir.
Standart uyumlulugu — CIE Lab bir ISO standardi (ISO 11664-4). Degistirmek on yillar surer. Oklab CSS spesifikasyonuna girmis durumda. Bu uzaylara "yama" olarak H-K eklemek, geriye uyumlulugu bozar.

Sonuc

Helmholtz-Kohlrausch etkisi, 19. yuzyildan beri bilinen bir gorus fenomeni. Doygun renkler, ayni luminanstaki notr grilerden daha parlak gorunur. Bu etki, Lab, Oklab ve CIEDE2000 tarafindan gormezden geliniyor — cunku bu uzaylar basitligi, tamligi ustune koydu.

Helmlab farkli bir tercih yapiyor: 72 parametresiyle, H-K etkisini dogrudan L eksenine gomerek, algisal parlakligi dogru modeller. Bir doygun kirmizi ve bir gri ayni Helmlab L degerine sahipse, gozunuz gercekten ayni parlakligi gorur.

UI tasariminda bu fark somuttur: buton hiyerarsileri, rozet kontrastlari, karanlik mod vurgu renkleri ve palet adimlarinin hepsi H-K etkisinden dogrudan etkilenir. Helmlab bunu 10.3 KB'lik bir npm paketiyle ciziyor:

npm install helmlab

Kaynak kod: GitHub | Paket: npm

Bu yazi, Helmlab serisi 16 blog yazisinin altincisidir. Bir sonraki yazida: Pipeline Anatomisi — Helmlab'in 13 asamali donusum hattinin icerisine bakiyoruz.

Helmholtz-Kohlrausch Etkisi: Doygun Renkler Neden Parlak Görünür?