Générateur de schéma triadique

Un générateur de schéma de couleurs triadique transforme une couleur hex en palette de trois couleurs en parcourant le cercle chromatique par pas égaux de cent vingt degrés. Saisissez un code de base tel que #3498db ou la forme courte #abc ; l'outil convertit la couleur en teinte, saturation et luminosité, conserve saturation et luminosité fixes, et produit trois membres aux décalages de teinte de zéro, plus cent vingt et plus deux cent quarante degrés. Vous recevez des valeurs hex normalisées, des canaux RGB, des décompositions HSL, un tableau de schéma et des lignes de rotation pas à pas que vous pouvez assertter dans des tests ou déposer dans un fichier de jetons de design. Les équipes de marque qui équilibrent des accents secondaires audacieux, les développeurs front-end qui échafaudent des jetons de thème et les étudiants qui apprennent l'harmonie des couleurs ont besoin de cette même carte triadique déterministe sans ouvrir une suite de design complète.

Ce qu'est un schéma triadique et pourquoi l'espacement de 120° fonctionne

L'harmonie triadique place trois teintes aux sommets d'un triangle équilatéral sur le cercle de teinte : chaque couleur se situe à cent vingt degrés de la suivante, de sorte qu'aucune teinte ne domine tandis que les trois restent équidistantes. Les systèmes de design utilisent cette structure lorsqu'une marque a besoin d'une couleur primaire d'identité plus deux accents de soutien qui restent liés plutôt que choisis au hasard.

Le générateur met en œuvre le modèle classique dans l'espace HSL : il convertit l'hex d'entrée en entiers rouge, vert et bleu, mappe ces canaux en teinte en degrés et saturation et luminosité en fractions, puis émet trois couleurs qui partagent la saturation et la luminosité d'origine tandis que leurs teintes se situent à l'angle de base, base plus cent vingt et base plus deux cent quarante, chacune enveloppée dans l'intervalle semi-ouvert de zéro à trois cent soixante.

Conserver saturation et luminosité fixes est intentionnel—l'intention de recherche triadique porte sur la rotation équilibrée de la teinte, non sur l'invention de nouvelles rampes de valeur ou de chroma—ainsi un bleu pastel donne des compagnons pastel et un rouge saturé des compagnons saturés. Lorsque l'entrée est quasi grise, la saturation est proche de zéro et les trois hex peuvent se ressembler ; c'est la physique correcte, non un bogue, car les couleurs achromatiques n'ont pas de teinte significative à faire tourner.

Les enseignants associent souvent cet outil aux leçons complémentaires (cent quatre-vingts degrés) et analogues (petits pas adjacents) pour que les étudiants voient comment l'espacement sur la roue change la tension visuelle. La réponse liste toujours les rôles primary, secondary et tertiary afin que la documentation et les propriétés personnalisées CSS puissent se mapper proprement vers --color-primary, --color-secondary et --color-tertiary sans réordonner à la main.

Conseils pratiques, limites et recherches connexes

Partez de la couleur de marque ou d'interface que vous faites déjà confiance plutôt que d'un point arbitraire de la roue ; le membre primary est la teinte d'entrée au décalage zéro après l'aller-retour HSL, qui peut différer d'une unité de canal de l'hex d'origine car RGB vers HSL vers RGB est quantifié en canaux de huit bits. Ne passez pas de formes avec alpha telles que #RRGGBBAA—cette page cible uniquement l'hex classique opaque afin que les longueurs invalides échouent immédiatement.

Les couleurs CSS nommées comme tomato sont hors de portée ; résolvez-les d'abord en hex ou utilisez une table de couleurs nommées. Lors de l'écriture de tests unitaires, couvrez au moins un cas vif à six chiffres, une expansion à trois chiffres, une entrée quasi grise et un hex invalide délibéré pour verrouiller à la fois les mathématiques d'harmonie et la validation.

Cette page s'adresse à ceux qui cherchent un générateur de schéma de couleurs triadique, une palette à cent vingt degrés ou un outil gratuit de roue à trois couleurs en ligne ; ce n'est pas un convertisseur multi-espaces complet, ni un extracteur de palette d'image, ni un solveur uniquement complémentaire ou tétradique à quatre couleurs. Préférez cette capacité lorsque vous avez besoin d'exactement trois teintes également espacées à partir d'un jeton hex ; si vous n'avez besoin que d'un découpage de canaux sans harmonie, utilisez un convertisseur hex vers RGB.