Creez des palettes de couleurs harmonieuses a partir d'une couleur de base. Choisissez parmi 5 harmonies (complementaire, analogue, triadique...). Codes HEX et RGB. 100% gratuit.
#3c83f6
rgb(60, 131, 246)
#9ec1fa
rgb(158, 193, 250)
#f6af3c
rgb(246, 175, 60)
#fad79e
rgb(250, 215, 158)
#e1aa51
rgb(225, 170, 81)
Generez des palettes couleurs professionnelles
Choisir une palette de couleurs coherente est l'une des etapes les plus importantes d'un projet
de design ou de developpement web. Sans connaissances approfondies en theorie des couleurs, il est
facile de se retrouver avec des combinaisons qui se heurtent visuellement ou manquent de personnalite.
Notre generateur applique les regles mathematiques du cercle chromatique pour vous proposer
automatiquement 5 couleurs qui fonctionnent ensemble. Choisissez votre couleur de base (votre
brand color, par exemple) et selectionnez l'harmonie qui correspond a l'atmosphere recherchee.
Apercu visuel — Chaque couleur s'affiche sous forme de swatch cliquable de grande taille.
Codes HEX et RGB — Chaque couleur est fournie dans les deux formats les plus utilises.
Copie individuelle — Cliquez sur un swatch ou son bouton pour copier la couleur.
Variables CSS — Exportez toute la palette en variables CSS pret-a-coller.
Copie de la palette — Copiez tous les codes couleurs en une seule action.
Questions frequentes
Qu'est-ce que la theorie des harmonies de couleurs ?
La theorie des couleurs definit des regles pour combiner des couleurs de maniere harmonieuse en se basant sur leur position sur le cercle chromatique. Les harmonies complementaires (couleurs opposees) creent du contraste, les analogues (couleurs adjacentes) creeent de la coherence, les triadiques utilisent trois couleurs equidistantes pour une palette vibrante.
Quelle harmonie choisir pour mon projet ?
Pour une interface pro et sobre : monochromatique. Pour un site vitrine ou un portfolio : analogique. Pour une marque dynamique avec contraste fort : complementaire. Pour une identite visuelle originale : triadique ou split-complementaire. En general, commencez par votre couleur principale (brand color) et generez autour.
Comment utiliser ces couleurs en CSS ?
Notre outil genere directement les variables CSS (--color-palette-1 a 5) que vous pouvez coller dans votre :root {}. Utilisez-les ensuite avec var(--color-palette-1) partout dans votre CSS. En Tailwind, vous pouvez les ajouter dans le theme.extend.colors de tailwind.config.js.
Quelle est la difference entre complementaire et split-complementaire ?
La complementaire utilise la couleur exactement opposee sur le cercle (180 degres). Le contraste est fort mais peut etre difficile a equilibrer. La split-complementaire utilise les deux couleurs adjacentes a la complementaire (150 et 210 degres), offrant un contraste similaire mais plus doux et plus facile a travailler.
Les codes couleurs generes sont-ils en HEX ou RGB ?
L'outil affiche les couleurs en HEX (ex: #3b82f6) et RGB (ex: rgb(59, 130, 246)). Les deux formats sont utilisables directement en CSS. Le HEX est le plus compact et le plus courant dans les designs. Le RGB est pratique quand on a besoin d'ajouter une transparence (rgba).
Chaque semaine, le meilleur de la tech francaise
Tendances, salaires, outils et opportunites — directement dans votre boite mail.
