Combien de palettes l'outil génère-t-il ?

L'outil génère 9 palettes différentes à partir d'une seule couleur de base : monochromatique, analogue, complémentaire, triadique, complémentaire divisée, pastel, sombre, tonale (Material Design) et minimaliste (style Apple).

Qu'est-ce qu'une palette monochromatique ?

Une palette monochromatique est composée de variations d'une seule teinte – toutes les couleurs partagent la même teinte (H dans le modèle HSL) et varient uniquement en luminosité et saturation. Ces palettes sont harmonieuses et particulièrement adaptées aux designs professionnels.

Qu'est-ce qu'une palette complémentaire ?

Une palette complémentaire combine la couleur de base avec son complément – la couleur opposée sur le cercle chromatique (décalage de 180°). Ce contraste est l'un des principes fondamentaux de la théorie des couleurs et produit un effet vif et dynamique.

Puis-je copier les couleurs générées ?

Oui. Cliquez sur une couleur dans la palette pour copier son code HEX dans le presse-papiers. Utilisez-le directement dans CSS, Figma, Adobe ou d'autres outils de design.

Quelle différence entre triadique et complémentaire divisée ?

Une palette triadique utilise trois couleurs équidistantes sur le cercle chromatique (120° d'écart). Une palette complémentaire divisée utilise, au lieu du complément direct, les deux voisins du complément – ce qui produit un contraste plus subtil.

Générateur de palettes de couleurs

Q: Qu'est-ce que l'espace colorimétrique HSL ?

HSL signifie Hue (teinte), Saturation et Lightness (luminosité). Contrairement à RGB, HSL décrit les couleurs telles que nous les percevons : la teinte détermine la couleur de base, la saturation l'intensité, et la luminosité indique si la couleur est claire ou foncée. Toutes les palettes de cet outil reposent sur des calculs HSL.

Choisissez une couleur de base et générez 9 palettes harmonieuses. Monochromatique, complémentaire, triadique, pastel, sombre et plus – tous les calculs s'exécutent localement dans votre navigateur.

Palette monochromatique

Toutes les couleurs partagent la même teinte (H) et varient principalement en luminosité (L) dans l'espace colorimétrique HSL.

#0b28ba

hsl(230, 89%, 39%)

#153af2

hsl(230, 89%, 52%)

#4f6bf5

hsl(230, 89%, 64%)

#899cf8

hsl(230, 89%, 76%)

#c3ccfc

hsl(230, 89%, 88%)

Palette triadique

Trois teintes séparées de 120° sur le cercle chromatique (sommets d'un triangle équilatéral), une géométrie fréquemment utilisée en branding et dans les designs inspirés du Bauhaus.

#4f6bf5

hsl(230, 89%, 64%)

#f43757

hsl(350, 89%, 59%)

#7ff667

hsl(110, 89%, 69%)

#f87f94

hsl(350, 89%, 74%)

#42f21f

hsl(110, 89%, 54%)

Palette complémentaire divisée

Une variante de la palette complémentaire : au lieu d'un complément (180°), on utilise deux couleurs décalées d'environ ±30° du complément, réduisant la tension visuelle tout en conservant un fort contraste.

#4f6bf5

hsl(230, 89%, 64%)

#f5864f

hsl(20, 89%, 64%)

#bef54f

hsl(80, 89%, 64%)

#f7a176

hsl(20, 89%, 72%)

#b0f328

hsl(80, 89%, 56%)

Palette pastel

La même teinte avec une saturation réduite et une luminosité augmentée, un déplacement vers le centre et le haut de l'espace HSL qui produit des couleurs douces et "crémeuses".

#e1e5f4

hsl(230, 45%, 92%)

#d3d7ee

hsl(230, 45%, 88%)

#c4cae9

hsl(230, 45%, 84%)

#b5bde3

hsl(230, 45%, 80%)

#a6b0dd

hsl(230, 45%, 76%)

Palette sombre

La même teinte avec une saturation élevée (S) et une luminosité réduite (L) un déplacement vers le bas sur l'axe de luminosité, produisant des couleurs profondes typiques du mode sombre et des accents intenses.

#3757f4

hsl(230, 89%, 59%)

#153af2

hsl(230, 89%, 52%)

#0c2dd2

hsl(230, 89%, 44%)

#0a25ab

hsl(230, 89%, 36%)

#081d85

hsl(230, 89%, 28%)

Palette tonale (inspirée Material Design)

Plusieurs niveaux de luminosité d'une même teinte L variée et S modérée, similaire aux plages tonales des directives Material Design (ex. : 50-900).

#f2f3f8

hsl(230, 27%, 96%)

#dcdfef

hsl(230, 36%, 90%)

#b1bae7

hsl(230, 54%, 80%)

#7c8ee9

hsl(230, 71%, 70%)

#3e5df4

hsl(230, 89%, 60%)

Palette minimaliste (inspirée Apple)

Un accent de couleur vif et plusieurs neutres très clairs et doux, un agencement typique des interfaces avec beaucoup d'espace blanc et des ombres subtiles.

#3e5df4

hsl(230, 89%, 60%)

#fafafa

hsl(230, 6%, 98%)

#efeff1

hsl(230, 6%, 94%)

#dfdfe2

hsl(230, 6%, 88%)

#484951

hsl(230, 6%, 30%)

Palette analogue

Des couleurs de teintes proches, d'environ -30° à +30° autour de la couleur de base sur le cercle chromatique classique (ex. : Itten).

#4fbef5

hsl(200, 89%, 64%)

#67a3f6

hsl(215, 89%, 69%)

#4f6bf5

hsl(230, 89%, 64%)

#4637f4

hsl(245, 89%, 59%)

#864ff5

hsl(260, 89%, 64%)

Palette complémentaire

La couleur de base et son complément décalé de 180° sur le cercle chromatique, l'un des contrastes fondamentaux décrits par Johannes Itten.

#4f6bf5

hsl(230, 89%, 64%)

#1f42f2

hsl(230, 89%, 54%)

#f5d94f

hsl(50, 89%, 64%)

#f8e37f

hsl(50, 89%, 74%)

#f2cf1f

hsl(50, 89%, 54%)

Générer des palettes à partir d'une seule couleur

Le générateur de palettes crée 9 palettes différentes à partir d'une seule couleur de base, en s'appuyant sur la théorie des couleurs. Chaque palette a une composition différente – des variations monochromatiques aux couleurs complémentaires contrastantes.

Tous les calculs reposent sur l'espace colorimétrique HSL (Teinte, Saturation, Luminosité). La teinte détermine la couleur de base, la saturation l'intensité et la luminosité le caractère clair ou foncé. Ce modèle correspond à la perception humaine des couleurs et se prête parfaitement à la génération de palettes.

Comment utiliser le générateur

La génération ne prend que quelques secondes :

1. Choisir la couleur de base
Saisissez un code HEX ou utilisez le sélecteur de couleurs.
2. Voir les palettes
L'outil génère automatiquement 9 palettes avec plusieurs couleurs harmonieuses.
3. Copier les codes HEX
Cliquez sur une couleur pour copier son code HEX. Utilisez-le dans CSS, Figma ou d'autres outils.

9 types de palettes – laquelle convient à votre projet ?

Chaque palette a un caractère différent :

Monochromatique
Variations d'une teinte en luminosité et saturation. Élégante, harmonieuse, professionnelle.
Analogue
Couleurs voisines sur le cercle chromatique. Transition douce et naturelle.
Complémentaire
Couleur de base + couleur opposée (180°). Contraste maximum pour des designs dynamiques.
Triadique
Trois couleurs à 120° d'écart. Équilibrée avec un fort contraste visuel.
Complémentaire divisée
Couleur de base + les deux voisins du complément. Contraste plus subtil.
Pastel
Luminosité élevée, saturation réduite. Douce, aérienne – idéale pour des designs amicaux.
Sombre
Luminosité basse, tons profonds. Professionnelle – adaptée au mode sombre et aux marques premium.
Tonale (Material Design)
Luminosité graduée sur une même teinte. Similaire au système de couleurs de Google Material Design.
Minimaliste (Apple)
Base neutre avec un accent coloré. Propre, moderne – inspiré du style Apple.

Exemple : HSL(210, 80%, 50%)

H = 210° (teinte bleue)

S = 80% (intense)

L = 50% (luminosité moyenne)

Même teinte, luminosité différente

L : 90% → 70% → 50% → 30% → 10%

Comment fonctionne l'espace colorimétrique HSL

Toutes les palettes de cet outil reposent sur l'espace colorimétrique HSL (Teinte, Saturation, Luminosité). Contrairement à HEX ou RGB, HSL décrit les couleurs telles que nous les percevons :

Hue (H) – la teinte sur le cercle chromatique (0°–360°). 0° = rouge, 120° = vert, 240° = bleu.
Saturation (S) – l'intensité. 0% = gris, 100% = couleur pleinement saturée.
Lightness (L) – la luminosité. 0% = noir, 50% = couleur normale, 100% = blanc.

En modifiant sélectivement ces valeurs, on obtient des palettes harmonieuses. Les palettes monochromatiques ne varient que L, les analogues que H, et les complémentaires inversent H de 180°.

Où utiliser les palettes générées ?

Identité visuelle de marque
Sélectionnez des couleurs complémentaires pour un logo existant ou construisez une palette de branding de zéro, pour cartes de visite, papeterie et supports marketing.
Sites web
Définissez la couleur principale, la couleur d'accent et les tons de fond. Les codes HEX copiés se collent directement dans les feuilles de style CSS ou la configuration de thèmes.
Interfaces d'applications
La palette tonale fournit des variantes de luminosité d'une couleur : plus claires pour les fonds, plus foncées pour le texte, intermédiaires pour les bordures et états interactifs.
Visuels pour les réseaux sociaux
Des couleurs cohérentes pour les publications, stories et couvertures de profil. Les palettes analogues ou pastel fonctionnent bien pour un style uniforme et reconnaissable.
Présentations et documents
Des ensembles de couleurs harmonieux pour les diapositives, graphiques et infographies. Les palettes monochromatiques ou minimalistes maintiennent l'ordre visuel.

Résolution de problèmes du générateur de palettes

Les palettes ne changent pas après la saisie d'une couleur
Simplement taper un code HEX ne génère pas automatiquement les palettes : vous devez confirmer le changement avec le bouton Mettre à jour la couleur. Ce n'est qu'après confirmation que l'outil recalcule les 9 schémas.
Message de format non valide
Le générateur accepte uniquement le format HEX avec # au début, par ex. #FF5500. Les formats sans # (par ex. FF5500) ou en notation RGB (par ex. rgb(255,85,0)) ne sont pas pris en charge.
Format HEX court et complet
Les deux formats sont pris en charge : complet #RRGGBB (par ex. #FF5500) et court #RGB (par ex. #F50). Le générateur reconnaît automatiquement les deux et les traite de manière identique.

Questions fréquentes sur le générateur de palettes

Découvrir d'autres outils

Voir tous les outils

Convertisseur JPG/PNG en WebP

Réduisez le poids des images sans perte de qualité. Convertissez JPG et PNG en WebP pour accélérer votre site.

Générateur de palettes de couleurs

Générer des palettes à partir d'une seule couleur

Comment utiliser le générateur

1. Choisir la couleur de base

2. Voir les palettes

3. Copier les codes HEX

9 types de palettes – laquelle convient à votre projet ?

Monochromatique

Analogue

Complémentaire

Triadique

Complémentaire divisée

Pastel

Sombre

Tonale (Material Design)

Minimaliste (Apple)

Comment fonctionne l'espace colorimétrique HSL

Où utiliser les palettes générées ?

Identité visuelle de marque

Sites web

Interfaces d'applications

Visuels pour les réseaux sociaux

Présentations et documents

Résolution de problèmes du générateur de palettes

Les palettes ne changent pas après la saisie d'une couleur

Message de format non valide

Format HEX court et complet

Questions fréquentes sur le générateur de palettes

Combien de palettes l'outil génère-t-il ?

Qu'est-ce qu'une palette monochromatique ?

Qu'est-ce qu'une palette complémentaire ?

Puis-je copier les couleurs générées ?

Qu'est-ce que l'espace colorimétrique HSL ?

Quelle différence entre triadique et complémentaire divisée ?

Découvrir d'autres outils

Convertisseur JPG/PNG en WebP

Éditeur d'images en ligne

Générateur de favicon

Vérificateur de méta titre et description

Compteur de mots et caractères

Générateur de signature e-mail

Vérificateur de contraste des couleurs

Extracteur de couleurs d'image