HSL vs Helmlab: Tasarımcıların bilmesi gereken algısal renk farkı karşılaştırması

Bir tasarım sistemi kurarken renk ölçeklerinizi HSL ile oluşturuyorsunuz. Mavi tonlarında 10 basamaklı bir skala yapıyorsunuz, her basamakta L (lightness) değerini eşit artırıyorsunuz. Matematiksel olarak her adım birbirine eşit. Ama sonucu gözünüzle incelediğinizde bir şeyler yanlış: bazı adımlar neredeyse aynı görünürken, bazıları arasında devasa fark var. Sorun sizin gözünüzde değil. Sorun HSL'de.

Bu yazıda HSL'nin neden tasarımcıları yanılttığını, "algısal düzgünlük" kavramının ne anlama geldiğini ve Helmlab'ın bunu nasıl çözdüğünü adım adım göreceğiz.

HSL'nin Yanıltması: Aynı L, Farklı Parlaklık

HSL (Hue, Saturation, Lightness) renk modelinde L=50 "orta parlaklık" anlamına gelir. Ama bu tamamen matematiksel bir tanımdır — insan gözünün algısıyla hiçbir ilgisi yoktur. Bunu kanıtlamak çok kolay:

Her iki renk de HSL'de L=50. Ama gözleriniz size başka bir şey söylüyor: sarı çok daha parlak, mavi çok daha karanlık görünüyor. Bu bir illüzyon değil — insan görsel sistemi dalga boylarına farklı hassasiyet gösterir. Gözümüz sarı-yeşil bölgede çok daha hassas, mavi-mor bölgede çok daha az hassastır. HSL bu gerçeği tamamen görmezden gelir.

Peki bu neden sorun? Çünkü bir tasarım sistemi kurduğunuzda, "mavi 500" ile "sarı 500" aynı algısal parlaklığa sahip olmalıdır. Bir butonun mavi versiyonu ile sarı versiyonu aynı görsel ağırlığa sahip olmalıdır. HSL bunu garanti edemez.

"Algısal Düzgünlük" Ne Demek?

Algısal düzgünlük (perceptual uniformity), bir renk uzayının en önemli özelliklerinden biridir. Basit bir tanım:

Renk uzayında eşit matematiksel mesafe = gözde eşit algısal fark.

Yani renk uzayınızda A ile B arasındaki mesafe 10 birim, C ile D arasındaki mesafe de 10 birim ise, bu iki çift gözünüze de eşit derecede "farklı" görünmelidir. Kulağa basit geliyor, ama HSL bu testi feci şekilde başarısız oluyor.

Düşünün: bir haritada 1 cm her yönde aynı gerçek mesafeyi temsil ediyorsa, o harita "düzgün" bir projeksiyondur. HSL ise Mercator projeksiyonu gibidir — ekvatorda 1 cm ile kutuplarda 1 cm arasında devasa fark vardır. Renk algısında da durum aynıdır: HSL'de bazı bölgelerde küçük bir L değişikliği büyük algısal fark yaratırken, başka bölgelerde çok büyük L değişikliği neredeyse fark edilmez.

HSL Paleti: Göze Eşit Görünmeyen "Eşit" Adımlar

HSL ile bir mavi renk ölçeği oluşturalım. H=220 (mavi), S=80%, L değerini %10'dan %90'a eşit adımlarla artıralım:

Dikkatli bakın: koyu taraftaki ilk birkaç adım (sol) neredeyse birbirinin aynısı görünüyor — aralarındaki farkı ayırt etmek çok zor. Ama açık taraftaki son birkaç adım (sağ) arasında çok daha belirgin farklar var. Bazı adımlar "atlanmış" gibi hissettiriyor, bazıları gereksiz yere sıkışık.

Tasarım sisteminizde bu ölçeği kullandığınızda sorun şu: blue-100 ile blue-200 arasındaki fark, blue-700 ile blue-800 arasındaki farkla aynı görünmüyor. Her adım eşit olmalı, ama değil.

Helmlab Paleti: Gerçek Algısal Eşit Aralık

Helmlab, 64.000'den fazla insan renk-farkı gözlemiyle eğitilmiş bir algısal renk uzayıdır. 72 parametre ve 13 aşamalı bir dönüşüm pipeline'ı kullanarak, insan gözünün renk algısını modeller. Helmlab'da L=50 gerçekten "orta parlaklık" demektir — ton fark etmeksizin.

Helmlab ile aynı mavi tonunda 10 basamaklı bir ölçek oluşturduğunuzda, her adım gözünüze gerçekten eşit görünür:

Farkı görüyor musunuz? Helmlab ölçeğinde her adım arasındaki parlaklık farkı homojen. Koyu tonlardaki adımlar da, açık tonlardaki adımlar da eşit derecede "farklı" görünüyor. Hiçbir adım "atlanmış" ya da "sıkışık" hissettirmiyor.

Yan Yana Karşılaştırma

Aynı mavi tonu, aynı başlangıç ve bitiş noktası, ama farklı dağıtım mantığı. Üst sıra HSL, alt sıra Helmlab:

HSL sırasında koyu uçtaki ilk 2-3 karo neredeyse ayırt edilemez. Açık uçtaki son 2-3 karo ise aralarında belirgin fark var. Helmlab sırasında ise her geçiş eşit derecede belirgin.

Tasarım Sistemlerinde Pratik Etkisi

Bu sadece akademik bir fark değil. Gerçek tasarım sistemlerinde somut sonuçları var:

1. Tutarlı Buton Durumları

Bir butonun normal, hover ve active durumlarını oluşturuyorsunuz. HSL'de "L'yi 10 birim karart" derseniz, mavi buton ile yeşil buton arasında farklı algısal fark oluşur. Helmlab'da aynı L farkı, her renk için aynı algısal farkı garantiler.

