Renk Modelleri ve Erişilebilir Palet Kurma: HEX, RGB, HSL Rehberi

Bir tasarımda renkler genellikle ilk fark edilen şeydir, ama kodda renkle çalışmak çoğu geliştirici için hâlâ kafa karıştırıcı. #3B82F6 ile rgb(59, 130, 246) aynı maviyse, neden ikisini de kullanıyoruz? Bir rengi neden bazen hsl() ile yazmak daha mantıklı oluyor? Bu rehberde üç temel renk modelini netleştirecek, sıfırdan erişilebilir bir palet kuracak ve kontrast kurallarını gerçek bir tasarım sistemine nasıl oturtacağınızı göreceğiz.

Renk Modelleri Aslında Aynı Rengin Farklı Adresleri

Ekrandaki her renk kırmızı, yeşil ve mavi ışığın karışımından oluşur (RGB). HEX, RGB ve HSL ise bu karışımı ifade etmenin üç farklı yazım biçimidir — aynı pikseli farklı koordinatlarla tarif ederler.

HEX

#3B82F6 gibi yazılan HEX, kırmızı-yeşil-mavi değerlerini 16'lık sistemde, çiftli bloklar halinde kodlar. 3B kırmızı, 82 yeşil, F6 mavi kanalıdır. Kompakt ve kopyalanması kolaydır; tasarımcılarla geliştiriciler arasında en yaygın ortak dildir. Sekiz haneli biçimi (#3B82F6CC) son iki haneyle saydamlık (alfa) ekler.

RGB ve RGBA

rgb(59 130 246) her kanalı 0–255 arası okunabilir sayılarla verir. rgba() veya modern rgb(59 130 246 / 0.8) söz dizimi alfa kanalını ekler; yarı saydam katmanlar, gölgeler ve üst üste binen yüzeyler için idealdir. RGB, programatik olarak renk üretirken (örneğin canvas veya veri görselleştirme) okunabilirliğiyle öne çıkar.

HSL ve Neden Ayarlamak İçin Sezgisel

hsl(217 91% 60%) rengi üç insancıl eksende tanımlar: Hue (renk tonu, 0–360 derecelik renk çarkı), Saturation (doygunluk, % canlılık) ve Lightness (açıklık, % aydınlık). HSL'in gücü buradadır: bir butonu koyulaştırmak isterseniz sadece lightness değerini düşürürsünüz; tonu değiştirmeden tüm vurgu renklerinizi tek bir hue ekseninde döndürebilirsiniz. HEX'te #3B82F6'yı elle koyulaştırmak neredeyse imkânsızken, HSL'de tek sayıyı değiştirmek yeter. Tam da bu yüzden palet türetmenin en pratik modelidir.

Sıfırdan Palet Kurma

İyi bir palet rastgele güzel renklerin toplamı değil, birkaç temel rolün tutarlı bir sistemidir.

• Primary (ana renk): Markanızı temsil eden, butonlar ve bağlantılarda en çok görülen renk. Bir HSL hue seçin (örn. 217) ve buradan başlayın.
• Accent (vurgu): Dikkat çekmesi gereken öğeler için. Renk çarkında primary'ye komşu (analog) ya da karşı (tamamlayıcı) bir hue seçin.
• Nötrler: Gri tonları paletin %70'ini oluşturur. Saf gri yerine primary hue'sundan çok düşük doygunlukla (örn. hsl(217 12% 20%)) türetilen nötrler, tasarıma görünmez bir bütünlük katar.

Her renkten bir tonlama merdiveni üretmek için lightness'i adımlayın: 95%, 85%, ... 15%. HSL ile bu, dakikalar süren mekanik bir iştir. Renkleri hızlı seçmek ve dönüştürmek için renk seçici aracımızı kullanabilir, mevcut bir görselden palet çıkarmak için palet çıkarıcıyı deneyebilirsiniz.

Kontrast ve WCAG AA Erişilebilirliği

Güzel bir palet okunamıyorsa işe yaramaz. WCAG, metin ile arka planı arasındaki kontrast oranını zorunlu kılar:

• Normal metin: en az 4.5:1
• Büyük metin (18.66px kalın veya 24px+): en az 3:1
• AAA seviyesi: normal metinde 7:1

Kontrast oranı, iki rengin göreli parlaklığından hesaplanır ve burada HSL'in lightness değeri pusula görevi görür: açık zeminde koyu metin (düşük lightness) güvenli yoldur. Paletinizdeki her primary/accent rengin hem beyaz hem koyu zemin üstünde test edildiğinden emin olun. İki rengi karıştırıp ara tonları denetlemek için renk karıştırıcı aracımız işinizi kolaylaştırır. Unutmayın: rengi tek başına anlam taşıyıcı yapmayın — hata mesajını yalnızca kırmızıyla değil, ikon ve metinle de belirtin.

2026 Tasarım Trendleri (Kısaca)

2026'da paletler daha geniş bir gamut'a açılıyor. CSS'in oklch() fonksiyonu, algısal olarak tutarlı açıklık sunduğu için HSL'in yerini almaya başladı; aynı lightness değeri her hue'da gerçekten aynı parlaklıkta görünüyor. Buna ek olarak yumuşak, düşük doygunluklu "sakin" nötrler, ince cam efektleri (glassmorphism'in olgun hali) ve sistemin otomatik ürettiği açık/koyu tema çiftleri standart hâle geldi. Yine de temel kural değişmedi: erişilebilirlik bir ekstra değil, paletin tasarım kriteridir.

Özet

HEX paylaşmak, RGBA saydamlık eklemek, HSL ise ayarlamak ve türetmek için en iyisidir. Primary, accent ve nötr rollerini netleştirip her tonu lightness merdiveniyle üretin, ardından her kombinasyonu WCAG AA eşiğinde test edin. Bu disiplinle kurulan palet hem güzel hem de herkes için okunabilir olur.