Rotera nyans och steg ljusstyrka i det perceptuellt enhetliga OKLCH-utrymmet – samma harmoniregler, men paletterna ser helt enkelt bättre ut än HSL. Varje härledad färgprov kan justeras oberoende, med levande WCAG-kontrast.
: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"
}
]Perceptionsenhetliga harmonier med live-kontrast och gamutmappning vid varje steg.
Skriv eller slumpa en HEX, välj sedan komplementär, delad komplementär, triadisk, tetradisk, analog eller monokromatisk.
Varje härledd färgprov har L/C/H-reglage i OKLCH-rymden; värden utanför gamut mappas till närmaste synliga färg.
Se live-kontrast mot vit/svart, kopiera CSS-variabler eller JSON, eller skicka hela uppsättningen till palettpanelen.
Tre vanliga frågor om OKLCH-harmonier.
Fortsätt härifrån och använd färgerna i praktiken.
Dra i hjulet för att välja en bas, få sex harmoniska scheman live, öppna i panelen eller exportera PNG.
Justera L / C / H i det perceptuellt enhetliga OKLCH-utrymmet med liveförhandsvisning och utdata för oklch() / HEX / RGB.
Ange en märkesfärg, få primär / sekundär / framgång / varning / fara — exporteras som Tailwind-konfiguration och CSS-variabler.
Mellanslag för att slumpa, låsa, dra för att omordna, dela via URL – allt en palettpanel ska göra.