Générateur de couleurs analogues

Suivant

Choisissez une couleur de base et un angle d’écart. L’outil affiche la couleur de base entourée de deux teintes séparées par l’angle choisi, le trio analogue classique, puis ajoute deux teintes extérieures au double de cet angle pour former une palette élargie de cinq couleurs. Les palettes analogues comptent parmi les harmonies classiques les plus cohérentes, car leurs teintes proches partagent une dominante commune. Elles sont donc fréquentes dans la nature (couchers de soleil, forêts) et dans le design éditorial.

Comment construire une palette analogue

  1. 1

    Choisissez la couleur de base

    Collez un code hex, un triplet RGB ou une valeur HSL. Les couleurs saturées de ton moyen donnent les ensembles analogues les plus riches.

  2. 2

    Choisissez l'angle de décalage

    30° est l'espacement analogue classique. 15° donne un ensemble plus serré, presque monochromatique ; 45° commence à approcher le complémentaire éclaté.

  3. 3

    Ajustez la variation de luminosité

    Variez éventuellement la luminosité entre les trois teintes pour éviter une palette plate. Éclaircir les deux ailes crée une sensation plus douce et éditoriale.

  4. 4

    Exportez les couleurs

    Copiez hex, RGB ou HSL. Utile pour les variables CSS, les styles Figma ou les fiches techniques d'impression.

Schémas de couleurs classiques vs. analogues

Schéma Relation angulaire Caractère
Monochromatique 0° (même teinte, luminosité/saturation différentes) Calme, unifié
Analogique 30° de chaque côté Harmonieux, naturel
Complémentaire 180° d’écart Fort contraste, tension
Complémentaire éclaté Base + 2 teintes flanquant le complément Contraste avec nuance
Triadique 120° d’écart Équilibré, vibrant
Tétradique Deux paires complémentaires Riche, complexe

Exemples de palettes analogues dans la nature

  • Coucher de soleil : jaune → orange → rouge-orange (sauts de 30° du côté chaud).
  • Forêt : jaune-vert → vert → bleu-vert.
  • Océan : bleu-vert → bleu → bleu-violet.
  • Automne : rouge-orange → orange → jaune-orange.

Concevoir avec un ensemble analogue

  • Choisissez une couleur comme dominante (60% de la surface), utilisez la seconde comme accent (30%), et la troisième comme point culminant (10%), la règle “60-30-10”.
  • Associez des couleurs analogues avec un neutre (blanc, noir, gris chaud) pour le texte principal et l’interface utilisateur.
  • Évitez d’utiliser trois couleurs analogues à saturation égale pour de grands blocs, cela semble boueux. Variez la luminosité ou la saturation entre les ailes et la base.

Espaces colorimétriques et mathématiques des angles

Le décalage de 30° est calculé dans l’espace de teinte HSL ou HSV, qui traite la teinte comme un angle (0-360°). Les opérations sur la roue en RGB ne fonctionnent pas, vous devez convertir en HSL, faire pivoter la teinte, puis reconvertir. C’est ce que l’outil fait en arrière-plan. La sortie dans les trois notations est fournie car CSS, les outils de design et les flux de travail d’impression préfèrent chacun des formats différents.

Questions fréquentes

Monochromatique utilise une teinte avec différentes luminosités et saturations (marine, bleu, bleu ciel). Analogique utilise trois teintes différentes qui sont voisines sur la roue (bleu-vert, bleu, bleu-violet). Analogique a plus de variété visuelle.

Les couleurs analogues peuvent avoir des mélanges d’encre CMYK qui se chevauchent, ce qui réduit le contraste à l’impression. Vérifiez les versions en épreuve douce et envisagez d’augmenter l’espacement de 30° à 40° pour le travail d’impression.

Oui, mais gardez l’une des trois comme couleur de marque dominante et reléguez les deux autres à des rôles de soutien (badges, accents). Utiliser les trois pour les actions principales de l’interface crée de la confusion : les utilisateurs apprennent à associer une couleur à l’appel à l’action principal.

Les trois couleurs centrales forment le schéma analogue classique : la teinte de base et ses deux voisines à l’angle choisi. Les deux couleurs extérieures se trouvent au double de cet angle et constituent des options supplémentaires pour élargir la palette. Avec l’écart de 30° par défaut, le trio se situe à ±30° et la paire extérieure à ±60°.

Outils similaires