RGB yetmez: HSL, CMYK ve OKLCH renk gösterimleri

Önceki yazıda, Bilgisayar Renkleri Nasıl Üretir: RGB, HEX ve İkili Sayı Sistemi, bir rengin yalnızca üç sayıdan oluştuğunu gördük — kırmızı, yeşil, mavi; her biri 0–255 arasında. Ekranlar bu sayılarla gayet iyi çalışır. Ancak bir insan rengiyle çalışmaya başladığı an RGB hızla hantala dönüşür.

RGB Kullanışlıdır Ama Sezgisel Değildir

“Biraz daha açık kırmızı.” Bunu RGB ile nasıl yaparsınız? Üç kanalı da aynı anda biraz artırmanız gerekir. “Yalnızca doygunluğu biraz düşürmek istiyorum” derseniz, RGB’ye bakarak neyi azaltacağınızı bilemezsiniz. “Bu rengi aynıyla kağıda bas” istediğinizde ise RGB ile bu mümkün değildir.

Diğer renk gösterim biçimleri tam da bu sorunları çözmek için ortaya çıkmıştır.

HSL — İnsanın Düşünme Biçimi

HSL, rengi ton · doygunluk · parlaklık olmak üzere üç bileşene ayırarak ele alır. hsl(14, 100%, 60%), #FF5733 ile aynı renktir; ancak neyin nereden geldiği açıkça görülür.

RGB bilgisayarın diliyse, HSL tasarımcının dilidir. Aynı rengi neyi değiştirmek istediğiniz perspektifinden ele almanızı sağlar.

Hue — Ton 360°‘lik Bir Çember

Ton, saat gibi tam bir tur döner. 0°‘den başlayıp 360°‘ye ulaşır. 0° ile 360° aynı kırmızıdır.

Saturation — Doygunluk, Rengin Yoğunluğu

Aynı ton korunsa bile doygunluk azaldıkça renk griye yaklaşır.

Lightness — Parlaklık: Siyahtan Beyaza

L %0 ise her zaman siyah, %100 ise her zaman beyazdır. %50, o rengin “doğal” parlaklığıdır.

HSL’in Gerçek Gücü — Palet Oluşturma

Aynı ton (Hue) korunup yalnızca L değiştirildiğinde doğal uyum içindeki bir renk seti ortaya çıkar. Bunu RGB ile yapmak için 9 hücreyi tek tek elle hesaplamak gerekir; HSL’de ise L’yi %12’den %92’ye kademeli olarak değiştirmek yeterlidir.

Yukarıdaki iki palet de tek satırla oluşturulabilir.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... Yalnızca L'yi 10'ar artırın */
}

HSL, bir tasarım sistemi oluştururken en çok burada parlar.

CMYK — Mürekkep Dili

Renge ekranda değil kağıtta hayat vermek için tamamen farklı bir sistem gerekir. CMYK, matbaanın kullandığı dört mürekkep oranıdır.

Siyah neden “B” değil “K” harfiyle gösterilir? Çünkü B, Blue ile karışırdı. Ayrıca “Key plate” adlı matbaa teriminden gelir — diğer mürekkeplerin hizalandığı referans baskı levhası anlamındadır.

Işık Eklenince Aydınlanır, Mürekkep Eklenince Koyulaşır

RGB ile CMYK arasındaki en büyük fark karıştırma yöntemindedir.

Kırmızı mürekkep kırmızı görünür çünkü diğer ışıkları emer, yalnızca kırmızıyı geri yansıtır. Mürekkep, ışığı azaltır. Bu yüzden mürekkep karıştırıldıkça renk koyulaşır. Teoride CMY’nin üçünü karıştırmak siyah vermelidir; ancak pratikte bulanık bir kahverengi elde edilir. Bu nedenle gerçek siyah mürekkep (K) ayrıca kullanılır.

CMYK Nerede Kullanılır?

Ekran tasarımı yapıyorsanız CMYK’ya neredeyse hiç ihtiyaç duymazsınız. Yalnızca kağıda baskı alınacağında devreye girer.

• Baskıhanelere dosya tesliminde — Kartvizit, poster, kitap, ambalaj. Baskıhane RGB dosyası alırsa CMYK’ya dönüştürür.
• Photoshop / Illustrator’da baskı işlerinde — Renk modu baştan CMYK olarak ayarlanır.
• Marka kılavuzlarında — Ekran için HEX ve baskı için CMYK değerleri birlikte belirtilir. Aynı marka renginin iki ortamda da benzer görünmesi gerektiğinden.

Ekran Rengi ile Baskı Renginin Farklı Olmasının Nedeni — Gamut

Ekranın ifade edebildiği renk aralığı (RGB gamut) ile mürekkebin ifade edebildiği renk aralığı (CMYK gamut) birbirinden farklıdır. Ekranda canlı bir floresan pembe, baskıda aynı çıkmaz — çünkü mürekkeple üretilemez.

Bu nedenle baskı tasarımcıları çalışmaya başlamadan önce yalnızca CMYK gamutunun içindeki renkleri seçer. RGB modunda hazırlanan tasarımı doğrudan baskıya alınca renklerin sönük görünmesi sık karşılaşılan bir durumdur.

CMYK Değerleri Nasıl Yazılır?

Her mürekkebin ne kadarının uygulanacağı yüzde olarak belirtilir. %0 hiç uygulamama, %100 tam doyum.

Derin siyah yalnızca K %100 kullanılırsa griye yakın bulanık bir siyah çıkar. Bu yüzden matbaalar CMY’yi de ekleyerek daha derin bir siyah elde eder.

OKLCH — İnsanın Koordinatı

2020’lerin başından itibaren yaygınlaşan bir renk modelidir. Tek anahtar kelime: “İnsan gözüne doğal görünen.”

