HEX'ten OKLCH'ye Dönüştürücü

HEX'ten OKLCH'ye Dönüştürücü Nedir?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Temel Özellikler

HEX'ten OKLCH'ye Dönüştürücü Alternatifleri

HEX'ten OKLCH'ye Örnekleri

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Yaygın HEX → OKLCH Dönüşümleri (Tailwind v4)

HEX ve OKLCH eşdeğerleriyle birlikte 10 popüler Tailwind v4 varsayılan-palet orta tonunun referans tablosu. Değerler Tailwind v4'ün yayımlanan palet hassasiyetiyle eşleşir (L ve C'de üç ondalık, H'de tamsayı veya bir ondalık).

HEX'ten OKLCH'ye Dönüştürücü Nasıl Kullanılır

1. 1

   HEX alanına bir hex kodu yapıştırın

   Herhangi bir hex değerini HEX girdisine bırakın — baştaki `#` ile veya `#` olmadan, 3 haneli kısa biçimde (`#F73`), 6 haneli tam biçimde (`#3b82f6`), 4 haneli alpha kısa biçimde (`#F738`) veya 8 haneli alpha tam biçimde (`#FF573380`). Ayrıştırıcı, beş girdi şeklinin tümünü OKLCH'yi türetmeden önce aynı dahili renge normalleştirir. Büyük/küçük harf önemli değildir (`#3b82f6` ve `#3B82F6` aynı şekilde ayrıştırılır). Geçersiz karakterler veya yanlış hane sayıları sessiz bir satır içi hata üretir; geçerli hex, OKLCH dahil diğer her biçim alanını gerçek zamanlı olarak günceller.

2. 2

   OKLCH üçlüsünü OKLCH alanından okuyun

   OKLCH alanı, değeri CSS Color 4'ün modern biçiminde yüzeyleştirir: opak bir renk için `oklch(0.629 0.193 263.4)`, alpha taşıyan bir renk için `oklch(0.629 0.193 263.4 / 0.5)`. L üç ondalığa yuvarlanır (Tailwind v4'ün yayımlanan hassasiyetiyle eşleşir), C üç ondalığa, H bir ondalık dereceye. Aracın dahili OKLCH kaynak-doğru yaklaşımı, temel float hassasiyetinin diğer her alanda korunduğu anlamına gelir — hex'e gidiş-dönüşler bit-kararlı kalır; bu, HSL üzerinden döndüren eski dönüştürücülerin sapma yaptığı bir şey değil.

3. 3

   OKLCH dizgesini almak için Kopyala'ya tıklayın

   Her biçim kartının sağında bir Kopyala düğmesi vardır. Tek tık ve değer panonuza iner — düğme etiketi kısaca "Kopyalandı!" olarak değişir, böylece bilirsiniz. Kopyalanan dizge kanonik CSS Color 4 sözdizimidir (`oklch(0.629 0.193 263.4)`), bir Tailwind v4 `@theme` bloğuna veya bir shadcn/ui CSS-değişken tanımına bırakmaya hazırdır. Platforma özgü çıktı (CSS özel özelliği, Tailwind v4 token, SwiftUI, Compose, Flutter) için seçicinin altındaki Kod olarak kopyala bölümünü kullanın — bu parçacıklar her platformun yerel olarak beklediği biçimi yayar.

4. 4

   Display P3 / Rec.2020 renk gamı rozetlerini kontrol edin

   Üç renk gamı rozeti (sRGB, Display P3, Rec.2020), geçerli rengin her uzayın yeniden üretilebilir aralığının içine düşüp düşmediğini gösterir. sRGB rozeti kırmızıya dönerse ancak P3 yeşilse, renk Apple donanımında (2017+ iPhone, iPad, MacBook) doygun olarak işlenecek ancak eski 24-bit bir monitörde doygunluğu azaltılacak geniş renk gamlı bir OKLCH'dir. **sRGB'ye Hizala** düğmesi, L ve H'yi korurken rengi sRGB'ye küçültmek için ikili chroma azaltmayı (CSS Color 4 §13 bilgilendirici algoritma) kullanır ve `@supports not (color: oklch(0 0 0))` aracılığıyla gönderebileceğiniz bir hex geri dönüşü üretir.

