Dark mode tasarimi: iki modda da calisan renkler - aciklik bagimli kroma ve Helmlab ile palet olusturma

Bir uygulamanin light mode'u mukemmel gorunuyor. Renkleri, tonlari, kontrastlari — her sey yerli yerinde. Sonra dark mode'u aciyorsunuz. Ayni renkler bir anda tuhaf gorunmeye basliyor: bazi tonlar yanik, bazilari gozleri yoran bir sertlikte, bazilari ise karanlik arka plana gomulmus gibi neredeyse gorulmuyor. Isikli modda guzel gorunen o turuncu buton, dark mode'da yanmis kagit gibi hissettiriyor.

Bu sorun estetik bir tercih meselesi degil — fizik ve algi biliminin kacinilmaz bir sonucu. Bu yazida dark mode'da renklerin neden yanlis gorundugunun bilimsel nedenlerini, aciklik-kroma iliskisinin bu problemdeki rolunu ve Helmlab ile her iki modda da calisan paletlerin nasil olusturulacagini anlatacagiz.

Dark Mode'da Renkler Neden Yanlis Gorunuyor?

Gozu karanlik bir ortamda actiginizda farkli calismaya baslar. Retina, dusuk isik kosullarinda hassasiyetini arttirir — buna dark adaptation denir. Bunun renk algisina iki temel etkisi vardir:

Simultaneous contrast — Ayni renk, acik arka plan uzerinde ve koyu arka plan uzerinde farkli gorunur. Koyu bir arka plan uzerindeki renkler daha parlak ve daha doygun algilanir. Bu yuzden light mode icin kalibre edilmis bir renk, dark mode'da goz yoran bir sertlikte gorunebilir.
Stevens etkisi — Ortam parlakligi dusunce kontrast algimiz degisir. Koyu arka planlarda koyular daha koyu, aciklar daha acik gorunur. Bu, dark mode'daki paletlerdeki orta tonlarin "kaybolmasina" yol acar.
Hunt etkisi — Dusuk parlakliklarda renk doygunlugu azalmis olarak algilanir. Bu yuzden dark mode'daki renkler bazen "soluk" veya "canli" arasinda garip bir dengesizlik gosterir.

Kisacasi dark mode sadece "arka plani siyah yap" demek degildir. Arka plan degistiginde goz de degisir ve ayni renk gercekten farkli algilanir.

Asil Sorun: Aciklik ve Kroma Birbiriyle Bagli

Renk biliminde en cok goz ardi edilen iliskilerden biri budur: bir rengin ne kadar canli (doygun) gorunebilecegi, aciklik seviyesine baglidir.

Bunu somut bir ornekle dusunun. Parlak, canli bir sari dusunebiirsiniz — yani acik bir ton. Ama koyu bir sariyi hayal etmeye calistiginizda, elinizde aslinda zeytinyesi veya kahverengiye kayan bir renk olur. Saf, doygun sarinin koyu bir versiyonu fiziksel olarak mevcut degildir.

Ayni durum tersten de gecerlidir. Cok acik bir kirmizi hayal edin — aslinda pembe elde edersiniz. Aciklik arttikca, kullanilabilir kroma (doygunluk) azalir.

Bu grafik neden onemli? Cunku dark mode'daki renkler dusuk aciklik bolgesinde yasiyor, light mode'dakiler ise yuksek aciklik bolgesinde. Ve bu iki bolgede kullanilabilir maksimum kroma birbirinden farkli. Bir rengi light mode'dan dark mode'a tasirken, sadece arka plani degistirmiyorsunuz — rengin fiziksel olarak varolabilecegi alani degistiriyorsunuz.

HSL ve RGB'nin Cozumsuzlugu

HSL modelinde dark mode paleti olusturmak icin tipik yaklasim su: lightness degerini dusur, saturation degerini ayni birak. Ama HSL'in "saturation" kavrami algisaldan cok uzaktir. HSL saturation=100% olan bir koyu kirmizi, gozunuze aslinda o kadar doygun gelmez — cunku dusuk aciklarlikta insan gozu zaten doygunluk algilayamaz.

Sonuc: HSL'de matematiksel olarak "ayni doygunluk" olan iki renk, biri light mode'da biri dark mode'da, gozunuze tamamen farkli gorunur. Biri canli ve taze, digeri yanik veya kirli.

