Générateur de palettes de couleurs

À propos de cet outil

Ce générateur de palettes crée des combinaisons de couleurs harmonieuses pour vos interfaces, logos ou illustrations. Choisissez une harmonie (analogues, complémentaires, triade, tétrade, monochrome, échelle de tons de 50 à 950), partez d'une couleur de votre choix ou laissez le hasard décider, verrouillez les teintes qui vous plaisent et régénérez le reste. Les couleurs sont calculées dans l'espace OKLCH : à luminosité égale, elles paraissent aussi claires les unes que les autres, ce qui donne des palettes équilibrées et des contrastes prévisibles. Vous pouvez aussi extraire une palette depuis une image, vérifier les contrastes WCAG et exporter en variables CSS, Tailwind, SCSS ou JSON, dans le format de couleur de votre choix.

Comment utiliser cet outil

1. Choisissez une harmonie et le nombre de couleurs, puis saisissez éventuellement une couleur de départ : elle devient la première de la palette.
2. Cliquez sur « Générer une palette » ou appuyez sur la barre espace pour obtenir de nouvelles couleurs.
3. Verrouillez avec le cadenas les couleurs à conserver, ou importez une image pour en extraire les couleurs dominantes.
4. Cliquez sur une valeur pour la copier ; choisissez le format (HEX, RGB, HSL, OKLCH) qui sera aussi utilisé pour l'export.
5. Vérifiez le contraste de deux couleurs, puis exportez la palette en variables CSS, Tailwind, SCSS ou JSON.

Les harmonies de couleurs : des relations sur le cercle chromatique

Placées sur un cercle chromatique, les teintes forment des figures géométriques qui donnent des combinaisons agréables à l'œil. L'outil reprend les six figures classiques :

L'harmonie ne garantit pas à elle seule une bonne palette : ce sont les proportions et les luminosités qui font la différence. C'est pourquoi l'outil fait varier la luminosité et l'intensité de chaque couleur au lieu de les fixer.

Composer une palette qui fonctionne : rôles et proportions

Une palette utilisable en interface n'est pas un assortiment de cinq jolies couleurs : chaque couleur a un rôle.

• Les neutres (fonds, textes, bordures) occupent l'essentiel de l'écran. Ils sont presque toujours légèrement teintés plutôt que gris pur.
• La couleur de marque signe l'identité : en-tête, liens, éléments sélectionnés.
• La couleur d'accent attire l'œil sur l'action principale (le bouton à cliquer). Elle doit rester rare.
• Les couleurs de statut (succès, avertissement, erreur, information) ont des teintes conventionnelles : vert, orange, rouge, bleu.

La règle empirique 60-30-10 aide à répartir les surfaces : environ 60 % pour la couleur dominante (souvent un neutre), 30 % pour la couleur secondaire, 10 % pour l'accent.

L'échelle de tons de 50 à 950

Plutôt que de choisir à la main chaque variante d'une couleur (le bouton, son survol, la bordure, le fond discret), les systèmes de design modernes (Tailwind CSS, les palettes tonales de Material Design…) partent d'une échelle de nuances d'une même teinte, du plus clair au plus sombre. Le mode « Échelle de tons » de l'outil en produit onze, de 50 à 950, calculées dans l'espace OKLCH avec une luminosité perçue qui décroît progressivement, de presque blanc à presque noir.

Si vous saisissez une couleur de départ, elle prend la place de la nuance la plus proche de sa luminosité et les autres s'organisent autour d'elle. Vérifiez ensuite avec le vérificateur de contraste que vos associations (texte 800 sur fond 50, texte blanc sur bouton 600…) atteignent 4,5 : 1. Pour un thème sombre, on inverse en général l'échelle : le fond prend les nuances 900 à 950 et le texte les nuances 100 à 200.

Pourquoi les palettes sont calculées en OKLCH

Un générateur qui tire des teintes, des saturations et des luminosités au hasard en HSL produit trop souvent des couleurs criardes ou des écarts de clarté incohérents : à luminosité HSL égale, un jaune est bien plus clair qu'un bleu. L'outil travaille donc dans l'espace OKLCH, où la luminosité est perçue : deux couleurs de même L paraissent aussi claires, quelle que soit leur teinte.

Le calcul tient compte de la gamme : toutes les teintes ne peuvent pas être aussi saturées à toutes les luminosités sur un écran sRGB (un jaune foncé très vif n'existe pas). L'outil réduit alors le chroma jusqu'à la couleur affichable la plus proche, au lieu de déformer la teinte. Résultat : des palettes cohérentes sans réglage, et des nuances qui se répartissent de manière régulière. Vous pouvez exporter les valeurs en OKLCH pour les utiliser telles quelles dans un CSS moderne, ou en HEX pour un maximum de compatibilité.

Extraire une palette d'une image

L'extraction réduit l'image à une petite taille, regroupe ses pixels par couleurs proches (une quantification), puis retient les groupes les plus nombreux en écartant ceux qui ressemblent à une couleur déjà choisie. C'est une méthode simple et rapide qui convient bien pour tirer une palette d'une photo de produit, d'un logo ou d'une illustration.

• Les images avec quelques couleurs franches (logo, illustration à plat) donnent d'excellents résultats ; une photo très nuancée donnera plutôt des tons moyens.
• Les couleurs obtenues sont des moyennes : elles ne correspondent pas forcément à une couleur précise de l'image. Pour récupérer l'exacte couleur d'un pixel, utilisez la pipette du convertisseur de couleurs.
• L'image n'est pas envoyée à un serveur : elle est lue dans votre navigateur.

Accessibilité : contraste et daltonisme

Une palette est « bonne » si elle reste lisible pour tous. Deux vérifications s'imposent :

• Le contraste. Selon les WCAG, le texte courant exige un rapport de contraste d'au moins 4,5 : 1 avec son fond (3 : 1 pour un grand texte, 7 : 1 pour le niveau AAA). Le vérificateur intégré calcule ce rapport pour deux couleurs de la palette, et chaque carte indique si le texte noir ou le texte blanc y est le plus lisible.
• Le daltonisme. En France, environ 8 % des hommes et 0,4 % des femmes ont une vision des couleurs différente, le plus souvent entre le rouge et le vert. Ne transmettez donc jamais une information par la seule couleur : doublez-la d'une icône, d'un libellé ou d'un motif (un champ en erreur porte un message, pas seulement un contour rouge). Choisissez des couleurs qui diffèrent aussi par leur luminosité.

De la palette au code : bonnes pratiques

1. Définissez des variables CSS une seule fois, à la racine : --couleur-600: #b66229;. Pour changer de thème ou de couleur de marque, il suffit alors de modifier ces valeurs.
2. Nommez par rôle, pas par couleur. --action et --texte-discret survivent à un changement de teinte ; --orange devient faux le jour où la marque devient verte. Gardez l'échelle brute (--couleur-600) comme couche basse et les rôles par-dessus.
3. Prévoyez le thème sombre avec color-scheme et une série de variables redéfinies : les couleurs ne s'inversent pas mécaniquement, il faut contrôler chaque contraste.
4. Limitez le nombre de teintes. Une marque, un accent, des neutres et quatre statuts suffisent à presque toutes les interfaces.
5. Exportez dans le format de votre outil : variables CSS, configuration Tailwind (v3 ou bloc @theme de la v4), variables SCSS ou JSON pour un système de design.

Pour tester la lisibilité d'un texte sur une couleur, utilisez le convertisseur de couleurs ; pour passer d'une nuance à l'autre en douceur, le générateur de dégradés CSS.

Questions fréquentes