CSS'te yeni renk çağı

Kısa cevap

CSS artık renkleri yalnız sRGB'nin onaltılık kodlarıyla ya da HSL ile değil, algıya göre düzenlenmiş OKLCH uzayında, iki rengi istenen uzayda karıştıran color-mix() ile ve var olan bir renkten yeni bir renk türeten göreli sözdizimiyle yazabiliyor; P3 gibi daha geniş gamlı renkler de color() işleviyle tanımlanabiliyor. oklch() ile kurulan ton skalaları HSL'den daha dengelidir, çünkü OKLCH'nin açıklık ekseni gözün gördüğü açıklığa yakın ölçülmüştür: eşit sayısal adımlar göze de yaklaşık eşit görünür, oysa HSL'de aynı «l» değerindeki sarı ile mavinin açıklığı çok farklıdır ve sarı bir skalanın basamakları bir yarıda birbirine yapışır, öbür yarıda uçurum gibi açılır. Bu araçların desteği hızla genişledi ama eşit değildir; yayından önce güncel destek durumu kontrol edilir ve geniş gamlı renkler için sRGB bir geri düşüş değeri yazılır.

HSL'nin açıklığı neden yanıltır

Bir ton skalasının amacı, UX-01'de kurduğumuz gibi, basamaklarının gözde düzenli bir merdiven gibi inmesidir. HSL bu işi yapamaz, çünkü HSL'deki «l» değeri algıyla değil, RGB kanallarının basit bir ortalamasıyla tanımlıdır; EK-02 bu formülün kendisini açıyor.

Sayılar sorunu açıkça gösterir. HSL'de tam doygunluk ve yüzde elli açıklıkla yazılmış altı rengin OKLab açıklığı ölçüldüğünde, kırmızı yaklaşık 0,63, sarı 0,97, yeşil 0,87, camgöbeği 0,91, mavi 0,45, macenta 0,70 çıkar. Aynı «l» değeri, yarıdan fazla açıklık farkını saklar. Beyaz metin, bu sarı üzerinde yaklaşık 1,07:1, bu mavi üzerinde yaklaşık 8,6:1 verir.

Bu fark tek tek renklerde değil, skalalarda asıl bedelini öder. HSL'de 55 derece tonunda, yüzde doksan doygunlukta bir sarı skalası, «l» değeri 90'dan 20'ye onar onar inerek kurulduğunda, OKLab açıklığı ilk dört basamakta her seferinde yalnız 0,02 kadar düşer: 0,97, 0,95, 0,93, 0,91, 0,89. Sonra birden her basamakta yaklaşık 0,14 düşmeye başlar: 0,76, 0,61, 0,46. Skalanın açık yarısındaki beş basamak göze neredeyse aynı sarının tonları gibi görünür; koyu yarısındaki basamaklar ise birbirinden kopuktur. Aynı yöntemle kurulan bir mavi skalası çok daha düzgün davranır, ama bu şanstır, yöntemin başarısı değil.

oklch(): algıya göre düzenlenmiş eksenler

OKLCH, OKLab uzayının kutupsal yazılışıdır; uzayın kendisi ve nasıl kurulduğu BI-24'ün konusudur. Bu derste önemli olan, CSS'te nasıl kullanıldığıdır. Bir mavi, oklch(0.56 0.12 255) biçiminde yazılır: ilk sayı açıklık, ikincisi kroma, üçüncüsü ton açısıdır.

Aynı sarı sorunu burada ortadan kalkar. 255 derece tonunda ve 0,12 kromada bir mavi skalası, açıklık 0,92'den 0,30'a eşit adımlarla, her adımda 0,09 inerek kurulduğunda, her basamağın ölçülen açıklığı tam olarak hedeflenen değere oturur. Tasarımcı skalayı gözüyle ayarlamak zorunda kalmaz; eşit adımlar zaten eşit görünür. Tailwind CSS'in varsayılan paletinin OKLCH ile yazılması, UX-01'de andığımız gibi, bu nedenle bir tesadüf değildir.