// HSL ile naif dark mode yaklasimi — SORUNLU
const lightBlue = 'hsl(220, 80%, 55%)';  // light mode
const darkBlue  = 'hsl(220, 80%, 30%)';  // dark mode — yanik gorunur!

// Saturation ayni (80%) ama algisal doygunluk cok farkli
// Cunku HSL aciklik-kroma iliskisini modelleyemiyor

Helmlab'in Cozumu: Aciklik-Bagimli Kroma Olceklemesi

Helmlab'in 13 asamali pipeline'inda 9. ve 10. asamalarda kritik bir islem gerceklesir: kroma olceklemesi acikliga bagli olarak uygulanir.

Bu ne anlama geliyor? Helmlab bir rengi Lab uzayina donusturdugunude, rengin kromasini (doygunlugunu) aciklik seviyesine gore olcekler. Koyu tonlarda kroma farkli bir agirlikla, acik tonlarda farkli bir agirlikla islenir. Bu olcekleme rastgele degil — 64.000'den fazla insan deney verisinden ogrenilmis parametrelerle calisiyor.

Sonuc olarak, Helmlab Lab uzayinda ayni kroma degerine sahip iki renk — biri koyu biri acik — gozunuze gercekten esit doygunlukta gorunur. Bu, dark mode ve light mode arasinda tutarli renkler olusturmanin anahtaridir.

Pipeline'in ilgili asamalari:

// Helmlab pipeline'indan (basitlesitirilmis)
// Asama 9: Ton-bagimli kroma olceklemesi (4 harmonikli Fourier)
C *= chromaScale(hue);  // farkli tonlar farkli kroma olceklenir

// Asama 10: Kroma guc donusumu
C = pow(C, chromaPower);

// Asama 11: Aciklik-bagimli kroma olceklemesi
C *= chromaScaleL(L);   // koyu ve acik tonlar farkli islenir

// Bu 3 asama birlikte, aciklik-kroma iliskisini dogru modeller
// 64.000 insan gozlemiyle optimize edilmis parametreler

Pratikte: Tek Baz Renkten Light/Dark Mode Varyantlari

Helmlab'in semanticScale() fonksiyonu, tek bir baz renkten 11 basamakli bir skala uretir. Bu skalanin en acik tonlari (50-200) light mode icin, en koyu tonlari (700-950) dark mode icin idealdir.

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Tek bir mavi renkten her iki mod icin palet
const scale = hl.semanticScale('#3B82F6');

// Light mode icin:
// Arka plan:  scale['50']   — en acik ton
// Metin:      scale['900']  — en koyu ton
// Vurgu:      scale['500']  — baz renk

// Dark mode icin:
// Arka plan:  scale['950']  — en koyu ton
// Metin:      scale['100']  — acik ton
// Vurgu:      scale['400']  — biraz daha acik baz

// Tum gecisler algisal olarak esit aralikli
// Kroma her aciklik seviyesinde dogru olceklenmis

Bu yaklasimin guzeligi sudur: tek bir baz renk tanimlayin, semanticScale her iki mod icin gereken tum varyantlari algisal olarak dogru bir sekilde uretir. Artik light ve dark mode icin ayri ayri renk secmenize gerek yoktur.

Tam Uygulama: Dark Mode Palet Sistemi

Iste tam bir ornek — tasarim sisteminiz icin tek bir baz renkten her iki modu destekleyen bir palet olusturmak:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

function createDualModeTokens(name, baseHex) {
  const scale = hl.semanticScale(baseHex);

  return {
    light: {
      [`${name}-bg`]:       scale['50'],
      [`${name}-bg-hover`]: scale['100'],
      [`${name}-border`]:   scale['200'],
      [`${name}-text`]:     scale['700'],
      [`${name}-solid`]:    scale['500'],
      [`${name}-contrast`]: scale['950'],
    },
    dark: {
      [`${name}-bg`]:       scale['950'],
      [`${name}-bg-hover`]: scale['900'],
      [`${name}-border`]:   scale['700'],
      [`${name}-text`]:     scale['200'],
      [`${name}-solid`]:    scale['400'],
      [`${name}-contrast`]: scale['50'],
    }
  };
}

// Kullanim
const primary = createDualModeTokens('primary', '#3B82F6');
const danger  = createDualModeTokens('danger',  '#EF4444');
const success = createDualModeTokens('success', '#22C55E');

