Obracaj odcień i reguluj jasność w przestrzeni OKLCH, która jest jednolity pod względem percepcji — te same reguły harmonii, ale palety wyglądają po prostu lepiej niż w HSL. Każdy pochodny próbnik można dostosować niezależnie, z żywym kontrastem WCAG.
: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"
}
]Percepcyjnie jednolite harmonie z żywym kontrastem i mapowaniem gamut na każdym kroku.
Wpisz lub wylosuj HEX, następnie wybierz komplementarny, split-komplementarny, triadyczny, tetradyczny, analogiczny lub monochromatyczny.
Każda pochodna próbka ma suwaki L/C/H w przestrzeni OKLCH; wartości poza gamut mapują się na najbliższy wyświetlany kolor.
Obserwuj kontrast z bielą/czernią na żywo, kopiuj zmienne CSS lub JSON, lub wyślij cały zestaw na tablicę palet.
Trzy częste pytania o harmonie OKLCH.
Kontynuuj stąd i wykorzystaj kolory w praktyce.
Przeciągnij koło, aby wybrać bazę, otrzymaj na żywo sześć schematów harmonii, otwórz w tablicy lub eksportuj PNG.
Dostrajaj L / C / H w postrzegowo jednolitej przestrzeni OKLCH z podglądem na żywo i wynikami w formacie oklch() / HEX / RGB.
Podaj jeden kolor marki, a otrzymasz primary / secondary / success / warning / danger — eksportowane jako konfiguracja Tailwind i zmienne CSS.
Spacja do losowania, blokowanie, przeciąganie do zmiany kolejności, udostępnianie przez URL — wszystko, co powinna robić tablica palet.