OKLCH'nin bir bedeli vardır ve GT-06'da tanımladığımız gam dışı renk kavramına bağlanır: her açıklık ve kroma birleşimi sRGB içinde değildir. Yukarıdaki mavi skalasının en açık iki basamağı, 0,92 ve 0,83 açıklıkta, ve en koyu basamağı, 0,30'da, 0,12 kromayla sRGB'nin dışına taşar. CSS Color 4 belirtimi gam dışı renklerin nasıl gam içine alınacağına dair bir yöntem tanımlar; ama web-features verisine göre bu gam eşleme henüz hiçbir tarayıcıda Baseline değildir ve tarayıcılar bu renkleri çoğu zaman kanalları keserek kırpar. Kırpma, rengin tonunu ve açıklığını beklenmedik biçimde değiştirebilir. Pratik çözüm, skalanın uçlarında kromayı azaltmaktır; açık ve koyu uçlara yaklaştıkça sRGB'nin taşıyabileceği kroma daralır.

color-mix() ve göreli sözdizimi

CSS Color 5 belirtimi, renklerle hesap yapmak için iki araç ekler. Belirtimin kendi gerekçesi, tasarım sistemlerinin birden fazla platformu ve karanlık tema gibi kullanıcı tercihlerini desteklemesiyle renkleri tek tek elle belirlemek yerine tek bir kaynaktan hesaplamanın giderek daha yararlı hâle gelmesidir.

color-mix(in oklch, var(--birincil) 80%, black) gibi bir yazım, birincil rengi yüzde yirmi siyahla OKLCH uzayında karıştırır. Karışımın hangi uzayda yapıldığı önemlidir: aynı iki renk sRGB'de karıştırıldığında ara renk bulanık ve grileşmiş görünebilir, OKLCH ya da OKLab'da karıştırıldığında daha dengeli bir geçiş verir. UX-04'teki durum katmanları, color-mix() ile her bileşen için ayrı renk yazmadan tek satırda üretilebilir.

oklch(from var(--birincil) calc(l - 0.1) c h) yazımı, birincil rengin kroma ve tonunu korur, açıklığını 0,1 düşürür. Belirtimin kendi örneklerinden biri, oklch(from var(--color) l 0 h) yazımının açıklığı koruyup kromayı sıfırladığını, yani rengin aynı açıklıktaki grisini verdiğini gösterir. Bu yazımla bir tasarım sisteminin bütün türetilmiş renkleri, UX-01'in rol adları gibi, tek bir kaynak renge bağlanabilir ve kaynak değiştiğinde kendiliğinden güncellenir.

P3 renkleri ve geri düşüş

CSS'te bir P3 rengi color(display-p3 1 0.5 0) gibi yazılır; aynı renk oklch() ile de, sRGB'nin dışındaki bir kromayla yazılabilir. Ekranın bu gamı gösterip göstermediği @media (color-gamut: p3) sorgusuyla anlaşılır. Ekranın gamı ve ekran teknolojileri EK serisinin konusudur; burada önemli olan, geniş gamlı bir rengin her kullanıcıya aynı görünmeyeceğidir.

Geri düşüş kurmanın en basit yolu, aynı özelliği iki kez yazmaktır: önce sRGB bir hex değeri, hemen ardından OKLCH ya da P3 değeri. Yeni değeri anlayan tarayıcı onu kullanır, anlamayan ilkinde kalır. Daha karmaşık durumlarda @supports kuralı kullanılır. Geri düşüşün rengi, geniş gamlı rengin sRGB'deki en yakın karşılığı olmalıdır; GT-10'un kayıt mantığı burada da geçerlidir: P3 renk bir ekran için türetilmiş bir değerdir, sRGB geri düşüş bir başkası.

Desteği yayından önce denetlemek

Kartın bir notu vardır: tarayıcı desteği yayından önce kontrol edilmelidir. Bu araçlar birkaç yıl içinde hızla yayıldı ve bir dersin yazıldığı gün ile okunduğu gün arasında durum değişebilir. Bu yüzden ders, desteği tarihli bir kaynağa dayandırır.

Bu tablodan çıkan pratik kural şudur: oklch() ve color-mix() bugün geri düşüşle rahatça kullanılabilir; göreli sözdizimi, onu desteklemeyen daha eski tarayıcılar hâlâ dolaşımda olduğu için, geri düşüşü dikkatle kurulmuş bir biçimde kullanılmalıdır; gam dışı renklerin nasıl görüneceği ise her tarayıcıda ayrıca denetlenmelidir. Belirtimlerin kendileri de hareket hâlindedir: CSS Color 4 aday öneri taslağı, CSS Color 5 ise çalışma taslağı düzeyindedir.

Algısal açıklık ve kontrast oranı

