OKLCH nedir ve HEX veya HSL yerine neden kullanmalıyım?

OKLCH (Parlaklık, Kroma, Ton), Oklab modeline dayalı algısal olarak tekdüze bir renk uzayıdır. HEX veya HSL'nin aksine, OKLCH'deki eşit sayısal değişiklikler eşit algılanan farklılıklar üretir. Bu, erişilebilir renk paletleri tasarlamak, pürüzsüz gradyanlar oluşturmak ve tutarlı Tailwind v4 renk ölçekleri üretmek için son derece idealdir; algısal öngörülebilirlik tasarımın merkezine taşınır.

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

HEX değerinizi (örn. #3b82f6) HEX giriş alanına yapıştırın; OKLCH alanı anında eşdeğer oklch(0.6 0.18 250) notasyonuyla güncellenir. Diğer tüm formatlar — OKLab, RGB ve HSL — da aynı anda senkronize olur, böylece tüm renk uzaylarındaki değerleri tek seferde karşılaştırabilirsiniz.

'sRGB gamut dışı' ne anlama gelir ve renge ne olur?

Bazı OKLCH renkleri — özellikle yüksek kroma değerleri — çoğu ekranın kullandığı sRGB renk uzayını aşar. Bu durumda araç, en yakın görüntülenebilir sRGB rengini bulmak için CSS Color 4 toGamut algoritmasını uygular. Orijinal gamut dışı değeri eşlenmiş sonucun yanında gösteren sarı bir uyarı bandı belirir ve tam şeffaflık sağlar.

Tailwind v4 OKLCH palet oluşturucu nasıl çalışır?

Oluşturucu, Tailwind v4'ün resmi parlaklık programını (50=0.971, 100=0.945, 950=0.238'e kadar) mevcut ton ve kromanıza uygular. Açıktan koyuya 11 renk adımı üretir ve bunları CSS'inizde değişiklik yapmadan yapıştırabileceğiniz @theme { --color-brand-50: oklch(...); } kod bloğu olarak dışa aktarır.

OKLCH enterpolasyonu gradyanlar için neden HSL'den daha iyi görünür?

HSL, insan algısıyla örtüşmeyen silindirik bir koordinat sistemi üzerinden enterpolasyon yapar ve bu durum genellikle bir gradyanın ortasında gri düşüşlere veya beklenmedik ton kaymalarına yol açar. OKLCH ise algısal olarak tekdüze Oklab uzayında enterpolasyon yapar; bu sayede parlaklık ve kroma beklenmedik renk tonlaması olmaksızın pürüzsüz geçiş yapar.

Bu OKLCH dönüştürücü ücretsiz ve gizli midir?

Evet. Araç tamamen ücretsizdir ve culori kütüphanesini kullanarak tamamen tarayıcınızda çalışır. Hiçbir renk değeri bir sunucuya yüklenmez; bu nedenle gizli veya hassas projeler için güvenle kullanabilirsiniz.

CSS Color 4 OKLCH tüm tarayıcılarda çalışır mı?

OKLCH renk sözdizimi (oklch()), 2023 itibarıyla Chrome 111+, Firefox 113+, Safari 15.4+ ve Edge 111+ dahil tüm modern tarayıcılarda desteklenmektedir. Eski tarayıcılar için bu dönüştürücünün sağladığı HEX veya RGB geri dönüş değerlerini kullanın; bu değerler eski ortamlarla tam uyumluluk sağlar.

Renk Araçları

OKLCH Renk Dönüştürücü – CSS Color 4, Tailwind v4 Palet Oluşturucu

OKLCH, OKLab, RGB, HSL ve HEX arasında canlı senkronizasyonlu ücretsiz OKLCH renk dönüştürücü. L/C/H/alfa kaydırıcılar, CSS Color 4 gamut eşleme ve Tailwind v4 palet dışa aktarımı içerir.

OKLCH (Parlaklık, Kroma, Ton), Oklab modeli üzerine inşa edilmiş ve CSS Color Level 4'te resmi olarak benimsenen algısal olarak tekdüze bir renk uzayıdır. RGB veya HSL'nin aksine OKLCH, algılanan parlaklığı tonlar arasında tutarlı tutar; bu da onu erişilebilir renk sistemleri, Tailwind v4 paletleri ve pürüzsüz gradyanlar için ideal kılar.

OKLCH Renk Dönüştürücü Nasıl Kullanılır

1
Bir renk değeri girin
Desteklenen herhangi bir formatta bir değer yazın veya yapıştırın: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) veya oklab(0.6 -0.056 -0.169). Araç, diğer tüm formatları anında senkronize eder.
2
L/C/H/Alfa kaydırıcılarla ince ayar yapın
Parlaklık (L), Kroma (C), Ton (H) veya Alfa kaydırıcılarını sürükleyin. Kroma kaydırıcısı, sRGB gamut sınır işaretçisini gösterir; böylece bir rengin standart ekran aralığını ne zaman aştığını her zaman bilirsiniz.
3
Görünürse gamut uyarısını kontrol edin
OKLCH renginiz sRGB gamutunun dışındaysa, orijinal değeri ve görüntü için kullanılan CSS Color 4 toGamut eşlemeli sonucu gösteren sarı bir uyarı bandı belirir.
4
Tailwind v4 paleti oluşturun
Tailwind v4 OKLCH palet bölümü, resmi Tailwind parlaklık programını takip ederek mevcut tonunuz için otomatik olarak 50-950 renk adımları oluşturur. @theme bloğunu doğrudan CSS'inize yapıştırmak için Kopyala'ya tıklayın.

