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 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.
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 theme.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.
Questions fréquentes sur notre
génerateur 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.
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