Génération de palettes de couleurs en ligne, gratuite

Comment l'utiliser

• Choisissez un mode d'harmonie (analogue, complémentaire, triadique, etc.) ou laissez-le sur « Aléatoire ».
• Cliquez sur Générer ou appuyez sur Espace pour de nouvelles palettes.
• Cliquez sur l'icône du cadenas pour verrouiller une couleur : elle restera en place lors de la prochaine génération.
• Cliquez sur un code HEX pour le copier dans le presse-papiers.
• Utilisez Copier le CSS pour obtenir des propriétés personnalisées CSS, ou téléchargez la palette sous forme d'image.

Théorie des couleurs et modes d'harmonie

Ce générateur prend en charge 7 modes d'harmonie inspirés de la théorie des couleurs. Analogue : les palettes utilisent des couleurs situées à moins de 30° les unes des autres sur le cercle chromatique · elles paraissent calmes et cohérentes. Complémentaire : les palettes associent des couleurs opposées de 180° pour un contraste maximal. Triadique : les palettes utilisent trois teintes équidistantes (120° d'écart) pour une variété éclatante. Complémentaire divisée : part d'une couleur de base et deux couleurs adjacentes à sa complémentaire · audacieux, mais plus nuancé. Monochrome : les palettes ne font varier que la luminosité et la saturation d'une seule teinte · élégant et minimal. Carré : utilise quatre couleurs espacées de 90° pour une palette colorée et bien équilibrée.

Questions fréquentes

Comment utiliser ces couleurs dans mon projet ?

Cliquez sur « Copier le CSS » pour obtenir des propriétés personnalisées CSS prêtes à coller. Vous pouvez aussi cliquer sur un code HEX individuel pour le copier, ou exporter la palette entière en image PNG pour l'utiliser dans des outils de conception comme Figma ou Canva.

Combien de couleurs une palette doit-elle contenir ?

La plupart des designs fonctionnent mieux avec 3 à 5 couleurs : une couleur primaire, une couleur secondaire, un accent et 1 ou 2 neutres. Utilisez « + Ajouter une couleur » pour agrandir votre palette, ou retirez-en en générant avec un nombre moindre.

Puis-je verrouiller les couleurs que j'aime ?

Oui ! Cliquez sur l'icône du cadenas, sur n'importe quel échantillon. Lorsque vous générez de nouvelles palettes, les couleurs verrouillées restent en place tandis que les autres changent. C'est idéal pour construire une palette autour d'une couleur de marque spécifique.

Que sont les modes d'harmonie ?

Les modes d'harmonie génèrent des palettes basées sur les relations de la théorie des couleurs. « Analogue » utilise des teintes proches pour un effet apaisant. « Complémentaire » utilise des teintes opposées pour un contraste fort. « Triadique », « Complémentaire divisée » et « Carré » répartissent les teintes uniformément sur le cercle chromatique. « Monochrome » conserve une teinte et fait varier la luminosité · parfait pour des designs épurés et minimalistes.

Qu'est-ce qu'un générateur de palette de couleurs ?

Un générateur de palette de couleurs choisit un ensemble de couleurs qui fonctionnent visuellement ensemble, basé sur les règles de la théorie des couleurs. Vous lui donnez un indice de départ (une couleur de base, un mode d'harmonie, ou du pur hasard), et il retourne trois à cinq codes hexadécimaux qui se positionnent à des emplacements délibérés sur la roue chromatique. La sortie est prête à être déposée dans des variables CSS, un fichier Figma, un guide de marque ou un diaporama.

Les outils web modernes expriment les couleurs en hexadécimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) ou OKLCH (51.3% 0.066 233.4). Hex est le plus copiable-collable ; HSL est le plus intuitif à ajuster (baissez la luminosité pour une variante plus sombre) ; OKLCH (introduit dans CSS Color 4, supporté par les navigateurs depuis 2023) est perceptuellement uniforme, ce qui compte pour les tokens de design. Cet outil émet du hex par défaut et vous permet de copier des propriétés CSS personnalisées pour les variables et un étagement de teinte compatible OKLCH.