5. 5

   Ayrıca görünür: RGB, HSL, OKLAB, HSV, HWB, CMYK, adlandırılmış renk

   Yapıştırdığınız aynı hex, diğer sekiz biçim alanını da aydınlatır — canvas çağrıları ve donanım için RGB, eski CSS değişkenleri için HSL, palet matematiği ve renk körlüğü matrisleri için OKLAB, tasarımcı renk seçici iş akışları için HSV ve HWB, baskı tahminleri için CMYK ve belgelendirme düz yazısı için en yakın CSS adlandırılmış rengi. Yalnızca hex → OKLCH ile sınırlı değilsiniz. Seçici (SL karesi + renk tonu kaydırıcısı + alpha kaydırıcısı) dokuzunu da eşzamanlı olarak sürer ve Chromium tarayıcılarda Damlalık düğmesi, tarayıcının dışı dahil ekranın herhangi bir pikselini örnekler.

Yaygın HEX / OKLCH Hataları

"%30 doygunluk" bekleyerek OKLCH C = 0.3 ayarlayın:
oklch(0.7 0.3 250) → maviler için sRGB renk gamını aşabilir
Geniş renk gamı rengi eski ekranlarda doygunluğu azaltılmış olarak işlenir.

C'yi mutlak chroma olarak ele alın, renk gamı rozetlerini kontrol edin:
oklch(0.7 0.15 250) → bu L+H çifti için rahatlıkla sRGB içinde
Hedef renk gamına sığan maks C'yi bulmak için rozetleri kullanın.

HSL L yüzdelerini doğrudan OKLCH'ye kopyalayın:
hsl(220 50% 30%), oklch(0.30 0.10 220) olarak taşındı
İki renk parlaklıkta belirgin biçimde farklı görünür.

OKLCH'yi orijinal hex'ten yeniden türetin, HSL'yi taşımayın:
hex kaynağı → OKLCH dönüşümü → oklch(0.34 0.08 254)
Algısal L doğru kalır; palet eşit hisseder.

sRGB renk gamını kontrol etmeden oklch(0.7 0.4 30) gönderin:
P3 ekranlar doygun kırmızı işler; sRGB ekranlar doygunluğu azaltılmış işler
Marka rengi kullanıcı donanımı arasında tutarsız görünür.

sRGB renk gamı rozetini kontrol edin, gerekirse sRGB'ye Hizala, @supports ile katmanlayın:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 donanımı geniş renk gamı değerini alır; sRGB donanımı hizalanan geri dönüşü alır.

Marka rengini yalnızca OKLCH'de tanımlayın:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 ve eski iOS Safari hiç renk işlemez.

Zarif geri dönüş için @supports ile katmanlayın:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Modern tarayıcılar OKLCH alır; eski tarayıcılar hex geri dönüşünü alır.

Aynı sonucu bekleyerek lch()'yi oklch() yerine kullanın:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — tamamen farklı renkler
Uzaylar arasında kopya-yapıştır yapıldığında değer sessizce yanlıştır.

Bir uzay seçin ve onda kalın:
modern tasarım sistemleri için oklch(0.629 0.193 263.4)
veya lch(60% 50 240) — ancak yeniden dönüştürmeden işlev adlarını değiştirmeyin

HEX'ten OKLCH'ye Kimler Kullanır

Tailwind v4 OKLCH Token'larına Geçen Ön Uç Geliştiriciler

Tailwind v4, Ocak 2025'te varsayılan paleti için OKLCH'yi standartlaştırdı. Hex tabanlı marka renkleri olan bir v3 kod tabanını geçirmek, her hex'i OKLCH'ye dönüştürmek ve sonucu yeni `@theme` bloğuna bırakmak anlamına gelir. Her hex'i buraya yapıştırın, `oklch()` değerini kopyalayın, `--color-primary: oklch(0.629 0.193 263.4)` ve arkadaşlarını tanımlayın. Canlı renk gamı rozetleri sRGB'yi aşan renkleri işaretler, böylece Display P3 kullanıcıları için geniş renk gamlı değeri tutup tutmayacağınıza veya sRGB'ye hizalayıp hizalamayacağınıza karar verebilirsiniz.

