Color Palette Generator

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Pick a base color above and select a harmony mode to generate your palette.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Palette Generator

Génère des palettes complémentaires, analogues, triadiques, tétradiques, complémentaires partagées et monochromatiques à partir d'une seule couleur de base.

How it works

L'hexadécimal de base est converti en HSL et le schéma est produit en faisant tourner la teinte tout en maintenant la saturation et la luminosité. Le complémentaire tourne de 180°, l'analogue prend ±30°, le triadique prend 120° et 240°, le tétradique prend 90°, 180° et 270°, et le complémentaire partagé prend 150° et 210° — les deux teintes qui encadrent la complémentaire, ce qui donne le contraste d'une paire complémentaire sans sa dureté. Le monochromatique fait exception : il conserve la teinte et la saturation et fait progresser la luminosité selon une échelle fixe de 20 %, 35 %, 50 %, 65 % et 80 %.

When to use it

  • Dériver un premier jeu de couleurs d'accent et secondaires à partir d'une seule couleur de marque
  • Trouver une couleur qui se détachera d'un fond auquel vous êtes déjà engagé, à l'aide du mode complémentaire ou complémentaire partagé
  • Générer une rampe monochromatique en cinq paliers pour une échelle de surface, de survol et de bordure
  • Explorer rapidement des variantes avant de passer du temps à régler une palette à la main

Watch out for

  • La rotation de teinte en HSL n'est pas perceptuellement régulière. Un pas de 120° depuis un jaune vif aboutit à une couleur bien plus sombre à saturation et luminosité nominales identiques, si bien que les jeux triadiques demandent souvent une correction manuelle de la luminosité.
  • Une palette ne dit rien de la lisibilité. Vérifiez dans le contrôleur de contraste chaque paire texte-sur-fond que vous comptez utiliser — des couleurs harmonieuses échouent fréquemment au 4.5:1.
  • Le mode monochromatique écarte la luminosité de base. Il la remplace par l'échelle fixe, si bien que la couleur que vous avez saisie peut ne pas figurer dans sa propre palette.
  • Seul l'hexadécimal à 6 ou à 3 chiffres est accepté comme couleur de base ; rgb(), hsl() et les couleurs nommées ne le sont pas.

Frequently Asked Questions

Qu'est-ce qu'un schéma de couleurs complémentaires ?

Les couleurs complémentaires sont diamétralement opposées sur la roue chromatique (180° d'écart). Elles produisent un contraste maximal et une vibration visuelle. Exemple : le bleu (#0000FF) et l'orange (#FF8000). À utiliser pour des boutons d'appel à l'action qui doivent se détacher du fond.

Qu'est-ce qu'un schéma de couleurs analogues ?

Les couleurs analogues sont voisines sur la roue chromatique (±30°). Elles sont harmonieuses et peu contrastées — excellentes pour les fonds, les dégradés et les interfaces apaisées. Une palette bleu-turquoise-vert est analogue et sert couramment à l'identité des marques de santé et de bien-être.

Comment obtenir des paires de couleurs accessibles à partir d'une palette ?

Après avoir généré votre palette, contrôlez chaque combinaison premier plan/fond avec l'outil de contraste WCAG. Pour le niveau AA, le rapport de contraste doit atteindre au moins 4.5:1 pour le corps de texte — beaucoup de palettes générées demandent un ajustement de luminosité pour y parvenir.

How to Use Color Palette Generator

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.