Générateur
de palette
de couleurs.
Créez des palettes complètes style Tailwind CSS ou Material Design à partir d'une seule couleur. Export CSS, Tailwind config et JSON.
Violet
Tailwind CSS reproduit la courbe officielle, Material suit les specs Google, Linéaire répartit uniformément.Décalage de contraste pour déplacer le point de pivot et le Nombre de nuances pour le nombre de teintes (3 à 21).Variables CSS, Tailwind config, JSON ou téléchargez un SVG de la palette.ou votre charte graphique ? Contactez-nous
La plupart des générateurs de palettes créent 5 couleurs harmonieuses. Cet outil fait autre chose : il prend une seule couleur et calcule une échelle complète de nuances calibrées pour le développement front-end. Le résultat s'exporte dans votre tailwind.config.js, vos variables CSS ou votre design system JSON. Rien à ajuster manuellement.
Comprendre les palettes de couleur
Tailwind CSS : la référence
Tailwind CSS utilise une échelle de 50 à 950 avec des nuances soigneusement calibrées. La teinte 500 est la couleur de base, les valeurs inférieures sont plus claires et les supérieures plus sombres. Chaque étape suit une courbe perceptuelle pour un rendu harmonieux.
Material Design : le système Google
Material Design organise les couleurs en palettes primaires et secondaires. Chaque couleur se décline de 50 (très clair) à 900 (très sombre) avec des variantes d'accentuation. Le système garantit l'accessibilité et la cohérence visuelle sur tous les supports.
Contrast Shift : affiner la courbe
Le paramètre Contrast Shift permet de déplacer le point de pivot de la palette. Une valeur positive accentue les écarts dans les teintes sombres, une valeur négative dans les teintes claires. Utile pour adapter la palette à un design sombre ou clair.
Exporter et utiliser
Exportez votre palette en variables CSS (--color-500), en configuration Tailwind CSS, en JSON pour vos outils de design ou en SVG. Les valeurs sont directement utilisables dans votre code.
Pourquoi une palette en 11 nuances plutôt qu'en 5 couleurs ?
Coolors, Adobe Color et la plupart des générateurs classiques travaillent sur des harmonies. Ils trouvent des couleurs qui vont bien ensemble. C'est utile pour choisir une identité visuelle. Mais quand vous intégrez une couleur dans un projet Tailwind CSS ou un design system, vous avez besoin d'autre chose : une échelle de nuances cohérente sur une seule teinte, de la plus claire à la plus sombre.
Tailwind CSS utilise une échelle de 50 à 950, soit 11 valeurs dont chaque pas suit une courbe de luminosité perceptuelle. Si vous créez ces 11 valeurs manuellement dans un color picker, vous obtiendrez soit des palettes ternes (distribution linéaire), soit des valeurs incohérentes qui cassent le contraste entre vos composants. C'est le problème que ce générateur résout en automatisant le calcul selon les spécifications officielles Tailwind et Material Design.
Tailwind CSS, Material Design ou linéaire : quelle différence ?
L'algorithme que vous choisissez détermine la courbe de distribution des nuances, pas uniquement les valeurs de luminosité, mais aussi la façon dont les contrastes se répartissent sur l'échelle.
L'algorithme Tailwind CSS reproduit la courbe officielle des palettes Tailwind (slate, blue, emerald...). La nuance 500 correspond à votre couleur de base. Les valeurs 50 à 400 sont progressivement plus claires, 600 à 950 progressivement plus sombres, avec une accélération du contraste dans les valeurs hautes. C'est le choix par défaut si votre projet utilise Tailwind.
L'algorithme Material Design suit les spécifications Google. L'échelle va de 50 à 900 avec une distribution différente : la couleur de base atterrit généralement sur la valeur 500, mais la courbe de luminosité est plus linéaire que Tailwind. À privilégier si vous travaillez sur une interface Android, Flutter ou un design system Google-compatible.
L'algorithme linéaire répartit les nuances uniformément entre blanc et noir, sans courbe perceptuelle. Moins sophistiqué, mais utile pour valider rapidement un concept ou générer des palettes neutres (grays, slates).
Export CSS, Tailwind config et JSON : comment utiliser les résultats
CSS Variables génère un bloc --color-50 à --color-950 à coller dans votre feuille de style globale. Utilisable avec var(--color-500) dans n'importe quel projet web, indépendamment du framework.
Tailwind config génère le bloc colors à intégrer dans votre tailwind.config.js sous thème.extend.colors. Vous choisissez le nom de la couleur (primary, brand, accent...) et les classes Tailwind sont disponibles : bg-primary-500, text-primary-200, border-primary-700.
JSON est importable dans Figma via les plugins de tokens (Style Dictionary, Token Studio). C'est le format adapté si votre workflow fait circuler les design tokens entre Figma et votre codebase.
Aucune donnée n'est transmise au serveur. Tout le calcul s'effectue dans votre navigateur. L'outil fonctionne hors ligne une fois la page chargée.
Le paramètre Contrast Shift : à quoi ça sert vraiment ?
Le Contrast Shift déplace le point de pivot de la courbe de luminosité. Par défaut à 0, la nuance 500 correspond exactement à votre couleur de base. En dark mode, vous voudrez souvent que les nuances utilisées pour le texte (800 à 950) aient un contraste plus marqué. Un Contrast Shift positif compresse les valeurs claires et étale les sombres pour atteindre cet objectif. À l'inverse, pour un design sur fond blanc, un shift négatif donne plus de granularité dans les nuances claires (50 à 300), utiles pour les arrière-plans de cartes et les états hover.
Questions fréquentes sur notre générateur de palette de couleurs
Quelle différence entre ce générateur et Coolors ou Adobe Color ?
Peut-on utiliser ce générateur pour un projet Figma ?
Le générateur respecte-t-il les standards d'accessibilité WCAG ?
À quoi sert le Contrast Shift ?
Les couleurs sont-elles envoyées au serveur ?
Comment intégrer la palette dans mon projet Tailwind ?
tailwind.config.js sous thème.extend.colors. Les noms de classes (bg-primary-500, text-primary-200) seront automatiquement générés.La plupart des générateurs de palettes créent 5 couleurs harmonieuses. Cet outil fait autre chose : il prend une seule couleur et calcule une échelle complète de nuances calibrées pour le développement front-end. Le résultat s’exporte dans votre tailwind.config.js, vos variables CSS ou votre design system JSON. Rien à ajuster manuellement.
Pourquoi une palette en 11 nuances plutôt qu’en 5 couleurs ?
Coolors, Adobe Color et la plupart des générateurs classiques travaillent sur des harmonies. Ils trouvent des couleurs qui vont bien ensemble. C’est utile pour choisir une identité visuelle. Mais quand vous intégrez une couleur dans un projet Tailwind CSS ou un design system, vous avez besoin d’autre chose : une échelle de nuances cohérente sur une seule teinte, de la plus claire à la plus sombre.
Tailwind CSS utilise une échelle de 50 à 950, soit 11 valeurs dont chaque pas suit une courbe de luminosité perceptuelle. Si vous créez ces 11 valeurs manuellement dans un color picker, vous obtiendrez soit des palettes ternes (distribution linéaire), soit des valeurs incohérentes qui cassent le contraste entre vos composants. C’est le problème que ce générateur résout en automatisant le calcul selon les spécifications officielles Tailwind et Material Design.
Tailwind CSS, Material Design ou linéaire : quelle différence ?
L’algorithme que vous choisissez détermine la courbe de distribution des nuances, pas uniquement les valeurs de luminosité, mais aussi la façon dont les contrastes se répartissent sur l’échelle.
L’algorithme Tailwind CSS reproduit la courbe officielle des palettes Tailwind (slate, blue, emerald…). La nuance 500 correspond à votre couleur de base. Les valeurs 50 à 400 sont progressivement plus claires, 600 à 950 progressivement plus sombres, avec une accélération du contraste dans les valeurs hautes. C’est le choix par défaut si votre projet utilise Tailwind.
L’algorithme Material Design suit les spécifications Google. L’échelle va de 50 à 900 avec une distribution différente : la couleur de base atterrit généralement sur la valeur 500, mais la courbe de luminosité est plus linéaire que Tailwind. À privilégier si vous travaillez sur une interface Android, Flutter ou un design system Google-compatible.
L’algorithme linéaire répartit les nuances uniformément entre blanc et noir, sans courbe perceptuelle. Moins sophistiqué, mais utile pour valider rapidement un concept ou générer des palettes neutres (grays, slates).
Export CSS, Tailwind config et JSON : comment utiliser les résultats
CSS Variables génère un bloc --color-50 à --color-950 à coller dans votre feuille de style globale. Utilisable avec var(--color-500) dans n’importe quel projet web, indépendamment du framework.
Tailwind config génère le bloc colors à intégrer dans votre tailwind.config.js sous theme.extend.colors. Vous choisissez le nom de la couleur (primary, brand, accent…) et les classes Tailwind sont disponibles : bg-primary-500, text-primary-200, border-primary-700.
JSON est importable dans Figma via les plugins de tokens (Style Dictionary, Token Studio). C’est le format adapté si votre workflow fait circuler les design tokens entre Figma et votre codebase.
Aucune donnée n’est transmise au serveur. Tout le calcul s’effectue dans votre navigateur. L’outil fonctionne hors ligne une fois la page chargée.
Le paramètre Contrast Shift : à quoi ça sert vraiment ?
Le Contrast Shift déplace le point de pivot de la courbe de luminosité. Par défaut à 0, la nuance 500 correspond exactement à votre couleur de base. En dark mode, vous voudrez souvent que les nuances utilisées pour le texte (800 à 950) aient un contraste plus marqué. Un Contrast Shift positif compresse les valeurs claires et étale les sombres pour atteindre cet objectif. À l’inverse, pour un design sur fond blanc, un shift négatif donne plus de granularité dans les nuances claires (50 à 300), utiles pour les arrière-plans de cartes et les états hover.
Comment créer votre palette pas à pas
Commencez par définir la couleur qui servira de base à votre interface ou à votre identité visuelle. Elle peut correspondre à une couleur de marque, à une couleur d’accent ou à une teinte déjà utilisée dans votre projet.
- Saisissez ou choisissez votre couleur de départ dans l’outil.
- Sélectionnez l’algorithme adapté à votre contexte : Tailwind CSS, Material Design ou linéaire.
- Ajustez le Contrast Shift seulement si vous avez besoin de nuances plus fines dans les tons clairs ou plus marquées dans les tons sombres.
- Vérifiez la cohérence de l’échelle générée, du niveau le plus clair au plus foncé.
- Copiez le format dont vous avez besoin : variables CSS, configuration Tailwind ou JSON.
Si votre couleur provient d’une charte existante, gardez le même nom dans vos fichiers. Cela facilite la lecture du code et évite les ambiguïtés entre design et intégration. Pour structurer vos choix de couleurs à l’échelle d’une marque, vous pouvez aussi consulter notre guide sur la charte graphique.
Cas d’usage concrets
Pour un site vitrine, la palette générée peut servir à décliner une couleur principale sur plusieurs éléments : boutons, liens, bordures, fonds discrets ou états au survol. Vous conservez une même teinte, tout en ayant assez de nuances pour hiérarchiser l’interface.
Pour une application web, l’échelle complète est utile lorsque plusieurs composants partagent la même couleur. Une nuance claire peut convenir à un fond de badge, une nuance intermédiaire à un bouton, une nuance sombre à un texte ou à une bordure. Vous évitez ainsi de choisir chaque variante au hasard.
Pour un design system, le format JSON aide à conserver une base commune entre les maquettes et le code. Les nuances peuvent être nommées et réutilisées avec plus de régularité, notamment lorsque plusieurs personnes interviennent sur le même projet.
Pour un projet Tailwind CSS, l’export dédié permet de retrouver directement vos classes de couleur dans l’environnement de développement. C’est pratique pour garder une logique cohérente entre les composants, sans recréer manuellement les valeurs une par une.
Après avoir appliqué votre palette dans une interface, pensez à contrôler la lisibilité des textes et des éléments importants. Vous pouvez le faire avec le vérificateur de contraste, surtout si vous utilisez des nuances claires pour les arrière-plans ou des nuances sombres pour le texte.
Bien intégrer votre palette dans un projet
Une palette est plus simple à utiliser quand chaque nuance a un rôle. Avant de l’intégrer, définissez les usages principaux : couleur d’action, fond léger, bordure, état actif, état secondaire. Cette étape limite les variations inutiles et rend l’interface plus homogène.
Vous pouvez aussi associer votre échelle à une règle de répartition visuelle. Par exemple, une couleur peut être très présente en arrière-plan, tandis qu’une autre reste réservée aux appels à l’action. Pour approfondir cette logique, consultez notre article sur la règle 60-30-10 appliquée aux couleurs.
Si vous récupérez une couleur dans un autre format avant de l’utiliser, le convertisseur de couleur peut vous aider à obtenir la valeur adaptée à votre projet.
Questions fréquentes sur notre
générateur de palette de couleurs
Coolors et Adobe Color génèrent des harmonies de 4 à 5 couleurs distinctes qui fonctionnent bien ensemble. Idéal pour choisir une palette d’identité visuelle. Ce générateur fait autre chose : il prend une seule couleur et calcule une échelle de 3 à 21 nuances calibrées pour une intégration directe dans un design system ou une configuration Tailwind CSS. Les deux approches sont complémentaires : Coolors pour trouver vos couleurs de marque, ce générateur pour les transformer en échelle utilisable en développement.
Oui. Exportez au format JSON puis importez via un plugin de design tokens dans Figma (Token Studio, Style Dictionary). Les nuances seront disponibles comme variables de couleur dans vos composants. L’export SVG permet aussi de créer une page de documentation couleur dans votre design system.
Le générateur calcule des palettes visuellement cohérentes mais ne vérifie pas automatiquement les ratios de contraste WCAG. Pour valider l’accessibilité, utilisez les nuances 600 à 900 pour le texte sur fond blanc (ratio minimum 4,5:1 pour le texte normal) et les nuances 50 à 200 pour les arrière-plans. Le convertisseur de couleurs Osmova propose dans sa liste d’outil un vérificateur de contraste si vous avez besoin de valider des combinaisons spécifiques.
Oui, si vous disposez déjà d’une couleur de base. L’outil vous aide à créer des nuances cohérentes autour de cette teinte, utiles pour décliner votre univers visuel sur le web, dans une interface ou dans un design system.
La nuance centrale est souvent un bon point de départ, car elle correspond à la couleur de base dans l’échelle. Ensuite, adaptez selon le fond, la lisibilité du texte et le niveau de contraste attendu dans votre interface.
Non. Gardez la valeur par défaut si le rendu vous convient. Ajustez-la seulement si vous avez un besoin précis, par exemple renforcer les tons sombres pour un mode sombre ou obtenir plus de nuances claires pour des fonds subtils.
Choisissez les variables CSS pour un projet web classique, l’export Tailwind pour un projet basé sur Tailwind CSS, et le JSON si vous travaillez avec des design tokens ou un flux entre design et développement.
Pour aller plus loin
Autres outils gratuits
Nos guides
Les palettes sont générées directement dans votre navigateur via JavaScript. Aucune donnée n'est transmise ni conservée par Osmova. Les algorithmes Tailwind CSS et Material Design sont des approximations basées sur les spécifications publiques. Conditions d'utilisation