Özel Paletler Oluşturan shadcn/ui Tema Yazarları

shadcn/ui'nin CSS-değişken teması her token için OKLCH kullanır (`--background`, `--foreground`, `--primary`, vb.). Özel temalar, OKLCH'ye dönüştürerek ve ardından açık/koyu varyantlar için L'yi süpürerek bir temel marka hex'inden türetilir. Marka hex'ini yapıştırın, OKLCH üçlüsünü okuyun, C ve H'yi sabit tutarken L'yi adımlayarak temanın geri kalanını oluşturun. Kanonik shadcn iş akışıyla tam olarak eşleşir.

Algısal Olarak Eşit Rampalar Oluşturan Tasarım Sistemi Yazarları

C ve H sabit tutulurken L kanalını eşit OKLCH artışlarıyla adımlayarak bir 50/100/200/.../900 rampası oluşturun. Bitişik duraklar arasındaki görsel boşluk her renk tonunda özdeş görünür — bir marka rengi paletinin gerçekten ihtiyaç duyduğu şey. Tailwind v4 varsayılan paleti için tam olarak bu yapıyı kullanır ve shadcn/ui bunu yansıtır. Her marka hex'ini yapıştırın, OKLCH'yi okuyun, rampayı algoritmik olarak veya seçicinin altındaki Açık Tonlar/Koyu Tonlar/Gri Tonlar panelinden oluşturun.

OKLCH Uzayında Kontrastı Doğrulayan Erişilebilirlik Mühendisleri

