OKLCH rengi nedir

• OKLCH, insan görsel algısına uygun modern bir renk modelidir; renkler arasındaki parlaklık, doygunluk ve ton değişimlerinin eşit algılanmasını sağlayan algısal olarak eşit bir renk modeli özelliğine sahiptir
• Yapısı Lightness (açıklık/parlaklık), Chroma (doygunluk), Hue (renk tonu) bileşenlerinden oluşur ve mevcut modellere kıyasla tutarlı renk paletleri oluşturmayı mümkün kılar
• Aynı açıklık ve doygunluğu koruyup yalnızca Hue değerini değiştirerek eşit bir renk paleti üretilebildiği için UI tasarımında avantaj sağlar
• sRGB/HSL'ye kıyasla öngörülebilir ton farkları ve eşit gradyanlar sunar, ancak bazı durumlarda istenmeyen renkler oluşabilir
• Display-P3 gibi modern ekranlarda daha geniş renk gösterimi mümkün olur; modern tarayıcılarda CSS Color 4 ile desteklenir ve sRGB fallback işlemi de sunduğu için giderek bir web standardı haline gelmektedir

---

OKLCH renk modeline giriş

• OKLCH, algısal eşitlik (perceptually uniform) amacıyla geliştirilmiş modern bir renk modelidir
• Bu model, insanların rengi gerçekte algılama biçimine daha yakın çalıştığı için dijital tasarım ve frontend geliştirmede renklerle çalışmayı çok daha kolay hale getirir

Renk modeli temel kavramı

• Renk modeli, renkleri matematiksel olarak tanımlayan ve ifade eden bir sistemdir
• Yaygın model örnekleri: RGB, HSL, LCH, OKLCH, LAB, XYZ
• Her model, renkleri ifade etme ve işleme kolaylığını belirler

Renk gösterim yöntemleri örnekleri

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut (renk uzayı aralığı)

• Gamut, ilgili renk modelinin gösterebildiği toplam renk aralığı anlamına gelir
• Temel gamut örnekleri: sRGB (web varsayılanı), Display-P3 (modern cihaz desteği)
• Renk uzayı; gamut aralığının yanı sıra white point, transfer function gibi çeşitli özelliklere de sahiptir

OKLCH yapısı

OKLCH ve LCH, Lightness, Chroma, Hue olmak üzere üç değerden oluşur
OKLCH, OKLab renk uzayını temel alır

• Lightness (açıklık/parlaklık): 0~1 veya 0%~100% olarak ifade edilir, parlaklıkta eşit değişimi garanti eder
• Chroma (doygunluk): rengin yoğunluğunu ifade eder, HSL'deki Saturation (doygunluk) ile benzerdir
• Hue (renk tonu): rengi 0~360 derecelik açıyla ifade eder

OKLCH'nin avantajları ve kullanım alanları

• Tutarlı parlaklık

  • OKLCH'de aynı açıklık ve doygunluk değerleriyle yalnızca hue değiştirildiğinde, tüm renkler benzer parlaklıkta algılanır
  • Mevcut sRGB veya HSL'de renk türüne göre parlaklık ya da doygunluk tutarsız görünebilir
  • Bu nedenle OKLCH ile algısal olarak eşit renk paletleri üretmek kolaydır

• Öngörülebilir renk tonu kademeleri

  • OKLCH'de parlaklık değiştirildiğinde, hue (renk tonu) veya chroma (doygunluk) değişmeden çeşitli renk kademeleri üretilebilir
  • HSL gibi modellerde parlaklık değiştiğinde ton kayması (drift) görülebilir
  • OKLCH, yalnızca parlaklığı ayarlayarak tutarlı renk tonu kademeleri oluşturmayı mümkün kılar

• Gradyan işleme yöntemi

  • sRGB'de kırmızı, yeşil ve mavi değerleri arasında enterpolasyon yapıldığı için orta noktalar kirli görünebilir veya parlaklık değişimi çok sert olabilir
  • OKLCH, Lightness, Chroma, Hue eksenleri boyunca enterpolasyon yaparak daha doğal gradyanlar üretmeyi sağlar
  • Ancak Hue değeri dairesel bir yapıya sahip olduğu için beklenmeyen renk sapmaları oluşabilir
  • Bunu önlemek için OKLab'de doğrusal enterpolasyon (interpolation) uygulanarak daha öngörülebilir sonuçlar elde edilebilir

Renk uzayı desteği

• sRGB, modern ekranların gösterebildiği geniş renk uzayının bir kısmını karşılayamaz
• OKLCH kullanıldığında Display-P3 gibi geniş renk alanını destekleyen cihazlarda daha canlı renkler göstermek mümkündür
• Yalnızca sRGB destekleyen cihazlarda ise olabildiğince benzer renklere eşlenir

Maksimum Chroma (doygunluk) değeri

• OKLCH, ekranın gerçekte gösterebildiği aralığın dışındaki renkleri de matematiksel olarak tanımlayabilir
• Örneğin oklch(0.7 0.4 40) gibi çok büyük bir chroma değeri gerçekte görüntülenemez ve en yakın renge kırpılır
• Maksimum chroma kavramını anlamak ve ton, parlaklık, seçilen renk uzayına (sRGB, Display-P3) göre uygun değerler belirlemek önemlidir

Tarayıcı desteği ve fallback

• OKLCH renkleri CSS Color Module Level 4 ile tanıtılmıştır ve modern tarayıcıların çoğunda desteklenir
• Eski tarayıcılarda desteklenmeyebileceği için @supports CSS yönergesiyle fallback değerleri tanımlanabilir

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• Desteklenen tarayıcılarda OKLCH, desteklenmeyenlerde ise sRGB (hex) renkleri uygulanır

oklch.fyi aracı

• oklch.fyi, OKLCH renk paleti oluşturma ve CSS değişkeni dönüştürme gibi OKLCH ile ilgili işlevler sunan bir web aracıdır
• Tasarım sistemleri ve tema geliştirme gibi alanlarda OKLCH renklerini kullanmayı kolaylaştırır