Cercle chromatique interactif dans le navigateur
Utilisez le générateur d'harmonie des couleurs pour transformer une couleur de base en palette complémentaire, analogue, triadique, complémentaire divisée ou tétradique. Déplacez le repère, réglez les valeurs HSB, testez les rôles puis copiez le CSS ou exportez un PNG légendé sans téléverser de données.
Mis à jour le 29 juillet 2026
générateur d'harmonie des couleurs
Ce générateur d'harmonie des couleurs place une teinte de base sur un cercle de 360 degrés et calcule les teintes liées avec des décalages explicites. La complémentaire utilise 180°, l’analogue −40° et +40°, la triade des pas de 120°, la complémentaire divisée 150° et 210°, et la tétrade des pas de 90°. Le générateur d'harmonie des couleurs conserve saturation et luminosité afin que la première comparaison isole la structure de teinte. Vous pouvez ensuite copier chaque HEX, exporter des variables CSS, enregistrer un PNG ou envoyer la première paire premier plan–fond au vérificateur de contraste.
générateur d'harmonie des couleurs
Le générateur d'harmonie des couleurs affiche la règle, les angles, les valeurs et les rôles prévus au lieu de livrer une rangée d’échantillons anonymes.
générateur d'harmonie des couleurs
Chaque résultat du générateur d'harmonie des couleurs reste épinglé au même cercle. Les repères rendent visibles les écarts de 180°, 120°, 90° et la division complémentaire pour expliquer pourquoi les teintes appartiennent au même système.
générateur d'harmonie des couleurs
Le générateur d'harmonie des couleurs applique le résultat à une carte de style toon avec surface, couleur focale, accent et action. C’est un test rapide de hiérarchie, pas la promesse que toutes les couleurs sont immédiatement utilisables.
générateur d'harmonie des couleurs
Copiez une couleur, toute la palette du générateur d'harmonie des couleurs ou les propriétés personnalisées CSS. Le PNG légendé garde la règle et les valeurs pour une revue, une planche d’inspiration ou un passage à l’implémentation.
Cercle et palette locaux au navigateur
Déplacez le repère ou modifiez HEX et HSB. Le générateur d'harmonie des couleurs recalcule immédiatement repères, échantillons, rôles et exports.
Une base et ses voisines opposées à 150° et 210°
Vérifiez la hiérarchie avant de placer ces couleurs dans le dessin ou composant réel.
:root {
--harmony-1: #E8335D; /* Base · 346° */
--harmony-2: #33E863; /* Soutien · 136° */
--harmony-3: #33B8E8; /* Accent · 196° */
}Le premier échantillon devient le premier plan et le dernier le fond.
générateur d'harmonie des couleurs
Un générateur d'harmonie des couleurs devient utile lorsque chaque solution du cercle mène à un rôle volontaire, une mesure de contraste et un réglage dans le contexte réel.
générateur d'harmonie des couleurs
Saisissez le HEX approuvé de la marque, du personnage ou de l’interface au lieu de l’estimer sur une capture compressée. Le générateur d'harmonie des couleurs conserve cette teinte comme premier repère et dérive toutes les autres de la même source.
générateur d'harmonie des couleurs
Prenez la complémentaire pour une séparation forte, l’analogue pour la continuité, la triade pour trois familles équilibrées, la complémentaire divisée pour une tension contrôlée et la tétrade pour un système plus large. Le générateur d'harmonie des couleurs nomme la règle exacte.
générateur d'harmonie des couleurs
Gardez une couleur dominante et utilisez les autres comme soutien, accent ou contrepoint. Après avoir choisi la structure dans le générateur d'harmonie des couleurs, modifiez saturation et luminosité afin de créer une hiérarchie au lieu de donner le même poids à chaque échantillon.
générateur d'harmonie des couleurs
Envoyez la paire texte-fond probable du générateur d'harmonie des couleurs vers le vérificateur de contraste. Contrôlez les états normal, survol, focus, sélection et désactivation, car l’écart angulaire ne prouve ni lisibilité ni transmission accessible du sens.
générateur d'harmonie des couleurs
Le générateur d'harmonie des couleurs emploie des décalages fixes et reproductibles. Le tableau décrit la géométrie, le nombre initial de couleurs, l’usage et le risque avant tout réglage artistique.
| Règle | Décalages de teinte | Bon point de départ | À surveiller |
|---|---|---|---|
| Complémentaire | 0°, 180° | Sujet focal face à une action ou une alerte | Une saturation égale peut crier ; choisissez un côté dominant |
| Analogue | −40°, 0°, +40° | Scènes calmes, surfaces et détails liés | Des teintes proches exigent parfois plus d’écart de luminosité |
| Triadique | 0°, 120°, 240° | Trois rôles couvrant largement le cercle | Réduisez une ou deux couleurs pour garder une vedette |
| Complémentaire divisée | 0°, 150°, 210° | Une base et deux accents opposés moins directs | Les deux accents rivalisent s’ils occupent de grandes zones |
| Tétradique | 0°, 90°, 180°, 270° | Systèmes, équipes, graphiques et interfaces complexes | Quatre couleurs fortes demandent souvent des groupes de valeur |
générateur d'harmonie des couleurs
Cette liste du générateur d'harmonie des couleurs transforme un joli résultat du cercle en palette documentée et testable.
générateur d'harmonie des couleurs
Ce générateur d'harmonie des couleurs sépare la géométrie reproductible des affirmations d’accessibilité. Les angles sont explicites et les sources W3C définissent teinte numérique et contraste.
Le W3C énonce directement le seuil du texte normal :
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
générateur d'harmonie des couleurs
générateur d'harmonie des couleurs
Commencez par l’analogue pour une palette retenue ou la complémentaire pour un accent clair. Le générateur d'harmonie des couleurs garde la base fixe : alterner les deux rend la différence visible. Dans les deux cas, choisissez une dominante et mesurez la paire finale.
Le générateur d'harmonie des couleurs calcule et affiche HSB, car Toon Tone emploie teinte, saturation et luminosité. La teinte reste un angle de 360 degrés. Chaque résultat HSB est aussi converti en HEX pour le navigateur et les outils de conception.
Non. Un générateur d'harmonie des couleurs décrit des relations de teinte, tandis que le contraste WCAG dépend de la luminance relative d’un premier plan et d’un fond précis. Mesurez police et état réels et ajoutez des indices non chromatiques lorsque le sens dépend de la couleur.
Le monochrome change luminosité et saturation autour d’une teinte au lieu de placer plusieurs familles sur le cercle. Ce générateur d'harmonie des couleurs renvoie vers l’outil de nuances, qui gère étapes, ombres toon, contraste, CSS et PNG.
Non. Le générateur d'harmonie des couleurs effectue angles et conversions dans l’onglet actuel. La copie et le PNG restent locaux. L’URL partagée contient le HEX de base et le nom de la règle ; ne la partagez que si ces valeurs peuvent être révélées.