Modern CSS'te OKLCH Renk: Neden Kazanıyor ve Nasıl Yayına Alınır

OKLCH, CSS'in yayına aldığı ve tasarımcıların gerçekten üzerine akıl yürütebildiği ilk renk uzayı. Paletleri hâlâ hex ile kuran ekipler, farkında bile olmadıkları her kontrast ve karanlık mod tartışmasını sessizce kaybediyor.

Hex hiçbir zaman bir renk uzayı değildi, bir serileştirmeydi

Hex, sRGB için bir kısaltmadır. #4A90E2 bir renk tanımı değildir, altı karaktere sıkıştırılmış kırmızı, yeşil ve mavi kanal değerlerinden oluşan bir üçlüdür. sRGB, 1990'ların başında CRT monitörler için tasarlandı, insan görsel algısı için değil.

Sonuç şu: paletinizde aynı sayısal "parlaklık" konumunda duran iki hex değeri gözünüze tamamen farklı görünebilir. Çoğu tasarım sisteminde blue-500, yellow-500'den daha koyu görünür; ikisi rampada aynı göreli konumu paylaşsa bile. Bu bir zevk problemi değil. Koordinat sistemine gömülü bir matematik problemi.

"Hex hiçbir zaman bir renk uzayı değildi, bir serileştirmeydi ve biz o günden beri açıklık üzerine tartışıyoruz."

HSL düzeltmiş gibi yaptı ama düzeltmedi

HSL geldi ve tasarımcılara bir dil verdi: ton, doygunluk, açıklık. Bir sistem gibi hissettirdi. Değildi. HSL'deki açıklık kanalı kaputun altında hâlâ sRGB değerlerine eşleniyor; yani HSL, hex'in sahip olduğu algısal sorunları aynen devralıyor.

hsl(220, 70%, 50%) ve hsl(45, 70%, 50%) nominal olarak aynı açıklıkta. Yan yana açın. Sarı belirgin biçimde daha açık okunur. HSL size aynı bozuk matematik için daha güzel kelimeler verdi.

OKLCH algısal olarak homojendir

OKLCH, Björn Ottosson'un 2020'de önceki uzayların algısal homojensizliğini çözmek için geliştirdiği OKLab renk uzayı üzerine kuruludur. OKLCH'deki L algılanan açıklığı ifade eder ve insanın görsel sisteminin ışığa gerçekte nasıl yanıt verdiğine göre kalibre edilmiştir.

OKLCH'de eşit L değerleri eşit algılanan parlaklık demektir. Yaklaşık eşit değil. "Chroma benzerse genelde eşit" de değil. Eşit. Hiçbir önceki CSS renk uzayının sunamadığı özellik bu ve palet üretimi hakkında nasıl düşündüğünüzü baştan değiştiriyor.

OKLCH'nin kazanmasının üç nedeni

Algısal olarak homojen açıklık, öngörülebilir ton interpolasyonu ve geniş gamut desteği. Her biri mevcut paletinizdeki belirli bir hatayı düzeltir ve birlikte temalar, bileşenler ve ekran türleri arasında ölçeklenen bir renk iş akışı oluştururlar.

Birinci neden: açıklık sapması öldü

Hex ve HSL sistemlerinde açıklık sapması, her palette ödediğiniz görünmez vergidir. Blue-50 ve amber-50'yi gözle doğru göründüğü şekilde ayarlarsınız, farklı ekranlarda ayrışırlar, karanlık modda birbirleriyle savaşırlar ve kontrast matematiği asla tam oturmaz.

OKLCH'de blue-50 ve amber-50 aynı açıklık sayısına sahiptir ve o sayı aynı algılanan parlaklığı temsil eder. Tailwind v4 tüm paletini tam bu yüzden OKLCH'ye taşıdı. Radix UI renk ölçeklerini kullanıyorsanız, dokümantasyonda OKLCH kelimesini hiç görmemiş olsanız bile algısal homojenlikten zaten yararlanıyorsunuz.

İkinci neden: ton interpolasyonu artık makul

CSS'te sRGB interpolasyonu kullanan gradyanlar algısal uzaydan değil, RGB renk küpünün içinden geçer. sRGB'de maviden sarıya bir gradyan, çamurlu gri bir ortadan geçer çünkü RGB köşegeni akromatik eksenin yakınından kesişir. Bu sanatsal değil. Bir geometri kazası.

