Renk paletiniz neden yanlış görünüyor — HSL ve algısal renk uzayı karşılaştırması

Bir tasarım projesi üzerinde çalışıyorsunuz. Bir mavi seçtiniz, ondan bir palet türettiniz — en açıktan en koyuya, eşit aralıklarla. Her şey mükemmel olmalı. Ama ekrana baktığınızda bir şeyler yanlış: bazı geçişler çok belirgin, bazıları neredeyse görünmüyor. Renkler matematik olarak eşit aralıklı ama gözünüze hiç öyle gelmiyor.

Bu yazıda bu sorunun neden oluştuğunu, kaynağının ne olduğunu ve nasıl çözülebileceğini konuşacağız.

Herkesin Yaşadığı Sorun

Diyelim ki bir mavi tonundan 5 basamaklı bir palet oluşturmak istiyorsunuz. En kolay yol: HSL renk modelinde açıklık (lightness) değerini eşit aralıklarla artırmak. 10, 30, 50, 70, 90 gibi. Matematiksel olarak mükemmel bir dağılım.

Ama sonuca baktığınızda şöyle bir şey görürsünüz:

Ustteki palette koyu tonlar arasindaki fark gözünüze çok büyük, açık tonlar arasındaki fark ise neredeyse görünmez gibi geliyor. Alttaki paletteyse her adım eşit hissettiriyor. İkisi de 5 adımdan oluşuyor — ama biri gözünüze doğru geliyor, diğeri gelmiyor.

Neden?

Suçlu: RGB ve HSL

Bilgisayarlar renkleri sayılarla ifade eder. En yaygın iki yöntem RGB (kırmızı-yeşil-mavi) ve HSL'dir (ton-doygunluk-açıklık). Bu modeller ekranların nasıl çalıştığını tanımlamak için tasarlanmıştır — pikselleriniz gerçekten kırmızı, yeşil ve mavi ışık yayar.

Ama burada kritik bir ayrıntı var: ekranın çalışma mantığı ile gözünüzün çalışma mantığı aynı şey değil.

RGB'de iki renk arasındaki matematiksel mesafe her zaman aynı formülle hesaplanır. Diyelim ki bir mavi tonu bir adım koyulaştırdınız ve bir sarı tonu da aynı miktarda koyulaştırdınız. Matematik diyor ki "iki fark eşit." Ama gözünüz öyle demiyor.

HSL de bu sorunu çözmez. HSL, RGB'nin farklı bir gösterimi — aynı verinin farklı ambalajı. Altta yatan matematik değişmediği için algısal sorunlar da aynen devam eder.

İnsan Gözü Neden Farklı Algılar?

Gözümüzün retinasında üç tip renk algılayan hücre (koni hücresi) var: kırmızı, yeşil ve mavi ışığa duyarlı olanlar. Ama bu üç tip hücre eşit dağılmamış ve eşit hassasiyette değil.

Yeşile en hassasız. Parlaklık algımızın yaklaşık %70'i yeşil koni hücrelerinden gelir.
Kırmızı orta düzeyde. Parlaklık algısına yaklaşık %21 katkı sağlar.
Maviye en az hassasız. Parlaklık algısına sadece yaklaşık %7 katkı sağlar.

Bu ne anlama geliyor? Yeşil bir renkte küçük bir değişiklik yaparsanız, gözünüz bunu hemen fark eder. Ama mavi bir renkte aynı büyüklükte bir değişiklik yaparsanız, neredeyse hiç fark etmezsiniz.

Üstelik bu sadece parlaklıkla sınırlı değil. Gözümüz koyu tonlardaki farkları açık tonlardakilere göre çok daha kolay ayırt eder. Koyudan koyuya geçerken "vay, ne büyük fark" dersiniz; açıktan açığa geçerken "bunlar neredeyse aynı" dersiniz — değişiklik miktarı aynı olsa bile.

Bir de Helmholtz-Kohlrausch etkisi var: canlı, doygun renkler gerçekte olduğundan daha parlak görünür. Parlak bir kırmızı ile aynı fiziksel parlaklıktaki bir gri yan yana koyduğunuzda, kırmızı daha açık görünür. Bu yüzden sadece parlaklığı eşitlemek bile yetmez.

Algısal Düzgünlük Nedir?

Şimdi bu kavramı olabildiğince basit açıklayalım.

Bir cetvel düşünün. Cetveldeki santimetre işaretleri gerçek dünyada eşit aralıklıdır — 1 cm ile 2 cm arasındaki fiziksel mesafe, 8 cm ile 9 cm arasındaki mesafeyle aynıdır. Cetveliniz "düzgün" bir ölçü aracıdır.

Şimdi bir de eşit aralıklı olmayan bir cetvel düşünün: ilk birkaç santimetre çok sıkışık, sonrakiler giderek daha geniş aralıklı. Bu cetvel "düzgün değil" — 1 ile 2 arasındaki mesafe, 8 ile 9 arasındakinden çok farklı.

RGB ve HSL, bozuk bir cetvele benzer. Sayılar eşit aralıklı olabilir ama temsil ettikleri algısal mesafeler eşit değildir. 10 birimlik bir fark bazen devasa, bazen neredeyse görünmez olabilir.

Algısal olarak düzgün bir renk uzayı ise düzgün bir cetvele benzer. Bu uzayda 10 birimlik bir mesafe, renk uzayının neresinde olursanız olun, gözünüze hep aynı büyüklükte görünür. Koyu maviden koyu maviye 10 birimlik fark ne kadar belirginse, açık sarıdan açık sarıya 10 birimlik fark da o kadar belirgindir.

