Gire a matiz e ajuste a luminosidade no espaço OKLCH perceptualmente uniforme — as mesmas regras de harmonia, mas as paletas simplesmente ficam melhores do que em HSL. Cada amostra derivada pode ser ajustada independentemente, com contraste WCAG em tempo real.
: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"
}
]Harmonias perceptualmente uniformes com contraste ao vivo e mapeamento de gamut em cada passo.
Digite ou aleatorize um HEX, depois escolha complementar, split-complementar, triádico, tetádico, análogo ou monocromático.
Cada amostra derivada tem controles deslizantes L/C/H no espaço OKLCH; valores fora do gamut são mapeados para a cor exibível mais próxima.
Veja o contraste ao vivo com branco/preto, copie variáveis CSS ou JSON, ou envie o conjunto inteiro para a pleta de paletas.
Três perguntas comuns sobre harmonias OKLCH.
Continue a partir daqui e coloque as cores para funcionar.
Arraste a roda para selecionar uma base, obtenha seis esquemas de harmonia em tempo real, abra no painel ou exporte como PNG.
Ajuste L / C / H no espaço OKLCH perceptualmente uniforme com visualização ao vivo e saída oklch() / HEX / RGB.
Insira uma cor de marca, obtenha primária / secundária / sucesso / aviso / perigo — exportada como configuração Tailwind e variáveis CSS.
Barra de espaço para aleatorizar, travar, arrastar para reordenar, compartilhar por URL — tudo o que um painel de paletas deve fazer.