OKLCH gradyan interpolasyonu ton açısını algısal halka boyunca yürür. OKLCH'de maviden sarıya giderken camgöbeği ve yeşilden geçilir; gözünüzün beklediği de budur. Gri çamur gitti. Bu, arayüz gradyanları, animasyonlu renk geçişleri ve ara adımlar üreten her palet üretim aracı için önemlidir.

Üçüncü neden: P3 ve Rec2020'ye ulaşılabiliyor

Hex, sRGB dışındaki renkleri tanımlayamaz. 2016'dan beri çıkan her iPhone, geniş gamutlu panele sahip her modern dizüstü ve çoğu yeni tüketici monitörü, P3 gamutunda var olan ama hex adresi olmayan renkleri gösterebilir. Koordinat sisteminiz onları adlandıramadığı için doygun, canlı rengi masada bırakıyordunuz.

OKLCH, P3 ve Rec2020 renklerini doğal olarak tanımlayabilir. oklch(0.60 0.28 260) P3'te var olan ama sRGB gamutunun dışında kalan canlı bir mavidir. Modern tarayıcılar bununla ne yapacağını bilir ve Apple'ın Display P3 renk rehberliği yıllardır bu yönü işaret ediyor. Şimdi OKLCH'ye geçen tasarım sistemi, P3 varsayılan beklenti olduğunda da hazır olan sistemdir.

Hex'ten OKLCH'ye dört adımlı geçiş

Denetle, dönüştür, yeniden üret, tekrar denetle. Geçiş ilkel tokenlar için mekaniktir, semantik tokenlar için yargı gerektirir. Orta ölçekli bir tasarım sisteminin tam geçişi hafta değil, gün sürer. Başlamadan önce yeni tokenları temiz bir Figma variables mimarisine oturtmak en çok zaman kazandırır.

Adım bir: mevcut paleti denetle

Sisteminizdeki her renk tokenını dışa aktarın. Her hex değerini oklch.com ya da PostCSS OKLCH eklentisi gibi bir araçla OKLCH'ye dönüştürün. L değerine göre sıralayın ve tonlar boyunca açıklık sütununa bakın.

Hatalar kendilerini hemen ilan eder. Blue-300 L=0.72'de dururken yellow-300 L=0.87'de durur. Eşdeğer görsel ağırlıkta olması gereken tokenlar birbirine yakın bile değildir. Bu denetim, itiraz eden herkese geçiş kararını savunmayı kolaylaştıran kanıttır.

Adım iki: ilkelleri OKLCH'ye dönüştür

İlkel ölçeği, yani semantik tokenları değil ham numaralı rampayı alın ve OKLCH'ye dönüştürün. Açıklık değerlerini on bir duraktan hepsinde tutarlı adımlara yuvarlayın: 0.97, 0.93, 0.86, 0.75, 0.65, 0.54, 0.45, 0.37, 0.27, 0.19, 0.13.

Orijinal hex değerlerini birebir korumaya çalışmayın. Amaç tutarsızlığı düzeltmek. Dönüştürülmüş bir blue-500 ve dönüştürülmüş bir red-500 eski değerlerle piksel piksel aynı olmayacak ve tüm amaç da bu. Sistem sadece değişmiyor, iyileşiyor.

Adım üç: rampaları yeniden üret

Temiz, tutarlı açıklık adımlarıyla, tonlar arasında rampaları yeniden üretmek bir tablo işlemine dönüşür. L sütununu ayarlayın, her ton için chroma'yı seçin (maviler genelde kırpılmadan önce kahverengilerden ve sarılardan daha fazla chroma taşır), H sütununu ayarlayın ve üretin.

Sonuç olarak blue-500 ve red-500, sisteminizde ilk kez aynı görsel ağırlıkta hissettirir. Daha önce keyfi yargı çağrıları olan marka renk paleti kararları, işaret edilebilecek bir koordinata sahip ilkeli seçimlere dönüşür.

Adım dört: erişilebilirliği tekrar denetle