WCAG 2.1 ve APCA kontrastı, OKLCH üçlüsüne değil çözülmüş sRGB rengine karşı bildirir — ancak bir marka renginin OKLCH L'sini bilmek kontrast ayarını öngörülebilir kılar: beyaza karşı AA'yı temizlemek için L'yi 0.1 artırın, siyaha karşı AA'yı temizlemek için L'yi 0.1 düşürün. Eşzamanlı OKLCH + WCAG + APCA görünümü ilişkiyi görünür kılar. Marka hex'ini yapıştırın, kontrast rozetlerini izleyin, çift her iki metriği de geçene kadar OKLCH'de L'yi ayarlayın (HSL'den daha öngörülebilir).

Modern Ekranlar için Geniş Renk Gamlı Renk Token'ları Oluşturan Web Geliştiricileri

2017'den beri çoğu Apple cihazı (ve birçok modern Android cihazı) Display P3'ü yerel olarak işler. Marka aksan renklerini OKLCH'de tanımlamak, hiçbir hex kodunun kodlayamayacağı yalnızca P3'e özgü doygun kırmızıları ve yeşilleri adreslemenize olanak tanır. Mevcut bir hex'i yapıştırın, OKLCH'sini okuyun, ardından ekstra P3 doygunluğunu talep etmek için C kanalını sRGB tavanının üzerine itin. Renk gamı rozetleri, yeni değerin P3'e sığdığını doğrular (ve tarayıcı chroma sıkıştırması aracılığıyla yalnızca sRGB ekranlarda zarif biçimde geri döner).

Algısal-vs-Geometrik Açıklığı Öğreten Eğitmenler

Eşzamanlı OKLCH + HSL görünümü, algısal ve geometrik açıklık arasındaki farkı belirgin hale getirir. Aynı HSL L=%50'de doygun bir yeşil ve doygun bir mavi yapıştırın; OKLCH L değerleri belirgin biçimde farklılaşır çünkü OKLCH gerçek algılanan parlaklığı ölçer. HSL renk tonu kaydırıcısını sürükleyin ve HSL L'yi sabit tutarken OKLCH L'sinin sallandığını izleyin — eğri, görselleştirilmiş gamma tuhaflığıdır. Tasarım sistemlerinin neden OKLCH'ye geçtiğine dair sınıfa hazır bir gösterim.

Token Belgelerini Modernleştiren Açık Kaynak Bakımcıları

Eski tasarım sistemi belgeleri tipik olarak marka renklerini yalnızca hex kod olarak listeler. OKLCH'ye modernleştirmek, aynı rengi her iki uzayda da göstermek anlamına gelir — kod-bloğu uyumluluğu için hex, spesifikasyon tablosu ve modern token tanımı için OKLCH. Her hex'i yapıştırın, OKLCH çıktısını kopyalayın, belgeleri güncelleyin. Paylaşılabilir URL hash'i ayrıca katkıda bulunanların bir GitHub sorunundaki tartışmadaki tam renge belirsizlik olmadan bağlantı vermelerine olanak tanır.

HEX'ten OKLCH'ye Matematik ve Boru Hattı

HEX → OKLCH 7 Adımlı Bir Boru Hattıdır

Dönüşüm, beş ara temsil arasında yönlendirilir: hex → tamsayı sRGB → normalleştirilmiş sRGB (0-1) → doğrusal-sRGB (gamma-çözülmüş) → CIE XYZ D65 → OKLAB → OKLCH. Her adım birincil bir kaynaktan iyi tanımlanmış bir matris veya parçalı işlevdir. Araç tam boru hattını her tuş vuruşunda çalıştırır; matematik debounce gerekmeyecek kadar hızlıdır (mikrosaniyeler). Ara RGB demetinin OKLCH'nin yanında yüzeylenmesi, RGB kanallarını inceleyerek beklenmeyen bir OKLCH değerini ayıklayabileceğiniz anlamına gelir.

CSS Color 4 §11.2 Gamma İşlevi

sRGB → doğrusal-sRGB dönüşümü, CSS Color 4 §11.2 parçalı işlevini kullanır: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. Parçalı biçim (sıfır yakınında küçük bir doğrusal segmentle), çok koyu renklerde saf üs biçiminin sayısal istikrarsızlığını önler. Bu, ICC profillerinin sRGB'yi kodlamak için kullandığı aynı işlevdir ve tarayıcıların hex kodlarını işlerken dahili olarak kullandığı aynı işlevdir. OKLCH → hex tersi, aynı işlevi tersine uygular: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

CSS Color 4 §15.1 Matrisi: doğrusal-sRGB ↔ XYZ D65

CSS Color 4 §15.1'den matris, doğrusal-sRGB'yi D65 beyaz noktası altında CIE XYZ'ye dönüştürür: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. Y satırı sRGB parlaklık formülünü verir. Matris, ICC, Adobe Color Engine ve LCMS açık kaynak boru hattı dahil her renk yönetimi kütüphanesinde kullanılan aynı matristir. OKLCH → hex için ters matris §15.1 tersini uygular.

Ottosson 2020 OKLAB Matrisleri ve Küp Kökü Adımı

XYZ D65 → OKLAB dönüşümü, Björn Ottosson'un 2020 OKLAB makalesinde yayımlanan iki matrisi ve bir küp kökü adımını kullanır. Birinci matris XYZ'yi bir LMS koni-yanıt uzayına (insan L/M/S koni duyarlılıklarına gevşek biçimde modellenmiş) dönüştürür. Dinamik aralığı doğrusal olmayan şekilde sıkıştırmak için her kanalın küp kökünü alın (algısal-tekdüzelik-düzeltme adımı). İkinci matris küp-köklü LMS'yi OKLAB'ın L/a/b koordinatlarına dönüştürür. Her üç işlem de makalenin referans uygulamasında yayımlanan tam değerleri kullanır; yeniden türetme veya yuvarlama yoktur. OKLCH → hex tersi bu matrisleri tersine uygular.

OKLAB ↔ OKLCH Kartezyen-Kutupsaldır

OKLAB'ın `a` ve `b` eksenleri L eksenine dik bir chroma düzlemi oluşturur. OKLCH bu düzlemi kutupsal olarak kodlar: `C = sqrt(a² + b²)` (griden Öklid mesafesi), `H = atan2(b, a) * 180 / π` (derece cinsinden açı, 0-360°'ye sarılır). Tersi: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. Tasarım-token depolama için kutupsal biçim OKLAB'a tercih edilir çünkü Hue kararlı bir eksendir — Hue'yu döndürmek, OKLAB'da `a` veya `b`'yi döndürmenin yapabileceği gibi yanlışlıkla gri üzerinden çapraz geçiş yapmaz.

