Quatre harmonies à partir d'une seule couleur de base
Choisissez une couleur et le générateur de palettes calcule pour elle les quatre harmonies classiques du cercle chromatique : complémentaire, analogue, triadique et complémentaire divisée. Chacune s'affiche en une rangée de pastilles à copier d'un clic, et l'ensemble peut être exporté d'un coup. Les calculs s'exécutent dans votre navigateur, donc le résultat se met à jour instantanément quand vous changez la couleur de base, et celle-ci est inscrite dans l'URL pour partager ou mettre en favori n'importe quelle palette.
Comment l'utiliser
- Choisissez une couleur de base avec le sélecteur ou saisissez un code hex comme
#FF5722. Les valeurs RGB et HSL s'affichent en dessous. - Parcourez les quatre palettes. Cliquez sur une pastille pour copier son code hex.
- Appuyez sur Tout exporter pour copier toutes les harmonies en propriétés personnalisées CSS, config Tailwind, variables SCSS et JSON en un seul bloc.
- Appuyez sur Partager pour copier un lien qui ouvre le générateur avec la même couleur de base.
Quelle harmonie choisir ?
- Complémentaire (deux couleurs à 180° l'une de l'autre) donne le contraste le plus fort. Idéale pour un bouton principal sur un fond aux couleurs de la marque.
- Analogue (couleurs voisines sur le cercle) paraît calme et cohérente. Elle convient aux tableaux de bord, aux applications de lecture et à la plupart des interfaces.
- Triadique (trois couleurs à 120° d'écart) est vive et équilibrée. Parfaite pour les illustrations, les graphiques et les produits pour enfants.
- Complémentaire divisée garde le punch de la complémentaire tout en étant plus facile à équilibrer ; un choix sûr pour les pages marketing.
Conseils
- Partez d'une couleur que vous possédez déjà, par exemple la couleur principale de votre logo, ou une couleur tirée d'une photo avec l'extracteur de couleurs d'image.
- Les harmonies donnent des relations de teinte, pas de nuances. Créez des versions plus claires et plus foncées de chaque couleur pour les fonds et le texte.
- Passez les couleurs de texte dans le vérificateur de contraste ; une paire complémentaire peut être éclatante et pourtant échouer aux critères WCAG en texte.
- Pour une palette guidée par une ambiance ou une histoire plutôt que par une couleur, utilisez le générateur de palettes IA.