Générateur de couleurs analogues

Les couleurs analogues se situent côte à côte sur le cercle des teintes : elles partagent donc une famille de sous-tons et paraissent naturellement harmonieuses dans les interfaces, les systèmes de marque et l'illustration. Ce générateur prend une couleur de base hex CSS et un angle positif de décalage de teinte en degrés, convertit la base en HSL, puis construit les deux voisines en soustrayant et en ajoutant cet angle tout en gardant saturation et luminosité fixes. Le résultat est une palette de trois échantillons — moins, base et plus — renvoyée en hex, en entiers RGB, en composantes HSL et en un tableau palette prêt à l'emploi. La pratique classique du design utilise trente degrés pour une famille resserrée et des pas plus grands quand vous voulez davantage de séparation sans sauter au contraste complémentaire. Les codes hex invalides et les angles hors plage échouent avec une erreur de validation claire au lieu d'inventer une palette.

Comment fonctionnent les décalages de teinte analogues

Partez d'une couleur de base écrite comme chaîne hex CSS, par exemple #3366cc ou la forme courte #36c. Le moteur développe l'hex à trois chiffres, analyse les canaux rouge, vert et bleu dans la plage de zéro à deux cent cinquante-cinq, et convertit ce triplet RGB en HSL avec les formules standard CSS et W3C, de sorte que la teinte vit en degrés sur un cercle de zéro à trois cent soixante tandis que saturation et luminosité sont des pourcentages.

Le paramètre angle est un nombre positif de degrés, strictement supérieur à zéro et au plus égal à cent quatre-vingts. Les deux voisines analogues sont formées en déplaçant la teinte à teinte de base moins l'angle et teinte de base plus l'angle, avec retour par zéro quand le parcours franchit le bord rouge du cercle, et en laissant saturation et luminosité intactes afin que la famille reste dans la même bande de chromie et de valeur.

Chaque triplet HSL résultant est reconverti en RGB entier avec le même chemin hue-to-rgb utilisé par les modules couleur des navigateurs, puis formaté en hex minuscule, en chaîne rgb() et en chaîne hsl().

Ce que vous envoyez et ce que vous recevez

Envoyez un champ color obligatoire comme chaîne hex et un champ angle obligatoire comme nombre fini de degrés. Les formes valides sont trois ou six chiffres hexadécimaux avec un dièse optionnel en tête ; la casse est ignorée et la sortie se normalise toujours en hex à six chiffres minuscules avec dièse.

L'angle doit être supérieur à zéro et au plus égal à cent quatre-vingts afin que les deux voisines restent distinctes et ne se confondent pas en un basculement de cent quatre-vingts degrés de type complémentaire, qui relèverait d'une autre intention d'harmonie. Les vérifications typiques incluent un bleu moyen #3366cc avec un angle de trente degrés pour une famille froide classique, le rouge pur #ff0000 avec trente degrés pour des voisins orange chaud et magenta, et un hex court à trois chiffres pour confirmer l'expansion.

Où les palettes analogues apparaissent dans le travail réel

Les designers produit construisent des états de composants, des séries de graphiques et des dégradés de héros marketing qui exigent des teintes parentes sans la forte tension des paires complémentaires ; un angle fixe garde les jetons reproductibles d'un système de design à l'autre. Les équipes de marque dérivent des couleurs secondaires et tertiaires à partir d'un hex primaire quand le guide de style ne publie qu'un seul échantillon officiel mais veut quand même une famille maîtrisée pour l'illustration et les gabarits sociaux.

Les ingénieurs frontend génèrent des propriétés personnalisées CSS et des cartes de jetons de style Tailwind à partir d'une seule couleur de départ, afin que les thèmes clair et sombre restent sur la même colonne de teinte pendant que seule la luminosité change ailleurs. Les auteurs de visualisation de données attribuent des couleurs de séries qui restent distinguables mais cohésives pour les graphiques catégoriels où les chocs complémentaires suggéreraient une opposition plutôt qu'un regroupement.

Les formateurs en cours et ateliers enseignent la théorie des couleurs avec des exemples en direct : les étudiants saisissent leur hex préféré, essaient trente contre quarante-cinq contre soixante degrés, et voient immédiatement jusqu'où la famille parcourt le cercle.

Si vous avez ensuite besoin de schémas complémentaires ou triadiques, d'une simple conversion HSL vers RGB, d'une recherche de couleur CSS nommée la plus proche ou de vérifications de contraste WCAG, traitez-les comme des intentions de recherche et des pages d'atterrissage distinctes plutôt que de surcharger cette page de générateur de couleurs analogues.