Kanal Aralığı Kontrolü ile Renk Gamı Algılama

Bir renk, o uzayın birincil renklerine dönüştürüldükten sonra her kanal `[-ε, 1 + ε]` içine düşerse hedef uzay (sRGB, Display P3, Rec.2020) için renk gamı içinde sayılır; burada `ε = 1e-7` sınırlar etrafındaki float hassasiyet gürültüsünü emmek içindir. Her uzayın renk gamı rozeti, herhangi bir kanal aralığı aştığında kırmızıya döner. OKLCH renk gamı açısından sınırsızdır — `oklch(0.7 0.4 30)` geçerli bir koordinattır ancak sRGB'nin kanal başına 256 bayt uzayını aşabilir. Kontrol her tuş vuruşunda çalışır; sRGB'ye Hizala ile birlikte bu, en yaygın benimseme tuzağını (geniş renk gamlı OKLCH'nin eski ekranlarda doğru görüntülenmemesi) yakalar.

sRGB'ye Hizala İkili Chroma Azaltma

sRGB'ye Hizala, CSS Color 4 §13'teki bilgilendirici renk gamı eşleme algoritmasıyla eşleşir: L ve H'yi mevcut değerlerde sabit tutun, sRGB dönüşümü renk gamında kalan en büyük C için C ∈ [0, mevcutC] üzerinde ikili arama yapın. Arama en fazla 30 yineleme çalışır (hassasiyet ~10⁻⁹), bu da görsel doğruluk için fazlasıyla yeterlidir. L ve H'yi korumak, hizalanan rengin aynı parlaklıkta aynı renk tonu ailesi olarak okunması anlamına gelir — yalnızca doygunluğunu kaybeder. RGB kanallarını doğrudan kırpmayız çünkü bu renk tonunu belirgin biçimde bozar (özellikle moruya doğru kırpılan mavilerde).

HEX / OKLCH İş Akışları için En İyi Uygulamalar

Yeni Kodda OKLCH'yi Kanonik Token Biçimi Olarak Kullanın

2025 veya sonrasında gönderilen herhangi bir tasarım sistemi için marka renklerini ve palet rampalarını OKLCH'de tanımlayın. L ekseni otomatik olarak algısal olarak eşit rampalar verir; Chroma ekseni hex'in kodlayamayacağı geniş renk gamlı renkleri adresleyebilir. Eski tarayıcılar için `@supports not (color: oklch(0 0 0))` veya derleme zamanı PostCSS aracılığıyla bir hex geri dönüşü tutun, ancak OKLCH'yi token deponuzda kaynak-doğru yapın. Tailwind v4 ve shadcn/ui her ikisi de bu şekilde gönderir; yeni projeler hiçbir sürtüşme olmadan örneklerini izleyebilir.

L'yi Adımlayarak Rampalar Oluşturun, C ve H'yi Sabit Tutun

Kanonik OKLCH rampa yapısı: C ve H'yi kilitleyin, L'yi eşit artışlarla süpürün. L = 0.1, 0.2, …, 0.9 için 9 adımlı bir rampa `oklch(L 0.15 263)`, her adımda görsel olarak eşit aralıklar üretir. Tailwind v4'ün dahili olarak yaptığı tam olarak budur. Rampanın kromatik yoğunluğunun kasıtlı olarak değişmesini istemiyorsanız (nadir) C'yi L ile birlikte süpürmeyin. H'yi adımlar arasında kaydırmayın — 5°'lik bir kayma bile rampanın karmaşık hissetmesine neden olur.

Tailwind v4'ün Hassasiyetiyle Eşleşin: 3 Ondalık L+C, 1 Ondalık H

Tailwind v4'ün varsayılan paleti, OKLCH değerlerini L ve C'de üç ondalık basamak ve H'de bir ondalık basamakla yayımlar — blue-500 için `oklch(0.629 0.193 263.4)`. Kendi token'larınızda bu hassasiyetle eşleşmek, yapılandırmaya yapıştırma iş akışlarının Tailwind'in gönderdiği değerlerle özdeş değerler üretmesi ve fark araçlarının sahte farkları işaretlememesi anlamına gelir. Aracın varsayılan yuvarlaması bu kuralı izler; bir `@theme` bloğuna kopyala-yapıştır bit-tamdır.

Geniş Renk Gamlı OKLCH'yi Display P3 Renk Gamı Kontrolünden Geçirin

Modern Apple donanımını (2017+ iPhone, iPad, MacBook) hedefliyorsanız veya HDR farkında içerik gönderiyorsanız, renk gamı rozetleri, ekstra P3 doygunluğunu talep etmek için C'yi sRGB tavanının üzerine itmenize olanak tanır. Tarayıcı tarafından uygulanan chroma sıkıştırma, rengin yalnızca sRGB ekranlarda kırpılmasını engeller. Tüm hedef kitlenizin eski ekranlarda olduğunu bilmiyorsanız varsayılan olarak sRGB'ye önceden hizalamayın — bu, P3 donanımının işleyebileceği doygunluğun %30+'ını kaybeder.

2023 Öncesi Tarayıcılar için @supports Aracılığıyla Hex Geri Dönüşü Sağlayın

`oklch()` için yaşayan tarayıcı desteği şu anda %94+ olsa da, uzun kuyruk (IE 11, eski Android Chrome, gömülü webview'lar) hâlâ bir geri dönüşe ihtiyaç duyar. Token'ları `@supports (color: oklch(0 0 0))` içine sarın ve alternatif dalda bir hex varyantı sağlayın. sRGB'ye Hizala çıktısı tam olarak o geri dönüştür — mevcut OKLCH üçlüsünden L ve H korunarak otomatik olarak üretilir. `postcss-oklab-function` gibi derleme zamanı PostCSS eklentileri de derleme zamanında sRGB yaklaşımını satır içi yerleştirebilir.

Token'larınızda Hem OKLCH'yi Hem de Kaynak Hex'i Belgeleyin

`--color-primary: oklch(0.629 0.193 263.4)` gibi bir CSS değişkeni gönderdiğinizde, kaynak hex'i içeren bir yorum ekleyin: `/* kaynak: #3b82f6 (Tailwind blue-500) */`. Altı ay sonra, birisinin ilgili bir koyu ton türetmesi veya değeri bir marka kılavuzu PDF'ine karşı kontrol etmesi gerektiğinde, kaynak hex tam köken izini korur. OKLCH tek başına anlamlıdır ancak gözle tanınması daha zordur; kaynak hex, çoğu takım arkadaşının önce arayacağı tanımlayıcıdır.

Canlı Renk Kararlarını Paylaşmak için URL Hash'ini Kullanın

Her renk değişikliği URL hash'ini otomatik olarak `#hex=3b82f6` veya `#oklch=...` olarak günceller. URL'yi bir Slack iş parçacığına veya GitHub sorununa kopyalayın ve onu açan herkes aynı OKLCH üçlüsüyle aynı renge düşer. Bu, sohbette bir OKLCH dizgesi yapıştırmaktan daha güvenilirdir — alıcılar bazen ondalıklarda yazım hatası yapar veya yanlış hassasiyeti sarar — ve bir tasarım inceleme iş parçacığının "Salı günü tartıştığımız marka mavisi" yerine tam bir renge başvurmasına olanak tanır. Hash sunucuya asla iletilmez.

Sıkça Sorulan Sorular