Yeni palet, yeni kontrast turu. OKLCH kontrast tahminini kolaylaştırır çünkü açıklık artık dediği şeyi ifade eder. Bilinen L değerlerine sahip iki tokenı eşleştirmek, denetleyiciyi açmadan önce bile kontrast oranları hakkında güçlü bir ön bilgi verir.

Tüm semantik token eşleşmelerinde WCAG ve APCA kontrast kontrollerini çalıştırın. Artık gereksinimleri karşılamayan çiftleri işaretleyin ve başarısız tokenın chroma ya da açıklığını ayarlayın. Bir OKLCH paletinde düzgün bir erişilebilir renk kontrastı turu, hex paletindeki eşdeğerinden genelde daha az sürpriz çıkarır; çünkü açıklık adımları önceden yanlıştı, şimdi değil.

---

Modlar, tonlar ve modern ekranlar arasında açıklık sapması olmadan ayakta kalan bir renk sistemi mi istiyorsunuz? Brainy, OKLCH-native palet sistemleri tasarlar; Figma variables, CSS custom property'leri ve Tailwind tokenları olarak, kontrast turu zaten yapılmış şekilde teslim edilir.

---

Dört OKLCH tuzağı

Gamut dışı kırpma, chroma kırpması, alfa yönetimi ve araç boşlukları. Her biri OKLCH'ye yeni geçen ekipleri ısırır ve her birinin, neye baktığınızı bildikten sonra dakikalar içinde uygulanan özel bir çözümü vardır.

Gamut sorunu en çok ısırandır. oklch(0.60 0.32 260) yazdığınızda o chroma değeri sRGB dışındadır. Masaüstü tarayıcılar bunu en yakın sRGB rengine kırparak halleder; bu da görünen tonu kaydırabilir. Çözüm ya temel tokenlar için sRGB-güvenli chroma'da kalmak ya da geniş gamut değerlerini bir media query arkasına alıp üstte bir yedek bildirim tutmaktır.

Çalışan OKLCH palet rampası

Tutarlı açıklık adımlarına sahip pratik 11 adımlı bir rampa; referans olarak 260 tonunda mavi kullanıldı. Açıklık adımları sisteminizdeki her tonda aynıdır. Renk ailesi başına yalnızca chroma ve ton değişir.

:root { --blue-50: oklch(0.97 0.02 260); --blue-100: oklch(0.93 0.05 260); --blue-200: oklch(0.86 0.09 260); --blue-300: oklch(0.75 0.14 260); --blue-400: oklch(0.65 0.18 260); --blue-500: oklch(0.54 0.22 260); --blue-600: oklch(0.45 0.20 260); --blue-700: oklch(0.37 0.17 260); --blue-800: oklch(0.27 0.13 260); --blue-900: oklch(0.19 0.09 260); --blue-950: oklch(0.13 0.06 260); }

Kırmızı (ton 25), kehribar (ton 75) ya da yeşil (ton 145) üretmek için L sütununu on bir duraktan hepsinde aynı tutun. C'yi tonun doğal chroma kapasitesine göre ayarlayın: sarılar ve yeşiller, sRGB dışına kırpılmadan önce mavilerden daha az chroma taşır. H'yi hedef tonunuza ayarlayın. Palet sisteminin tamamı bu.

Bu rampanın üstüne kurulan karanlık mod renk sistemi, hex değerlerini tek tek elle ezmek yerine, ilkeller arasında L adımı ve tona göre geçiş yapan semantik tokenlar kullanır.

Tarayıcı desteği ve güvenli geçiş penceresi

OKLCH, 2023'ten beri çıkan her büyük tarayıcıda destekleniyor. Chrome 111, Safari 15.4, Firefox 113 ve Edge 111'in hepsi tam OKLCH desteği sunuyor. Küresel kapsam 2025 ortası itibarıyla %93'ün üzerinde. Geçiş penceresi açık.

OKLCH'yi desteklemeyen herhangi bir tarayıcı için yedek tek satırdır. Önce hex yedeğini, sonra OKLCH değerini bildirin. OKLCH'yi anlamayan tarayıcılar onu yok sayıp hex'i kullanır. Anlayanlar daha iyi değeri kullanır.

color: #4a7de8; /* sRGB fallback */ color: oklch(0.54 0.22 260); /* OKLCH for modern browsers */