Üç koordinat, HSL ile benzer isimlere sahiptir:

• L — Lightness (parlaklık, 0–1)
• C — Chroma (doygunluk, 0–yaklaşık 0,4)
• H — Hue (ton, 0–360°)

Ancak HSL’in gizli bir sorunu vardır. Aynı L = 50% değerinde bile farklı renkler, gerçekte algılanan parlaklık açısından birbirinden çok farklıdır. Karşılaştıralım.

Tek cümleyle özetlersek — RGB ve HSL makinenin koordinatı, OKLCH insanın koordinatı.

L · C · H — Her Koordinatın Rolü

Aynı renkte tek bir koordinatı değiştirirsek ne olacağını görelim.

Nerede Kullanılır?

• Eşit parlaklıkta palet — 8 kategori renginin hepsini aynı parlaklığa ayarlamak istediğinizde
• Dark/Light mod otomatik dönüşümü — L değerini tersine çevirmek doğal bir dark tema üretir
• Erişilebilirlik — Metin ile arka plan arasındaki parlaklık farkı doğru hesaplanabilir
• Gradyanlar — Ortada gri bant oluşmayan akıcı geçişler

CSS Color Level 4’ten itibaren resmi olarak benimsendi; modern tarayıcılarda doğrudan kullanılabilir.

.btn { background: oklch(67% 0.18 30); }       /* turuncu */
.btn:hover { background: oklch(60% 0.18 30); } /* Yalnızca L 7 düşürüldü → tam o kadar koyulaşır */

Ne Zaman Hangisi Kullanılır?

Çoğu dijital iş için RGB/HEX yeterlidir. HSL, palet oluştururken aklınıza gelirse işe yarar; OKLCH ise dark/light mod tasarımında büyük kolaylık sağlar.

fns ile Renk Yönetimi

Rengin sayıdan ibaret olduğunu anladıktan sonraki adım, sık kullandığınız renkleri parmak uçlarınızda bulundurmaktır. fns, renk alma, kaydetme ve yeniden kullanma akışını tek bir tuşun arkasında toplar.

Ekranın Her Yerinden Renk Alan Eyedropper — ⌘+Shift+K

Eyedropper, ekrandaki herhangi bir pikselin rengini tam olarak yakalayan bir araçtır. Figma/Photoshop içinde kullanılabilen renk seçiciyi sistem geneline taşımak gibidir.

⌘+Shift+K tuşlarına basıldığında fns’nin Eyedropper’ı ekranın her yerinde açılır. Tasarım dosyasındaki tek bir piksel, bir fotoğrafın belirli alanı, başka bir uygulamanın arka plan rengi — fareyi üstüne götürüp tıklamanız o noktanın rengini tam olarak yakalar.

• Her tıklamada renk otomatik olarak panoya kopyalanır. Ayrıca “kopyala” işlemi yapmanıza gerek yoktur.
• Eyedropper widget’ından RGB / HEX / HSL / CMYK / OKLCH formatlarından hangisiyle panoya alınacağı seçilebilir.
• Yakalanan rengin görsel önizlemesi ve yakın sistem renkleri de birlikte gösterilir.

Eyedropper → otomatik pano kaydı → pano seçicisinden tekrar çekme — akış hiç kesintisiz devam eder. Mac’in yerleşik Digital Color Meter uygulamasında olduğu gibi ayrıca açmanıza ya da her seferinde kopyalama kısayoluna basmanıza gerek kalmaz.

Pano Rengi Otomatik Tanır

fns’nin pano geçmişi, kopyalanan metnin renk kodu olup olmadığını otomatik olarak algılar. Format fark etmeksizin tanır.

Kopyalanan bir rengi geçmişten geri çekerken yalnızca metne bakarak hangi renk olduğunu hatırlamak güçtür. fns, her öğenin yanında küçük bir renk çipi göstererek rengi anında görünür kılar.

Yalnızca Renkleri Görüntüleme

Tek bir tuşla pano geçmişinden yalnızca renk kodlarını filtreleyerek görüntüleyebilirsiniz. Tasarım çalışması sırasında son kullandığınız renklere ulaşmak için metin, URL ve kod kalabalığında aramak gerekmez.

• Aynı seçicide color: gibi filtre anahtar kelimesi → yalnızca renk öğeleri görünür
• Renk adıyla arama — “blue”, “red” aratınca o renk ailesindekiler listelenir
• Benzer renkler görsel olarak gruplanır

Bir Rengi Farklı Formata Dönüştürme

Aynı rengi başka bir gösterimle çevirip kullanabilirsiniz. Figma’dan #FF5733 kopyaladıktan sonra CSS’e rgb(...) biçiminde yapıştırmak istediğinizde, fns pano seçicisinden o öğeyi seçip tek bir kısayolla otomatik dönüşüm yapılır.

Figma (HSB) ile CSS (HSL/HEX/OKLCH) arasında geçiş yaparken her seferinde dönüştürücü açmanıza gerek kalmaz.

Metin Genişletme ve Gruplama

Sık kullandığınız marka renklerini metin kısaltmalarıyla kaydedin.

CSS, Figma’nın renk giriş alanı, Slack mesajı, kod editörü — her yerde aynı kısaltmalar çalışır. Marka kılavuzundaki rengi her seferinde arayıp kopyalamak zorunda kalmazsınız.

Her seferinde dönüştürücü açıp renk kodunu başka formata taşımak için harcadığınız zamanı fns ile bir kez azaltın.

Bu sayıların nereden geldiğini merak ediyorsanız — RGB’nin üç kanalının, ikili sistemin ve HEX gösteriminin temelleri için Bilgisayar Renkleri Nasıl Üretir: RGB, HEX ve İkili Sayı Sistemi yazısıyla başlayın.