Aller au contenu
EN

Générateur de palette de couleurs

Créez une palette harmonieuse à partir d'une couleur : complémentaire, analogue, triadique, monochrome, et nuancier de 50 à 950. Export CSS, SCSS, Tailwind.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Trouvez des couleurs qui vont ensemble à partir d'une seule : six harmonies (complémentaire, analogue, triadique, complémentaires adjacentes, tétradique, monochrome) et un nuancier complet de 50 à 950 comme dans Tailwind. Un clic copie un code couleur ; la palette s'exporte en variables CSS, SCSS, Tailwind ou JSON, et en image.

Dans quels cas l'utiliser ?

Charte graphique d'un projet

À partir de la couleur d'un logo, l'harmonie complémentaire donne une couleur d'accent pour les boutons et les liens.

Design system

Le nuancier 50 à 950 fournit toutes les nuances nécessaires aux fonds, bordures, états de survol et textes, avec des noms cohérents.

Présentations et documents

Une palette analogue ou monochrome rend des graphiques et des diapositives harmonieux sans effort.

Mode d'emploi

  1. Choisissez votre couleur de base (ou tirez-en une au hasard).
  2. Choisissez une harmonie et touchez une couleur pour copier son code.
  3. Copiez la palette en variables CSS, SCSS, Tailwind ou JSON.

Comment ça marche

Les couleurs sont calculées dans l'espace TSL (teinte, saturation, luminosité) : l'outil fait tourner la teinte de la couleur de base selon l'harmonie choisie et ajuste la luminosité pour les variantes claires et foncées.

Le nuancier garde la teinte et la saturation de la base et fixe la luminosité de chaque palier (97 % pour 50, 14 % pour 950), avec une saturation un peu réduite aux extrêmes, comme dans les palettes dessinées à la main.

Conseils pour un bon résultat

  • Appliquez la règle 60-30-10 : une couleur dominante, une secondaire, une d'accent.
  • Gardez une couleur vive pour les actions (boutons) et des couleurs calmes pour le reste.
  • Vérifiez le contraste du texte sur chaque couleur de fond avant de l'adopter.
  • Nommez vos couleurs par leur rôle (primaire, accent) plutôt que par leur teinte.

Problèmes fréquents et solutions

Les couleurs paraissent ternes

Votre couleur de base est peu saturée : choisissez une base plus vive, les harmonies en héritent.

Le jaune foncé tire sur le marron

C'est normal : un jaune assombri devient brun. Pour les nuances foncées d'un jaune, décalez légèrement la teinte vers l'orange.

Le copier ne fonctionne pas

Certains navigateurs bloquent le presse-papiers hors HTTPS ou sans clic direct ; utilisez les blocs de code.

Questions fréquentes

Qu'est-ce qu'une harmonie de couleurs ?

Une règle de choix des couleurs sur le cercle chromatique : opposées (complémentaire), voisines (analogue), à 120° (triadique)… Ces combinaisons sont agréables à l'œil et utilisées depuis des siècles en peinture.

À quoi sert le nuancier 50 à 950 ?

Il décline votre couleur du plus clair au plus foncé, comme les palettes de Tailwind CSS : 50 pour les fonds, 500 pour la couleur principale, 900 pour le texte.

Comment utiliser la palette dans mon site ?

Copiez les variables CSS (--primaire-500…) dans votre feuille de style, ou la configuration Tailwind dans tailwind.config.js.

Les couleurs sont-elles accessibles ?

Le texte des pastilles passe automatiquement en noir ou en blanc selon le meilleur contraste. Vérifiez vos combinaisons texte/fond avec le vérificateur de contraste.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.