Tailwind v4 paletini doğal olarak OKLCH'de üretir. Linear, Stripe'ın Sail tasarım tokenları ve Apple'ın geliştirici renk rehberliği algısal olarak homojen sistemlere doğru ilerledi. Sektör kararını verdi. Soru, ekibinizin ne zaman katılacağı.

SSS

OKLCH öğrenmek zor mu?

Koordinat sistemi hex ya da HSL'den farklı ama karmaşık değil. L, 0'dan 1'e açıklıktır. C chroma'dır, kabaca ne kadar doygun olduğu. H derece cinsinden tondur. L'nin algılanan parlaklık, C'nin renklilik anlamına geldiğini içselleştirdiğinizde sistem, HSL'nin olduğundan daha hızlı sezgisel hale gelir.

Bugün Figma'da OKLCH kullanabilir miyim?

Figma, 2025 itibarıyla renk seçicisinde OKLCH'yi doğal olarak sunmuyor. Pratik iş akışı, tokenları Tokens Studio ya da Figma variables ile senkronize edilen bir CSS değişkenleri dosyası üzerinden bir token dosyasında OKLCH olarak tanımlamak, ardından değerleri doğrulamak için Figma'nın kod dışa aktarımını kullanmaktır. Figma'nın render motoru dönüşümü dahilen halleder.

OKLCH mevcut hex değerlerimi bozar mı?

Hayır. OKLCH'yi token token, kademeli olarak devreye alabilirsiniz. Mevcut hex değerleriniz tıpkı eskisi gibi çalışmaya devam eder. Geçiş ekleyicidir, bir takas değil.

LCH ile OKLCH arasındaki fark nedir?

LCH, algısal olarak homojen olan ama özellikle mavi-mor aralığında ton doğrusallığı sorunları bulunan CIELAB renk uzayına dayanır. OKLCH, bu ton kaymalarını düzelten OKLab'e dayanır. Pratik tasarım işi için OKLCH daha iyi seçimdir çünkü ton interpolasyonu daha az sürpriz üretir.

Hex'i OKLCH'ye nasıl dönüştürürüm?

oklch.com'u, PostCSS oklch eklentisini ya da CSS Color 4 spesifikasyon oyun alanını kullanın. Hex değerinizi yapıştırın, OKLCH koordinatlarını okuyun, L ve C'yi iki ondalığa, H'yi en yakın tam dereceye yuvarlayın. Çalışan token değeriniz budur.

OKLCH erişilebilirlik gereksinimlerini etkiler mi?

WCAG kontrast gereksinimleri OKLCH açıklığına değil, sRGB göreli parlaklığına göre tanımlanır. APCA algısal modellerle daha yakından hizalıdır ve OKLCH L değerlerine daha doğal eşlenir. Pratikte OKLCH, L algılanan parlaklığı izlediği için kontrast tahminini daha sezgisel kılar, ama yine de semantik token çiftlerini bir kontrast denetleyicisinden geçirmeniz gerekir. Süreç aynı, sadece önceden akıl yürütmesi daha kolay.

OKLCH'nin gerçekten açtığı değişim

OKLCH bir trend değil. CSS'in insan gözünün rengi nasıl algıladığı etrafında tasarlanmış bir renk uzayını ilk kez yayına alması ve araçlar, birkaç odaklı günü buna ayırmaya istekli her ekip için geçişi bugün pratik kılacak kadar yetişti.

Şimdi geçen ekipler aynı anda üç şey kazanır: manuel ezmeler olmadan karanlık modda ayakta kalan bir palet, koordinat sistemiyle eşleşen kontrast davranışı ve gelecekte yeniden yazım gerektirmeden P3'e uzanan bir temel. Bekleyen ekipler ise blue-300'ün neden orange-300'den daha ağır göründüğü konusunda hâlâ aynı tartışmayı yapacak ve cevap hâlâ aynı olacak. Koordinat sistemi hiçbir zaman bu iş için tasarlanmadı.

Bu paletin üstüne tam token mimarisini kurmak istiyorsanız, Figma variables mimarisi yazısı semantik katmanı ele alıyor. Bu işin karanlık mod uygulaması için karanlık mod renk sistemleri bu yazının bittiği yerden devam ediyor.

Sizin için inşa edilmesini mi istiyorsunuz? Brainy'yi tutun.