OKLCH'nin açıklığı ile UX-06'daki WCAG kontrast oranı aynı şeyi ölçmez. Kontrast oranı, sRGB kanallarından hesaplanan göreli parlaklığa dayanır; OKLCH'nin açıklığı ise algıya göre düzenlenmiş bir modelin eksenidir. İkisi birbirine yakın gider, ama birebir örtüşmez ve bu fark sınırda önem kazanır.

Bir deneme bunu gösterir. Açıklığı 0,56 ve kroması 0,12 olan beş renk, beş farklı tonda yazılıp her birinin üzerine beyaz metin konduğunda kontrast oranları şöyle çıkar: kırmızımsı bir tonda yaklaşık 4,93:1, sarımsı bir tonda 4,66:1, yeşil bir tonda 4,45:1, mavide 4,66:1, mora çalan bir tonda 4,95:1. Aralık dardır; HSL'de aynı deneme 1,07 ile 8,6 arasında bir yelpaze vermişti. Ama yeşil renk, küçük metinden beklenen 4,5'e bir sınırının hemen altında kalır. Sarımsı olan ise sRGB'nin dışına taşar ve kırpılmış hâliyle ölçülmüştür.

Bundan çıkan ders, OKLCH ile kurulan bir paletin kontrastın yerine geçmediğidir. Eşit açıklık, tonlar arasında kontrastı büyük ölçüde eşitler ve bir tasarım sistemini öngörülebilir kılar; ama eşiğe yakın her renk çifti yine WCAG formülüyle ölçülür. UX-05'teki HCT uzayının açıklık ekseni için L* seçilmesi de aynı kaygıdan gelir: kontrastın açıklıktan olabildiğince doğrudan okunabilmesi.

Örnek — avatar oluşturucunun ten paleti

Bir uygulama, kullanıcıların kendi çizgi avatarlarını oluşturmasına izin veriyor ve altı ten rengi sunuyor. İlk sürümde tenler HSL ile yazılmış: 25 derece ton, yüzde kırk beş doygunluk, açıklık 85'ten 25'e eşit adımlarla. Ölçüldüğünde, bu altı tenin OKLab açıklıkları 0,89, 0,80, 0,71, 0,62, 0,51 ve 0,39 çıkıyor: adımlar açık uçta 0,09 civarındayken koyu uçta 0,12'ye büyüyor. Fark çarpıcı değil, ama koyu tenler arasındaki adım açık tenler arasındakinden belirgin biçimde büyük; en koyu iki basamak arasında, bir kullanıcının kendi tenine yakın bir seçenek bulamayacağı bir boşluk açılıyor.

Ekip paleti oklch() ile yeniden yazıyor: 55 derece ton, 0,08 kroma ve açıklık 0,85'ten 0,35'e her adımda 0,10 inen altı basamak. Seçilen aralık tesadüf değil: ekibin açıktan koyuya ölçtüğü dört ten örneğinin OKLab açıklıkları 0,86, 0,68, 0,50 ve 0,33, kromaları da 0,05 ile 0,09 arasında. Yeni paletin altı basamağı bu aralığı eşit adımlarla kaplıyor ve hepsi sRGB gamının içinde kalıyor, yani hiçbir tarayıcı onları kırpmıyor.

Göreli sözdizimi avatarın geri kalanını tek kaynaktan türetiyor. Yanaktaki gölge oklch(from var(--ten) calc(l - 0.08) c h), dudak rengi tonu biraz kırmızıya kaydırılmış bir oklch(from var(--ten) l calc(c + 0.03) calc(h - 20)) olarak yazılıyor. Kullanıcı hangi teni seçerse seçsin, gölge ve dudak aynı algısal ilişkiyle ona bağlanıyor; açık tenlerde gölge kaybolmuyor, koyu tenlerde çamurlaşmıyor. Göreli sözdizimini desteklemeyen tarayıcılar için her tenin gölgesi ayrıca sabit bir hex değeriyle, geri düşüş olarak yazılıyor. Sonuç, altı tenin hepsiyle, açık ve karanlık temada, eski ve yeni tarayıcılarda yan yana denetleniyor.

Sık yapılan yanlış

Özet

1. oklch() ile kurulan ton skalaları HSL'den daha dengelidir, çünkü OKLCH'nin açıklığı algıya göre ölçülmüştür; HSL'de sarı bir skalanın açık yarısındaki basamaklar birbirine yapışır, koyu yarısındakiler kopar.
2. color-mix() iki rengi seçilen uzayda karıştırır, göreli sözdizimi var olan bir renkten yeni renk türetir; ikisi de bir tasarım sisteminin türetilmiş renklerini tek bir kaynağa bağlar ve ten gibi bir kaynaktan gölge ve vurguyu aynı algısal ilişkiyle üretir.
3. P3 ve gam dışı renkler için sRGB bir geri düşüş yazılır; destek web-features gibi tarihli bir kaynaktan yayından önce kontrol edilir: oklch() ve color-mix() yaygın kullanılabilir, göreli sözdizimi yeni kullanılabilir, gam eşleme henüz Baseline değildir.