2. Erişilebilirlik (a11y)

WCAG kontrast kontrolü luminans tabanlıdır, ama palet oluştururken HSL kullanıyorsanız, her renk için ayrı ayrı kontrast testi yapmanız gerekir — çünkü L=50 bazı renklerde kontrastı karşılarken bazılarında karşılamaz. Helmlab'da aynı L seviyesindeki renkler benzer kontrast davranışı gösterir.

3. Çok Renkli Paletler

Bir dashboard tasarlıyorsunuz ve 6 farklı renk kullanmanız gerekiyor. HSL ile hepsini L=40'a ayarlasanız bile, bazıları diğerlerinden daha belirgin görünür. Helmlab'da aynı L=0.4'e ayarladığınız 6 renk, gerçekten aynı görsel ağırlığa sahiptir.

4. Dark Mode Geçişleri

Light moddan dark moda geçerken renkleri dönüştürmeniz gerekiyor. HSL ile "L'yi ters çevir" yaparsanız, bazı renkler çok karanlık, bazıları çok açık olur. Helmlab'da L eksenini ters çevirmek tutarlı sonuç verir çünkü L gerçekten algısal parlaklığı temsil eder.

Kod Örneği: Helmlab ile Algısal Ölçekler

Helmlab npm paketi 10KB, sıfır bağımlılık. Mavi tonunda algısal bir ölçek oluşturmak iki satır:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Tailwind CSS tarzı 50-950 ölçeği, algısal eşit aralık
const scale = hl.semanticScale('#3B82F6');
// {
//   '50':  '#b3c7ff',  // en açık
//   '100': '#aabdff',
//   '200': '#96aaff',
//   '300': '#809aff',
//   '400': '#628eff',
//   '500': '#3b82f6',  // ana renk
//   '600': '#0263ca',
//   '700': '#0048a2',
//   '800': '#003179',
//   '900': '#00184b',
//   '950': '#000b2f',  // en koyu
// }

Herhangi bir rengi Helmlab Lab koordinatlarına çevirip, algısal parlaklığını görebilirsiniz:

// HSL L=50 mavi vs sarı — algısal parlaklık farkını görün
const blue = hl.fromSRGB(0, 0, 1);       // HSL(240, 100%, 50%)
const yellow = hl.fromSRGB(1, 1, 0);     // HSL(60, 100%, 50%)

console.log('Mavi L:', blue.L.toFixed(3));   // ~0.35 — karanlık!
console.log('Sarı L:', yellow.L.toFixed(3)); // ~0.96 — çok açık!

// HSL ikisine de L=50 diyor, Helmlab gerçeği gösteriyor:
// Sarının algısal parlaklığı mavinin neredeyse 3 katı

İki renk arasındaki algısal mesafeyi ölçmek de bir satır:

// deltaE: algısal renk farkı (0 = aynı, >0.5 = fark edilir)
const lab1 = hl.fromSRGB(0.23, 0.51, 0.96);  // Tailwind blue-500
const lab2 = hl.fromSRGB(0.22, 0.48, 0.91);  // Hafif değiştirilmiş mavi

const distance = hl.deltaE(lab1, lab2);
console.log('Algısal fark:', distance.toFixed(4));
// Küçük bir fark — ama HSL bunu bile doğru ölçemez

HSL Ne Zaman Hala İşe Yarar?

HSL tamamen işe yaramaz değil. Hızlı prototipleme, renk seçici arayüzleri ve "yaklaşık olarak şu tonu istiyorum" dediğiniz anlarda HSL gayet kullanışlıdır. Sorun, HSL'yi bir tasarım sistemi standardı olarak kullanmaya çalıştığınızda ortaya çıkar.

Kural basit: renk seçmek için HSL kullanın, renk sistemi kurmak için Helmlab kullanın.

Rakamlarla Fark

STRESS metriği, bir renk uzayının mesafelerinin insan algısıyla ne kadar uyuştuğunu ölçer. Daha düşük = daha iyi:

HSL — Algısal düzgünlük iddiası yok, mesafe metriği anlamsız
CIE Lab — STRESS: ~30.3
CIEDE2000 — STRESS: 29.2 (endüstri standardı)
Oklab — STRESS: ~27.5 (CSS standardı)
Helmlab — STRESS: 23.2 (en iyi)

Helmlab, endüstri standardı CIEDE2000'i %20 oranında geçiyor. Bu fark, özellikle renk ölçekleri oluştururken ve kontrast hesaplarken gözle görülebilir bir iyileşme sağlıyor.

Sonuç

HSL, CSS'de renk tanımlamak için pratik bir araçtır. Ama "L=50" dediğinde gerçekten orta parlaklıkta bir renk vereceğini garanti edemez. Tasarım sistemi kurarken, palette oluşturma, kontrast hesaplama ve dark mode geçişleri gibi algısal doğruluk gerektiren işlerde HSL yetersiz kalır.

Helmlab, 64.000'den fazla insan gözlemiyle eğitilmiş 72 parametreli bir algısal renk uzayıdır. "Eşit adım" dediğinde gerçekten eşit adımdır. Mavi ile sarıyı aynı parlaklığa koyduğunuzda, gerçekten aynı parlaklıkta görünürler.

npm install helmlab

Kaynak kod: GitHub | Paket: npm

Bu yazı, Helmlab blog serisinin 2. yazısıdır. Sonraki yazıda CIEDE2000 ile Helmlab'ı karşılaştıracağız.

HSL vs Helmlab: Tasarımcıların Bilmesi Gereken Fark