Générateur d’harmonies de couleurs

Comment fonctionne le générateur d’harmonies de couleurs

Ce que fait l’outil

Le générateur d’harmonies de couleurs calcule des ensembles de couleurs mathématiquement liés à partir d’une seule teinte de base : complémentaire, analogue, triadique, tétradique, carré, complémentaire scindée, monochromatique et nuances. Chaque palette est affichée avec des valeurs HEX, RGB et HSL que vous pouvez copier en un clic et utiliser directement dans le CSS ou des design tokens.

Cas d’usage courants pour les développeurs

Les designers prototypent des palettes de marque en explorant comment une teinte de marque évolue selon différentes règles d’harmonie. Les développeurs frontend définissent des couleurs d’accent pour les boutons, alertes et badges à partir d’une couleur de marque principale. Les ingénieurs en dataviz choisissent des ensembles de couleurs catégorielles qui paraissent intentionnels tout en restant distinguables. Les chefs de produit comparent des options de palettes lors de la revue de propositions de design, sans avoir besoin d’outils de design dédiés.

Formats de données, types ou variantes

Huit schémas sont disponibles : Complémentaire (base + 180°), Analogue (base ± 30°), Triadique (3 couleurs espacées de 120°), Tétradique (rectangle à 4 couleurs), Carré (4 couleurs espacées de 90°), Complémentaire scindée (base + ±150°), Monochromatique (même teinte avec une luminosité variable de 10 à 90 %), et Nuances (même teinte, du sombre au clair). Chaque couleur inclut ses représentations HEX, RGB et HSL ainsi qu’une étiquette de rôle.

Pièges courants et cas limites

Les harmonies dérivées de couleurs de base extrêmement désaturées ou proches du gris paraissent indiscernables d’un schéma à l’autre — partez d’une base saturée. Des bases très saturées combinées à des schémas triadiques ou tétradiques peuvent produire des palettes criardes et difficiles à équilibrer ; envisagez de réduire la saturation pour un usage UI. Certaines associations issues des harmonies ne respectent pas le contraste WCAG — vérifiez toujours les paires texte/arrière-plan dans l’outil de contraste des couleurs avant de livrer.

Quand utiliser cet outil plutôt que du code

Utilisez l’outil dans le navigateur pour l’idéation, l’exploration rapide et la revue de design. En code, des bibliothèques comme chroma.js, colord ou culori vous permettent de calculer des harmonies de manière programmatique, de les intégrer à des pipelines de build de design tokens et de combiner les mathématiques des harmonies avec des espaces colorimétriques perceptuellement uniformes comme Oklch pour des palettes à l’aspect plus homogène.