Kendini sına

1. (Kolay) oklch() işlevindeki üç sayı sırasıyla neyi gösterir?
2. (Kolay) web-features 3.40.0'a göre göreli renk sözdizimi hangi tarihte Baseline «yeni kullanılabilir» oldu?
3. (Orta) oklch ile oluşturulan ton skalaları neden HSL'den daha dengelidir?
4. (Orta) Geniş gamlı bir P3 rengi için geri düşüş nasıl kurulur?
5. (Zor) 0,12 kromalı bir OKLCH mavi skalasının en açık ve en koyu basamaklarında ne sorun çıkar ve nasıl çözülür?
6. (Zor) Avatar oluşturucunun ten paletini oklch() ve göreli sözdizimiyle yeniden kurmak hangi sorunu çözer ve neden ek bir geri düşüş gerekir?

Cevaplar

1. Açıklık, kroma ve ton açısı («oklch(): algıya göre düzenlenmiş eksenler»).
2. 16 Eylül 2024 («Desteği yayından önce denetlemek»).
3. OKLCH'nin açıklık ekseni gözün gördüğü açıklığa yakın ölçülmüştür, bu yüzden eşit sayısal adımlar yaklaşık eşit algısal adımlar verir. HSL'nin açıklığı RGB kanallarının ortalamasıdır; aynı «l» değerinde sarı yaklaşık 0,97, mavi 0,45 OKLab açıklığındadır ve HSL sarı skalasında açık yarının basamakları yaklaşık 0,02, koyu yarınınkiler yaklaşık 0,14 aralıklıdır («HSL'nin açıklığı neden yanıltır», «oklch(): algıya göre düzenlenmiş eksenler»).
4. Önce sRGB'deki en yakın karşılık bir hex değeri olarak yazılır, hemen ardından aynı özellik P3 ya da OKLCH değeriyle yeniden yazılır; anlamayan tarayıcı ilk değerde kalır. Gerekirse @supports ya da color-gamut sorgusu kullanılır («P3 renkleri ve geri düşüş»).
5. En açık iki ve en koyu basamak sRGB gamının dışına taşar; CSS'in gam eşleme davranışı henüz Baseline olmadığı için tarayıcılar bu renkleri çoğu zaman kırpar ve renk beklenmedik biçimde değişebilir. Skalanın uçlarında kroma azaltılır ve sonuç gerçek tarayıcılarda denetlenir («oklch(): algıya göre düzenlenmiş eksenler»).
6. HSL ile yazılmış tenlerin algısal adımları eşit değildi ve koyu uçta boşluk açılıyordu; oklch() ile altı ten, ölçülmüş ten örneklerinin aralığını eşit adımlarla ve gam içinde kaplar. Gölge ve dudak renkleri göreli sözdizimiyle tene aynı algısal ilişkiyle bağlanır. Göreli sözdizimi henüz yalnız yeni kullanılabilir olduğu için desteklemeyen tarayıcılara sabit hex geri düşüşler yazılır («Örnek — avatar oluşturucunun ten paleti»).

Kaynaklar

• W3C, «CSS Color Module Level 4», Candidate Recommendation Draft.
• W3C, «CSS Color Module Level 5», Working Draft.
• web-platform-dx, «web-features», sürüm 3.40.0, data.json.
• Tailwind CSS, «Colors», resmî belgeler.

Sonraki adım

UX-10 ekrandaki renk kararlarını bir oyun dünyasına taşıyor: oyunlarda tırmanılabilir yüzeylerin neden sıklıkla aynı renkle işaretlendiğini, bir bölgeden ötekine geçerken paletin nasıl değiştiğini ve dost ile düşmanı ayıran renklerin renk körlüğü kiplerinde nasıl yeniden kurulduğunu soruyor. EK-01 ise bu dersteki bütün renklerin son durağına iniyor: ekranda gördüğümüz sarının içinde gerçekten sarı ışık olup olmadığını, üç renkli alt piksellerin ve bit derinliğinin milyonlarca rengi nasıl ürettiğini gösteriyor.