Toute la génération se passe dans votre navigateur. Les modes d'harmonie sont calculés à partir d'une couleur de base via rotation de teinte HSL, puis reconvertis en hex. Le bouton de verrouillage garde vos favoris pendant que le reste de la palette se réorganise. La touche Espace déclenche une nouvelle génération sans quitter la page, ce qui rend l'exploration rapide.

Ce qu'il y a dans le générateur

La barre supérieure regroupe les trois boutons qui changent la génération : un bouton Générer qui produit une nouvelle palette, un menu déroulant Mode avec sept règles d'harmonie (Aléatoire, Analogue, Complémentaire, Triadique, Split-Complémentaire, Monochromatique, Carré), et un sélecteur de couleur de Base pour amorcer les modes non aléatoires. Le bouton Ajouter une Couleur étend la palette au-delà des cinq échantillons par défaut, utile pour les systèmes de design qui ont besoin de plus de tonalités.

Chaque échantillon affiche son code hex sur une pilule sombre qui reste lisible sur n'importe quel arrière-plan. Cliquez sur le hex pour le copier. Cliquez sur le verrou pour figer l'échantillon à travers les générations futures, c'est ainsi que vous construisez une palette autour d'une couleur de marque : verrouillez la marque, régénérez, obtenez trois compagnons assortis. La barre d'actions à l'intérieur de chaque échantillon garde les icônes de verrouillage, copie et suppression dans des cibles tactiles de 32 pixels pour satisfaire la règle target-size de Lighthouse.

Sous la palette, le bloc d'export des Variables CSS se met à jour en direct avec vos couleurs actuelles comme propriétés personnalisées :root. Le bouton Exporter en Image sérialise la palette en PNG via un canvas caché, ce qui est pratique pour partager dans des revues de design ou épingler sur un moodboard. Le raccourci clavier Espace régénère instantanément, sans changement de focus requis.

Histoire et contexte

Isaac Newton décompose la lumière blanche (1666)

Les expériences de prisme d'Isaac Newton en 1666 à Cambridge ont montré que la lumière blanche est composée d'un spectre continu de couleurs. Dans Opticks (1704), il a présenté une roue à sept couleurs avec rouge, orange, jaune, vert, bleu, indigo et violet positionnés de sorte que les couleurs diamétralement opposées créaient des complémentaires harmonieuses. Chaque roue chromatique moderne descend de ce seul diagramme.

La théorie des couleurs de Goethe (1810)

La Théorie des couleurs (Theory of Colours) de Johann Wolfgang von Goethe en 1810 a reformulé la physique de Newton en termes de perception humaine. Goethe a été le premier à décrire systématiquement les images rémanentes, le contraste simultané et la chaleur psychologique du rouge par rapport à la fraîcheur du bleu. Son travail a influencé Turner, Schopenhauer et tout le domaine de la psychologie des couleurs que les écoles d'art enseignent aujourd'hui.

Johannes Itten formalise les règles d'harmonie (1961)

Johannes Itten, un enseignant du Bauhaus, a publié L'Art de la Couleur (Kunst der Farbe) en 1961. Sa roue chromatique à douze rayons et les sept contrastes (teinte, valeur, température, complémentaire, simultané, saturation, extension) sont devenus le programme standard dans les écoles d'art et de design. Les modes d'harmonie de cet outil (Analogue, Complémentaire, Triadique, Split-Complémentaire, Carré) viennent directement des chapitres d'Itten.

Système d'appariement Pantone (1963)

Lawrence Herbert chez Pantone, un imprimeur commercial M. Harris and Sons, a lancé le Système d'Appariement Pantone en 1963. Le livre de puces a donné aux designers et imprimeurs une référence numérique partagée, afin qu'une couleur de marque puisse survivre à sa reproduction sur différents papiers, écrans et tissus. La Couleur de l'Année, commencée en 2000, anime maintenant les tendances de palette à travers la mode, la décoration intérieure et le design web.

Palette web-safe et les 216 couleurs (1996)

Quand les écrans 8 bits dominaient le web naissant, Lynda Weinman a codifié une palette web-safe de 216 couleurs en 1996 pour assurer un rendu cohérent entre Mac et Windows. La palette est devenue obsolète une fois que la couleur 24 bits est devenue omniprésente (vers 2000), mais la syntaxe hexadécimale qu'elle a popularisée (#RRGGBB) reste la façon dominante d'écrire les couleurs en CSS, HTML et outils de design.

