Faites pivoter la teinte et ajustez la luminosité dans l'espace OKLCH perceptuellement uniforme — les mêmes règles d'harmonie, mais les palettes sont simplement plus belles qu'avec HSL. Chaque échantillon dérivé peut être ajusté indépendamment, avec un contraste WCAG en temps réel.
: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"
}
]Harmonies perceptuellement uniformes avec contraste en direct et mapping de gamme à chaque étape.
Saisissez ou générez aléatoirement un HEX, puis choisissez complémentaire, split-complémentaire, triadique, tétrade, analogue ou monochromatique.
Chaque échantillon dérivé dispose de curseurs L/C/H dans l’espace OKLCH ; les valeurs hors gamme sont mappées à la couleur affichable la plus proche.
Suivez en direct le contraste par rapport au blanc/noir, copiez les variables CSS ou JSON, ou envoyez l’ensemble vers la planche de palettes.
Trois questions courantes sur les harmonies OKLCH.
Poursuivez à partir d'ici et mettez les couleurs en œuvre.
Faites glisser le cercle pour choisir une couleur de base, obtenez six schémas d'harmonie en direct, ouvrez dans le tableau ou exportez en PNG.
Ajustez L / C / H dans l’espace OKLCH perceptuellement uniforme avec aperçu en direct et sortie oklch() / HEX / RGB.
Saisissez une couleur de marque, obtenez primaire / secondaire / succès / avertissement / danger — exporté en configuration Tailwind et variables CSS.
Barre d'espace pour aléatoriser, verrouiller, faire glisser pour réorganiser, partager par URL — tout ce qu'un tableau de palettes doit faire.