OKLCH Uyumlandırma Çalışma Alanı

Ton döndürme ve parlaklığı algısal olarak tekdüze OKLCH alanında adımla — aynı uyum kuralları, ancak paletler HSL'den daha iyi görünüyor. Türetilen her renk örneği, canlı WCAG kontrastı ile bağımsız olarak ayarlanabilir.

#2b9d8f

Temelbeyaza karşı 3.3 · siyah karşı 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°beyaza karşı 3.6 · siyah karşı 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°beyaza karşı 3.6 · siyah karşı 5.9

L · 63%C · 0.101H · 63°

Dışa aktar

Panoda aç

:root {
  --harmony-1: #2b9d8f;
  --harmony-2: #957abc;
  --harmony-3: #b47b44;
}

[
  {
    "hex": "#2b9d8f",
    "oklch": "oklch(63.0% 0.101 183.0)",
    "role": "base"
  },
  {
    "hex": "#957abc",
    "oklch": "oklch(63.0% 0.101 303.0)",
    "role": "harmony-2"
  },
  {
    "hex": "#b47b44",
    "oklch": "oklch(63.0% 0.101 63.0)",
    "role": "harmony-3"
  }
]

OKLCH uyumlarını üç adımda oluşturun

Her adımda canlı kontrast ve gamut eşleme ile algısal olarak tekdüze uyumlar.

01
Temel & kural
Bir HEX yazın veya rastgele oluşturun, ardından tamamlayıcı, bölünmüş tamamlayıcı, üçlü, dörtlü, analojik veya tek renk tonu seçin.
02
İnce ayar
Türetilen her renk örneğinin OKLCH uzayında L/C/H kaydırıcıları vardır; gamut dışı değerler en yakın görüntülenebilir renge eşlenir.
03
Dışa aktar
Beyaza/siyahla canlı kontrastı izleyin, CSS değişkenlerini veya JSON'u kopyalayın veya tüm seti palet panosuna gönderin.

Harmonizer SSS

OKLCH uyumları hakkında üç yaygın soru.

OKLCH uyumu, tekerlek tabanlı uyumdan nasıl farklıdır?: HSL'de "eşit açıklık" algısal olarak eşit değildir — döndürülen sarılar parlar ve maviler solar. OKLCH algısal olarak düzgündür, bu nedenle renk tonu döndürme açıklığı ve renk doygunluğunu gerçekten korur, doğal olarak dengeli paletler üretir.
Bir kaydırıcı ekran gamutunun dışına çıkarsa ne olur?: OKLCH alanı sRGB'den daha büyüktür. Gamut dışı değerler otomatik olarak en yakın görüntülenebilir renge eşlenir, bu nedenle gördüğünüz hex kullanabileceğiniz hex'tir.
Sonucu projemde nasıl kullanırım?: Dışa aktarma alanından :root CSS değişkenlerini veya JSON'u kopyalayın veya palet panosundaki seti kilitlemek, yeniden oluşturmak ve PNG/ASE ve daha fazlasını dışa aktarmak için açın.

Sonucu aldıktan sonra

Buradan devam edin ve renkleri işinize koyun.

Renk Tekerleği

Bir temel seçmek için tekerleği sürükleyin, canlı olarak altı uyum şeması alın, panelde açın veya PNG olarak dışa aktarın.

OKLCH Editörü

Canlı önizleme ve oklch() / HEX / RGB çıktısı ile algısal olarak tekdüze OKLCH alanında L / C / H ayarlayın.

Anlamsal UI Paleti

Bir marka rengi girin, birincil / ikincil / başarı / uyarı / tehlike elde edin — Tailwind yapılandırması ve CSS değişkenleri olarak dışa aktarılır.

Palet Paneli

Rastgeleleştirmek için boşluk tuşu, kilitlemek, yeniden sıralamak için sürüklemek, URL ile paylaşmak — bir palet panelinin yapması gereken her şey.

[ { "hex": "#2b9d8f", "oklch": "oklch(63.0% 0.101 183.0)", "role": "base" }, { "hex": "#957abc", "oklch": "oklch(63.0% 0.101 303.0)", "role": "harmony-2" }, { "hex": "#b47b44", "oklch": "oklch(63.0% 0.101 63.0)", "role": "harmony-3" } ]

OKLCH uyumlarını üç adımda oluşturun

Her adımda canlı kontrast ve gamut eşleme ile algısal olarak tekdüze uyumlar.

Temel & kural

Bir HEX yazın veya rastgele oluşturun, ardından tamamlayıcı, bölünmüş tamamlayıcı, üçlü, dörtlü, analojik veya tek renk tonu seçin.

İnce ayar

Türetilen her renk örneğinin OKLCH uzayında L/C/H kaydırıcıları vardır; gamut dışı değerler en yakın görüntülenebilir renge eşlenir.

Dışa aktar

Beyaza/siyahla canlı kontrastı izleyin, CSS değişkenlerini veya JSON'u kopyalayın veya tüm seti palet panosuna gönderin.

Harmonizer SSS

OKLCH uyumları hakkında üç yaygın soru.

OKLCH uyumu, tekerlek tabanlı uyumdan nasıl farklıdır?

HSL'de "eşit açıklık" algısal olarak eşit değildir — döndürülen sarılar parlar ve maviler solar. OKLCH algısal olarak düzgündür, bu nedenle renk tonu döndürme açıklığı ve renk doygunluğunu gerçekten korur, doğal olarak dengeli paletler üretir.

Bir kaydırıcı ekran gamutunun dışına çıkarsa ne olur?

OKLCH alanı sRGB'den daha büyüktür. Gamut dışı değerler otomatik olarak en yakın görüntülenebilir renge eşlenir, bu nedenle gördüğünüz hex kullanabileceğiniz hex'tir.

Sonucu projemde nasıl kullanırım?

Dışa aktarma alanından :root CSS değişkenlerini veya JSON'u kopyalayın veya palet panosundaki seti kilitlemek, yeniden oluşturmak ve PNG/ASE ve daha fazlasını dışa aktarmak için açın.