OKLCH et la couleur perceptuellement uniforme (2020)

L'article OKLab de Bjoern Ottosson en 2020 a introduit un espace colorimétrique perceptuellement uniforme qui n'a pas les incohérences de luminosité de HSL. CSS Color Level 4 (navigateurs à partir de Chrome 111, Safari 15.4, Firefox 113) a ajouté la syntaxe oklch(). L'avenir des tokens de design, du contraste de couleur accessible et de la génération de palette vit de plus en plus dans OKLCH parce que l'uniformité perceptuelle signifie que deux couleurs avec la même valeur L paraissent vraiment également lumineuses.

Flux de travail pratiques

Construire une identité de marque à partir d'une couleur

Définissez la couleur de Base sur votre hex de marque, verrouillez le premier échantillon, basculez le mode sur Analogue ou Split-Complémentaire, et cliquez sur Générer jusqu'à ce que les quatre couleurs compagnes se sentent bien. Copiez les variables CSS et collez-les dans les tokens de votre système de design. Le résultat est une palette ancrée à votre marque avec des harmonies fondées sur la théorie.

Concevoir des paires de mode sombre

Choisissez une palette Monochromatique avec votre fond de mode sombre comme base. Les cinq échantillons vous donnent fond, surface, séparateur, texte secondaire et texte primaire en luminosité graduée. Pour le mode clair, générez une palette Monochromatique séparée avec une base claire. Les deux palettes appariées via prefers-color-scheme couvrent la plupart des besoins de thème sans ajustements ad hoc.

Choisir des couleurs pour la visualisation de données

Pour les données catégoriques (graphiques à barres, segments de tarte), les palettes Triadique ou Carré vous donnent trois ou quatre teintes distinctes qui se lisent séparément sur un graphique chargé. Pour les données séquentielles (cartes de chaleur, cartes choroplèthes), utilisez Monochromatique pour varier la luminosité tout en gardant la teinte constante. Vérifiez le contraste contre l'arrière-plan du graphique ; les outils de viz de données comme Vega-Lite attendent au moins 3:1 entre catégories adjacentes.

Brouillon de palette axée sur l'accessibilité

Générez une palette, puis collez chaque paire dans un vérificateur de contraste (WebAIM, Tanaguru). Pour le texte du corps sur un arrière-plan, vous voulez au moins 4.5:1 (WCAG AA). Pour le texte large ou les composants UI, 3:1 est le seuil. Si une palette échoue, générez-en une nouvelle ou verrouillez l'échantillon de marque et laissez les autres se réorganiser pour trouver un ensemble conforme.

Exploration de moodboard

Frappez Espace à plusieurs reprises pour parcourir des dizaines de palettes aléatoires. Quand l'une attire votre œil, verrouillez le meilleur échantillon, basculez sur Analogue, et continuez à générer pour trouver des variations qui construisent dessus. La boucle barre d'espace est plus rapide que cliquer, ce qui vous permet de rester dans le mode d'exploration cerveau droit sans casser le flux.

Correspondance de couleur impression-à-écran

Quand vous avez une référence imprimée (une puce Pantone ou un échantillon de tissu), prélevez à la pipette l'équivalent numérique le plus proche et utilisez-le comme couleur de Base. Les modes d'harmonie se déploient alors autour de votre référence. Sachez que l'impression est CMJN et l'écran est RGB, donc une correspondance exacte est impossible ; le but est une palette suffisamment proche pour se lire comme la même marque.

Pièges courants

Le contraste WCAG n'est pas automatique

Une palette jolie en théorie peut quand même échouer à l'accessibilité. Les paires pastel-sur-pastel (un jaune clair sur un rose clair) ont l'air agréables mais ont moins de 2:1 de contraste. Testez toujours les paires texte-sur-fond proposées dans un vérificateur WCAG. Si la palette doit fonctionner pour le texte du corps, construisez-la d'abord autour de l'exigence de contraste, l'harmonie en deuxième.