Referanslar

W3C CSS Color Level 4 – oklch()
OKLCH renk notasyonunu ve gamut eşleme algoritmalarını tanımlayan W3C spesifikasyonu.
Culori – JavaScript Renk Kütüphanesi
Bu araçta OKLCH dönüşümünü, toGamut eşlemesini ve algısal enterpolasyonu destekleyen açık kaynaklı kütüphane.
Evil Martians – OKLCH in CSS: Why Quit RGB and HSL?
Modern renk çalışması için OKLCH'nin RGB ve HSL'ye göre avantajlarını açıklayan kapsamlı bir kılavuz.
Tailwind CSS v4 – Varsayılan Palet
Bu palet oluşturucuda kullanılan OKLCH parlaklık değerleri dahil Tailwind'in resmi renk paleti belgesi.

İlgili Araçlar

Renk Dönüştürücü

Çift yönlü canlı senkronizasyonla RGB, RGBA, HEX, HSL, HSV ve CMYK arasında dönüşüm yapın.

CSS Küçültücü

OKLCH renk değerlerinizi kullanan CSS'i küçültün.

SVG Görüntüleyici

OKLCH dolgu ve kontur değerlerini kullanan SVG grafiklerini önizleyin ve inceleyin.

Sıkça Sorulan Sorular

OKLCH nedir ve HEX veya HSL yerine neden kullanmalıyım?: OKLCH (Parlaklık, Kroma, Ton), Oklab modeline dayalı algısal olarak tekdüze bir renk uzayıdır. HEX veya HSL'nin aksine, OKLCH'deki eşit sayısal değişiklikler eşit algılanan farklılıklar üretir. Bu, erişilebilir renk paletleri tasarlamak, pürüzsüz gradyanlar oluşturmak ve tutarlı Tailwind v4 renk ölçekleri üretmek için son derece idealdir; algısal öngörülebilirlik tasarımın merkezine taşınır.
HEX'i OKLCH'ye nasıl dönüştürürüm?: HEX değerinizi (örn. #3b82f6) HEX giriş alanına yapıştırın; OKLCH alanı anında eşdeğer oklch(0.6 0.18 250) notasyonuyla güncellenir. Diğer tüm formatlar — OKLab, RGB ve HSL — da aynı anda senkronize olur, böylece tüm renk uzaylarındaki değerleri tek seferde karşılaştırabilirsiniz.
'sRGB gamut dışı' ne anlama gelir ve renge ne olur?: Bazı OKLCH renkleri — özellikle yüksek kroma değerleri — çoğu ekranın kullandığı sRGB renk uzayını aşar. Bu durumda araç, en yakın görüntülenebilir sRGB rengini bulmak için CSS Color 4 toGamut algoritmasını uygular. Orijinal gamut dışı değeri eşlenmiş sonucun yanında gösteren sarı bir uyarı bandı belirir ve tam şeffaflık sağlar.
Tailwind v4 OKLCH palet oluşturucu nasıl çalışır?: Oluşturucu, Tailwind v4'ün resmi parlaklık programını (50=0.971, 100=0.945, 950=0.238'e kadar) mevcut ton ve kromanıza uygular. Açıktan koyuya 11 renk adımı üretir ve bunları CSS'inizde değişiklik yapmadan yapıştırabileceğiniz @theme { --color-brand-50: oklch(...); } kod bloğu olarak dışa aktarır.
OKLCH enterpolasyonu gradyanlar için neden HSL'den daha iyi görünür?: HSL, insan algısıyla örtüşmeyen silindirik bir koordinat sistemi üzerinden enterpolasyon yapar ve bu durum genellikle bir gradyanın ortasında gri düşüşlere veya beklenmedik ton kaymalarına yol açar. OKLCH ise algısal olarak tekdüze Oklab uzayında enterpolasyon yapar; bu sayede parlaklık ve kroma beklenmedik renk tonlaması olmaksızın pürüzsüz geçiş yapar.
Bu OKLCH dönüştürücü ücretsiz ve gizli midir?: Evet. Araç tamamen ücretsizdir ve culori kütüphanesini kullanarak tamamen tarayıcınızda çalışır. Hiçbir renk değeri bir sunucuya yüklenmez; bu nedenle gizli veya hassas projeler için güvenle kullanabilirsiniz.
CSS Color 4 OKLCH tüm tarayıcılarda çalışır mı?: OKLCH renk sözdizimi (oklch()), 2023 itibarıyla Chrome 111+, Firefox 113+, Safari 15.4+ ve Edge 111+ dahil tüm modern tarayıcılarda desteklenmektedir. Eski tarayıcılar için bu dönüştürücünün sağladığı HEX veya RGB geri dönüş değerlerini kullanın; bu değerler eski ortamlarla tam uyumluluk sağlar.