// primary.light['primary-solid'] → '#3b82f6'
// primary.dark['primary-solid']  → '#6089f8'
// Her iki modda da algisal olarak dogru doygunluk

Karssilastirma: HSL vs Helmlab Dark Mode Paleti

Asagidaki gorsel, ayni baz maviden HSL ve Helmlab ile uretilmis dark mode paletlerini karssilastirir:

Dark Mode Icin Pratik Ipuclari

Helmlab kullanarak dark mode tasarlarken su prensipleri izleyin:

1. Tek Baz Renk, Iki Mod

Her renk icin ayri light/dark varyantlar secmeyin. semanticScale ile tek bir baz renkten tum varyantlari uretin. Bu, marka tutarliligini otomatik olarak korur.

2. Vurgu Renklerini Bir Adim Kaydin

Dark mode'da vurgu renginiz olarak baz renk yerine bir adim daha acik tonu (400 veya 300) kullanin. Koyu arka plan uzerinde baz renkten daha iyi kontrast saglar:

const scale = hl.semanticScale('#3B82F6');

// Light mode vurgu: scale['500'] (baz renk)
// Dark mode vurgu:  scale['400'] (bir adim acik)

// Algisal mesafeyi kontrol et
const kontrastLight = hl.deltaE(scale['50'],  scale['500']);
const kontrastDark  = hl.deltaE(scale['950'], scale['400']);
// Her iki modda da benzer algisal kontrast

3. Gri Skalasini Unutmayin

Dark mode'un temeli gri skalanizdir. Helmlab ile notr bir griden palet uretin:

// Notr gri skala
const gri = hl.semanticScale('#6B7280');

// Dark mode arka planlari:
// gri['950'] — ana arka plan
// gri['900'] — yukseltilmis arka plan (kart, modal)
// gri['800'] — kenarlklar
// gri['300'] — ikincil metin
// gri['100'] — birincil metin

4. deltaE ile Kontrasti Dorulayin

Dark mode'da kontrast hataslari cok yaygindir. Her renk cifti icin algisal mesafeyi kontrol edin:

// Minimum algisal kontrast kontrolu
const bgColor   = scale['950'];
const textColor = scale['100'];

const kontrast = hl.deltaE(bgColor, textColor);
if (kontrast < 0.3) {
  console.warn('Yetersiz kontrast! Metin okunmayabilir.');
}

Neden Diger Araclar Bunu Yapamaz?

Aciklik-bagimli kroma olceklemesi ekstra karmasiklik gerektirir. Neden cogu renk araci bunu modelleyemez:

HSL — Saturation tamamen acikliktan bagimszdir. Fiziksel gerceklikle uyumsuz.
CIE Lab — Kroma (C*) acikliktan (L*) bagimsiz hesaplanir. Gercek algiyi yansitmaz.
Oklab — 18 parametre ile iyi bir yaklasim, ama aciklik-kroma etkilesimini modellemek icin yeterli parametre yok.
Helmlab — 72 parametre, 13 asama. Kroma olceklemesi hem ton-bagimli (4 harmonik) hem aciklik-bagimli. 64.000 insan deneyinden ogrenilmis.

STRESS degerleriyle dogruluk karsilastirmasi:

CIE Lab: ~30.3
Oklab: ~27.5
CIEDE2000: 29.2
Helmlab: 23.2

Sonuc

Dark mode tasarimi "renkleri koyulastirmak" degildir. Insan gozunun aciklik, kroma ve ton arasindaki karmasik iliskilerini anlamak ve buna gore renk secmek gerekir. HSL ve RGB bu iliskileri modelleyemez — bu yuzden dark mode'da her zaman "bir seyler yanliss" hissi olur.

Helmlab'in aciklik-bagimli kroma olceklemesi bu sorunu kokunden cozer. semanticScale ile tek bir baz renkten her iki mod icin algisal olarak dogru paletler uretebilirsiniz. Artik dark mode icin ayri renk secmeye, gozle karsilastirmaya veya deneme-yanilmaya gerek yok.

npm install helmlab

Kaynak kodu: GitHub | Paket: npm

Bu yazi, Helmlab serisinin 13. yazisidir. Sonraki yazi: Insan Gozu ve Renk — retinadan beyne renk algisinin biyolojisi.

Dark Mode Tasarımı: İki Modda da Çalışan Renkler