Boussole chromatique OKLCH

Transformez une couleur en palette prête à l’emploi.

Tracez de vraies relations chromatiques sur une roue perceptuelle. La couleur source reste exacte, chaque couleur associée est adaptée honnêtement au sRGB et les données de contraste accompagnent la palette.

Géométrie actuelleComplémentaire

01 / Géométrie de l’harmonie

Choisissez la relation, pas une ambiance au hasard.

Chaque schéma fait tourner la même luminosité et le même chroma autour de l’axe de teinte OKLCH. La règle mathématique reste ainsi vérifiable et la première couleur conserve exactement la valeur saisie.

Complémentaire

La teinte de base et son opposée à 180° forment la séparation à deux points la plus forte.

01
#7C3AED
oklch(54.134% 0.24659 293.009)
Examiner ↗
02
#717600
oklch(54.134% 0.24659 113.009)Adaptée au sRGB
Examiner ↗

02 / Registre des contrastes

Vérifiez la paire avant de lui attribuer un rôle.

Les rapports avec le noir et le blanc sont calculés à partir de chaque valeur sRGB affichée. L’option la plus forte est indiquée, mais seul le contexte du composant détermine si elle convient.

CouleurTexte noirTexte blancPaire la plus forte

#7C3AED3,69:15,70:1#FFFFFF

#7176004,29:14,89:1#FFFFFF

Ces rapports concernent uniquement les paires opaques de texte et d’arrière-plan. Le texte, les contrôles, les bordures, les états et les repères de navigation au clavier doivent encore être vérifiés dans l’interface finale.

03 / Transmission au développement

Copiez la palette sans avoir à la retranscrire.

Des noms de propriétés personnalisées stables et des valeurs sRGB à six chiffres rendent le résultat prêt pour une feuille de style, un fichier de jetons ou un prototype rapide.

:root {
  --color-harmony-1: #7C3AED;
  --color-harmony-2: #717600;
}

04 / Méthode et limites

Un point de départ déterministe, pas une garantie de bon goût.

Rotation perceptuelle de la teinte

Les angles d’harmonie font tourner la teinte source en OKLCH tout en conservant sa luminosité et son chroma. La première couleur garde toujours exactement la valeur sRGB saisie.

Mise en gamut explicite

Une couleur OKLCH après rotation peut se trouver hors du sRGB. Hexees utilise sa mise en gamut issue de CSS Color 4 et signale chaque valeur adaptée au lieu d’écrêter silencieusement les canaux.

Le contraste dépend du rôle

L’harmonie ne garantit pas la lisibilité. Utilisez le tableau pour une première vérification du couple texte-fond, puis contrôlez le composant, la taille, l’état et les limites non textuelles réels.

Ouvrir le vérificateur de contraste →