Çözüm: Algısal Renk Uzayı Kullanmak

Çözüm aslında basit: palet oluştururken RGB veya HSL yerine algısal olarak düzgün bir renk uzayı kullanmak.

Bu alanda birkaç seçenek var:

CIE Lab — 1976'da tasarlandı. İlk algısal düzgün uzay olma amacıyla geliştirildi, ancak özellikle canlı renklerde ciddi hataları var.
Oklab — Modern ve CSS standardına girmiş. 18 parametreyle iyi bir yaklaşım, ama bazı görsel olayları modelleyemiyor.
Helmlab — 64.000'den fazla insan deneyine dayalı, 72 parametreli, 13 aşamalı bir dönüşüm. Mevcut alternatiflerin en doğrusu.

Bu üç uzayın doğruluğu, STRESS adı verilen bir metrikle ölçülür. STRESS, renk uzayının tahminlerinin insanların gerçek algılarına ne kadar yakın olduğunu söyler. Düşük = daha iyi:

CIE Lab: ~30.3
Oklab: ~27.5
CIEDE2000 (endüstri standardı formül): 29.2
Helmlab: 23.2

Helmlab, endüstri standardı CIEDE2000'den %20, modern CSS standardı Oklab'dan %16 daha doğru. Bu, teorik bir fark değil — palet oluştururken, kontrast hesaplarken ve renk geçişlerinde gözle görülür bir iyileşme sağlıyor.

Helmlab'ın Farkı: 64.000 İnsan Gözlemi

Birçok renk uzayı matematiksel varsayımlar veya fiziksel ölçümlerle tasarlanmıştır. Helmlab farklı bir yaklaşım benimsiyor: insanlara soruyor.

Helmlab'ın arkasında 64.000'den fazla insan renk-farkı gözlemi var. Bu deneyler şöyle çalışıyor: insanlara renk çiftleri gösteriliyor ve "Bu iki renk ne kadar farklı?" diye soruluyor. Binlerce insan, binlerce renk çifti için bu soruyu yanıtlıyor.

Helmlab'ın 72 parametresi, bu devasa insan verisi üzerinde optimize ediliyor. Amaç: Helmlab'ın hesapladığı mesafe ile insanların hissettiği mesafe arasındaki farkı en aza indirmek. Sonuçta ortaya, insan algısına en yakın renk uzayı çıkıyor.

Bu yaklaşım Helmlab'a bazı benzersiz yetenekler kazandırıyor. Orneğin Helmholtz-Kohlrausch etkisini (canlı renklerin daha parlak görünmesi) doğrudan modelliyor. Koyu tonlardaki ve açık tonlardaki algı farklılıklarını ayrı ayrı ele alıyor. Ton bölgelerine göre (kırmızılar, maviler, yeşiller) farklı kalibrasyonlar uyguluyor.

Uygulamada: Helmlab ile Palet Oluşturma

Helmlab bir npm paketi olarak kullanılabilir — 10KB, sıfır bağımlılık:

npm install helmlab

Bir mavi tonundan Tailwind CSS tarzı 11 basamaklı ölçek oluşturmak şöyle basit:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Bir mavi tonundan semantik ölçek oluştur
const scale = hl.semanticScale('#3B82F6');

// Sonuç: algısal olarak eşit aralıklı 11 ton
// {
//   '50':  '#b3c7ff',   // en açık
//   '100': '#aabdff',
//   '200': '#96aaff',
//   '300': '#809aff',
//   '400': '#6089f8',
//   '500': '#3b82f6',   // ana renk
//   '600': '#2e64c4',
//   '700': '#224994',
//   '800': '#163067',
//   '900': '#0b1a3d',
//   '950': '#070f28',   // en koyu
// }

Bu paletteki her adım arasındaki algısal mesafe eşittir. Gözünüz 50'den 100'e geçişi ne kadar belirgin buluyorsa, 800'den 900'e geçişi de o kadar belirgin bulacaktır.

İki renk arasındaki algısal mesafeyi ölçmek isterseniz:

// İki renk ne kadar farklı görünüyor?
const fark = hl.deltaE('#3B82F6', '#2563EB');
// → sayı ne kadar büyükse, fark o kadar belirgin

Rengin Lab koordinatlarına doğrudan erişmek de mümkün:

// Rengi Helmlab Lab uzayına dönüştür
const lab = hl.fromHex('#3B82F6');
// → [L, a, b]
// L = açıklık, a = kırmızı-yeşil ekseni, b = sarı-mavi ekseni

// Lab'dan tekrar hex'e
const hex = hl.toHex([0.5, -0.1, 0.2]);
// → '#rrggbb'

Sonuç

Paletiniz yanlış görünüyorsa, suç sizin estetik anlayışınızda değil — kullandığınız araçlarda. RGB ve HSL, ekranların dili; insan gözünün dili değil. Renk seçimlerinizi, paletlerinizi ve geçişlerinizi algısal olarak düzgün bir uzayda yaparsanız, sonuçlar her zaman daha doğal ve tutarlı görünecektir.

Helmlab, 64.000 insan gözlemine dayalı, mevcut alternatiflerin en doğrusu olarak bu boşluğu dolduruyor. 10KB'lık bir npm paketiyle projenize ekleyip hemen kullanmaya başlayabilirsiniz.

npm install helmlab

Paletleriniz artık sadece matematiksel olarak değil, algısal olarak da doğru olsun.

Renk Paletiniz Neden Yanlış Görünüyor?