Générateur de palette de couleurs

Choisir le bon schéma

Structure pratique d’une palette

Une harmonie générée est un point de départ, pas un design system complet. Pour une UI en production, nommez les couleurs par rôle plutôt que par apparence : primary, secondary, accent, surface, border, text, success, warning et error. Ajoutez les gris neutres séparément, car ils demandent généralement un contrôle plus fin qu’un générateur basé sur la teinte.

Utilisez d’abord les couleurs HEX générées dans un prototype, puis conservez uniquement celles qui fonctionnent sur de vrais écrans, sur fonds clairs et foncés, ainsi que dans les états hover ou désactivés.

Export en variables CSS

L’étape d’export utilise de simples propriétés personnalisées :

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Renommez ces variables avec les noms de votre propre système lorsque vous les collez dans CSS, dans les tokens de thème Tailwind ou dans un fichier de design tokens.

HEX, RGB et HSL

L’entrée et la sortie visible utilisent HEX, car c’est le format le plus rapide à copier entre CSS, les outils de design et les commentaires de ticket. En interne, la couleur de base est convertie en HSL, la teinte ou la luminosité est déplacée, puis les résultats reviennent en HEX. Si vous avez besoin des mêmes couleurs en RGB ou HSL, convertissez les valeurs HEX générées avec un convertisseur de codes couleur.

Contraste et accessibilité

Les schémas d’harmonie ne garantissent pas l’accessibilité. Avant d’utiliser une paire pour du texte, des contrôles ou des graphiques, vérifiez-la avec un contrôleur de contraste :

• Texte normal sur son arrière-plan : minimum 4,5:1 pour WCAG AA.
• Grand texte : minimum 3:1.
• Éléments UI non textuels importants, comme bordures de boutons, icônes, indicateurs de focus et limites de graphiques : minimum 3:1 avec les couleurs adjacentes.

Ne vous fiez pas non plus à la teinte seule. Deux couleurs peuvent sembler différentes en nuancier et échouer sur du petit texte, des icônes fines ou des libellés d’état.

Conseils

• Commencez avec une couleur de base signifiante, par exemple une couleur de marque, de produit ou de campagne existante.
• Choisissez une couleur dominante et traitez les autres comme des couleurs de soutien. Un poids égal rend souvent l’interface trop dense.
• Baissez la saturation sur les grandes surfaces, comme les fonds d’application, les panneaux et les sections hero.
• Retestez après application du thème. Une palette qui fonctionne sur fond blanc peut échouer en mode sombre ou dans des graphiques chargés.