OKLCH nedir: gözünüzün gördüğüyle sonunda örtüşen renk formatı

OKLCH nedir

OKLCH, Björn Ottosson’un 2020’de yayımladığı algısal renk uzayı Oklab’ın kutupsal biçimidir. Üç sayıdan oluşur. L algılanan açıklıktır: 0 (siyah) ile 1 ya da %100 (beyaz) arasında değişir. C kromadır, yani rengin miktarı: 0 (gri) ile ekranların gösterebildiği en canlı renkler için yaklaşık 0,37 arasındadır. H ise 0 ile 360 derece arasındaki ton açısıdır.

Aynı renk farklı formatlarda şöyle yazılır. Aşağıdaki tüm değerleri PickShade anlık olarak hesaplar, bu yüzden olduğu gibi kopyalayabilirsiniz.

OKLCH neden HSL’den iyidir

HSL’deki açıklık bir algı değil, bir formüldür. hsl(60 100% 50%) parlak bir sarı, hsl(240 100% 50%) ise koyu bir mavidir, ama ikisi de %50 açıklıkta olduğunu iddia eder. Paleti HSL üzerine kurarsanız her tonu elle düzeltmeniz gerekir.

OKLCH’de L değeri aynı olan renkler aynı açıklıkta görünür. L ve C’yi sabit tutup H’yi döndürerek dengeli duran bir ton seti elde edebilir, H ve C’yi sabit tutup L’yi adım adım değiştirerek temiz bir kademe skalası kurabilirsiniz. Tailwind CSS v4’ün tüm varsayılan paletini OKLCH ile tanımlamasının nedeni budur.

Açıklık kontrastı da öngörür. Arka planıyla arasındaki L farkı yaklaşık 0,4 veya daha fazla olan metin genellikle okunaklıdır. Bu da erişilebilir renk seçimlerini çok daha kolay değerlendirilebilir kılar.

CSS’te sözdizimi

Açıklık yüzde olarak ya da 0 ile 1 arasında bir sayı olarak yazılabilir. Kroma bir sayıdır. Ton, derece cinsinden bir açıdır. Şeffaflık eğik çizgiden sonra gelir.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Tarayıcı desteği

oklch() tüm güncel tarayıcılarda çalışır: Safari 15.4’ten, Chrome ve Edge 111’den, Firefox 113’ten beri. Bu, kullanıcıların %90’ından fazlasını rahatlıkla kapsar. Çok eski tarayıcılar için OKLCH değerinin bir üst satırına HEX yedeği ekleyin.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Kroma sınırları ve renk gamı

OKLCH hiçbir ekranın gösteremeyeceği renkleri de tanımlayabilir. Ulaşılabilecek en yüksek kroma açıklığa ve tona bağlıdır: canlı bir sarı yalnızca yüksek açıklıkta, canlı bir mavi yalnızca düşük açıklıkta mümkündür. Bir değer sRGB ya da Display P3 renk gamının dışında kaldığında tarayıcı onu gamın içine geri eşler ve bu, rengi kaydırabilir.

PickShade sRGB dışında kalan renkleri işaretler ve size gama sığan en yakın rengi verir. Bu renk, açıklık ve ton korunup kroma düşürülerek bulunur. CSS Color 4’ün önerdiği yöntem de budur.

HEX’i OKLCH’ye nasıl dönüştürürsünüz

Dönüşüm şu adımlarla ilerler: HEX’ten sRGB’ye, sRGB’den doğrusal ışığa, doğrusal sRGB’den LMS koni uzayına, ardından küp kök, Oklab’a götüren bir matris ve son olarak Oklab’dan kutupsal koordinatlara. Bunu elle yapmak hataya açıktır. Herhangi bir rengi dönüştürücüye yapıştırın ve sonucu kopyalayın.

Sorular ve yanıtlar