Créez des palettes de couleurs harmonieuses à partir d'une couleur de base. Choisissez parmi 5 harmonies (complémentaire, 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)
Générez des palettes couleurs professionnelles
Choisir une palette de couleurs cohérente est l'une des étapes les plus importantes d'un projet
de design ou de développement web. Sans connaissances approfondies en théorie des couleurs, il est
facile de se retrouver avec des combinaisons qui se heurtent visuellement ou manquent de personnalite.
Notre générateur applique les règles mathématiques 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 à l'atmosphere recherchee.
Aperçu 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 fréquentes
Qu'est-ce que la theorie des harmonies de couleurs ?
La théorie des couleurs définit des règles pour combiner des couleurs de manière harmonieuse en se basant sur leur position sur le cercle chromatique. Les harmonies complémentaires (couleurs opposees) créent du contraste, les analogues (couleurs adjacentes) creeent de la cohérence, 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 : complémentaire. Pour une identité visuelle originale : triadique ou split-complementaire. En général, commencez par votre couleur principale (brand color) et générez autour.
Comment utiliser ces couleurs en CSS ?
Notre outil genere directement les variables CSS (--color-palette-1 à 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 thème.extend.colors de tailwind.config.js.
Quelle est la différence entre complémentaire et split-complementaire ?
La complémentaire utilise la couleur exactement opposee sur le cercle (180 degrés). Le contraste est fort mais peut être difficile à equilibrer. La split-complementaire utilise les deux couleurs adjacentes à la complémentaire (150 et 210 degrés), offrant un contraste similaire mais plus doux et plus facile à 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 française
Tendances, salaires, outils et opportunités — directement dans votre boîte mail.