La cécité des couleurs affecte 8% des hommes

La deutéranopie rouge-vert est la forme la plus courante de déficience de vision des couleurs, affectant environ 8% des hommes et 0.5% des femmes. Une palette Complémentaire rouge-vert devient une seule tache brune pour un spectateur deutéranopique. Pour la couleur catégorique (graphiques, badges d'état, feux de circulation), associez la couleur avec une forme, un libellé ou un motif, et testez dans un simulateur comme Stark ou Sim Daltonism.

HSL n'est pas perceptuellement uniforme

En HSL, le jaune à 50% de luminosité paraît beaucoup plus brillant que le bleu à 50% de luminosité. Le modèle HSL traite toutes les teintes également numériquement, mais pas les yeux humains. Le générateur fonctionne en HSL en interne pour la rotation de teinte, donc deux échantillons avec S et L similaires peuvent toujours avoir un poids perceptuel sensiblement différent. Pour des palettes perceptuellement équilibrées, passez à des outils OKLCH-aware (Leonardo, Open Color).

Différences de gamut entre sRGB et Display P3

Les écrans Apple modernes (depuis les iMac 2015, les MacBook Pro 2016, tous les iPhone depuis le 7) utilisent Display P3, un gamut de couleurs plus large que sRGB. Un rouge saturé qui paraît vif sur Display P3 peut paraître plus terne quand le même hex est rendu sur un moniteur plus ancien sRGB uniquement. Pour les couleurs de marque qui doivent paraître identiques partout, restez dans le plus petit gamut de sRGB.

Les codes hex ne portent pas d'alpha par défaut

Hex à trois chiffres (#abc) et à six chiffres (#aabbcc) sont opaques. Hex à huit chiffres (#aabbcc80, où 80 est 50% d'alpha) est supporté dans CSS Color 4 et les navigateurs modernes mais pas dans les outils hérités. Si vous avez besoin de transparence, utilisez rgba() ou hsla() à la place, ou tenez-vous aux couleurs opaques et laissez l'opacité parente gérer le mélange.

Dérive de calibration du sélecteur de couleur

Un moniteur non calibré peut dériver de plusieurs unités Delta-E loin d'une référence, ce qui signifie qu'une palette qui paraît immaculée sur votre écran peut paraître boueuse ou sursaturée sur celui de quelqu'un d'autre. Pour le travail critique pour la marque, calibrez avec un appareil Spyder ou i1Display. Pour la plupart du design web, la variance d'écran est inévitable ; choisissez des couleurs qui fonctionnent à travers la plage médiane.

Confidentialité et gestion des données

Tout s'exécute dans votre navigateur. Les maths d'harmonie sont en JavaScript, l'export canvas est local, et l'API presse-papiers nécessite un geste utilisateur. Nous n'envoyons pas vos codes hex où que ce soit, ne suivons pas quelles palettes vous générez, et ne stockons rien dans les cookies ou localStorage. Rechargez la page et la palette précédente a disparu.

Une fois la page chargée, le générateur fonctionne hors ligne. Vous pouvez l'utiliser dans un vol, à l'intérieur d'un proxy d'entreprise ou dans un environnement isolé. La seule action touchant le réseau est l'Export Image optionnel, qui télécharge via une URL blob, et le téléchargement lui-même ne transmet pas vos couleurs où que ce soit.

Quand ne pas utiliser ce générateur

Établir un système de design avec des tokens sémantiques

Les systèmes de design ont besoin de tokens nommés et sémantiques (color-primary-500, color-error, color-warning) avec des valeurs appariées en mode clair et sombre, des garanties de contraste, et des étapes d'échelle nommées. Utilisez un outil dédié (Material Color Tool, Open Color, Leonardo by Adobe) ou un système de gestion de tokens (Style Dictionary, Tokens Studio). Ce générateur est pour l'exploration, pas pour la conception de système.

Gestion des couleurs d'impression (CMJN, Pantone)

Les séparations de couleurs CMJN pour l'impression offset nécessitent des outils professionnels (panneau d'échantillons d'Adobe Illustrator, Pantone Connect). La conversion RGB-vers-CMJN est avec perte et les limites de couverture d'encre comptent. Si votre palette sera imprimée à grande échelle, travaillez avec la spec de couleur de l'imprimeur dès le début, pas avec un générateur hex à écran seulement.

Générer des palettes accessibles pour le texte du corps

Pour les palettes qui doivent garantir un contraste WCAG AA ou AAA à travers chaque appariement, utilisez un outil axé sur le contraste tel que Tanaguru Contrast-Finder, Adobe Leonardo, ou des outils basés sur APCA. Ce générateur suit des règles d'harmonie, pas des règles de contraste, donc une belle palette Analogue peut avoir une paire texte-sur-fond de 1.5:1 qui échoue à l'accessibilité.

Animations et interpolation de couleur

Pour les arrêts de dégradé ou les animations de couleur, vous avez besoin d'une interpolation perceptuellement uniforme en OKLCH ou LCH, pas en HSL ou hex brut. L'interpolation de dégradé CSS par défaut en sRGB produit des points médians boueux (le fameux point médian gris entre jaune et bleu). Utilisez des outils d'interpolation de couleur (chroma.js d'Erin Kissane, oklch.com) pour les transitions animées.

Plus de questions

Quand devrais-je utiliser hex vs RGB vs HSL ?

Hex est le plus compact et le plus copié, super pour les remises de design. RGB est le plus facile à calculer en code (chaque canal 0-255). HSL est le plus facile à ajuster à la main : changez la teinte pour décaler la couleur, la luminosité pour les variantes. Pour le CSS moderne, OKLCH est le plus à l'épreuve du futur pour les systèmes de design parce qu'il est perceptuellement uniforme.

Quel mode d'harmonie devrais-je choisir ?

Commencez par Analogue pour des palettes calmes et cohésives (interfaces, blogs). Utilisez Complémentaire pour des paires d'appel à l'action à fort contraste. Triadique et Carré donnent des palettes catégoriques vibrantes pour les graphiques ou les marques ludiques. Monochromatique est le meilleur pour le mode sombre et les systèmes de design tonals. Split-Complémentaire est le choix le plus sûr «audacieux mais pas choquant».

Comment vérifier l'accessibilité ?

Collez chaque paire texte-sur-fond dans WebAIM Contrast Checker, Tanaguru, ou APCA Contrast Tool. Visez au moins 4.5:1 (WCAG AA) pour le texte du corps, 3:1 pour le grand texte et les composants UI, 7:1 (WCAG AAA) pour les applications de lecture lourdes en prose. Testez avec des simulateurs de cécité des couleurs (Stark, Sim Daltonism) pour l'usage catégorique.

Puis-je exporter vers Figma ou Sketch ?

Copier CSS vous donne des propriétés personnalisées prêtes à coller. Figma et Sketch importent tous deux les codes hex directement via leur sélecteur de couleur. Le bouton Exporter en Image vous donne un PNG adapté pour les moodboards ou les captures d'écran. Pour un export amical aux tokens (format W3C Design Token Community Group), copiez les codes hex et adaptez-les dans Tokens Studio ou Style Dictionary.

Combien de couleurs devrait avoir une palette ?

Trois à cinq pour la plupart des sites web et applications : une couleur de marque primaire, un accent ou secondaire, un neutre pour le texte, et un ou deux neutres utilitaires (bordure, arrière-plan). Les systèmes de design plus grands utilisent 9 à 12 tokens nommés (primaire, secondaire, succès, avertissement, erreur, info, plus des neutres). L'outil commence à cinq mais Ajouter une Couleur l'étend.

Qu'est-ce qu'OKLCH et devrais-je l'utiliser ?

OKLCH est un espace colorimétrique perceptuellement uniforme ajouté au CSS en 2023. Contrairement à HSL, deux couleurs OKLCH avec la même valeur L paraissent vraiment également lumineuses. Pour les systèmes de design et les échelles tonales cohérentes, c'est la nouvelle meilleure pratique. Le support des navigateurs est universel dans les versions actuelles (Chrome 111+, Safari 15.4+, Firefox 113+). Pour un repli gracieux dans les navigateurs plus anciens, livrez une valeur hex sRGB aux côtés de l'oklch().

Outils associés