gerez des shades et tints progressifs e partir d'une couleur de base. Obtenez vos variables --color-50 e --color-950 pretes pour CSS, Tailwind, SCSS et plus.
Chaque projet a besoin de sa palette de nuances. Notre generateur vous créé un degrade harmonieux du plus fonce au plus clair, avec les formats d'export dont vous avez besoin.
Couleur de base
Nombre de nuances : 10
Teinte : 239 • Saturation : 84% • Luminosite base : 67% • Plage : ~6% e ~95% • 10 nuances
Cliquez sur une couleur pour l'utiliser comme base.
Exporter la palette
Le generateur de nuances de couleurs créé automatiquement des shades (versions foncees) et tints (versions claires) e partir d'une couleur de base. Ideal pour préparer vos design tokens, vos palettes Tailwind, ou simplement explorer les variations d'une teinte.
Contrairement aux outils qui generent des harmonies entre couleurs différentes, Volade se concentre sur les variations d'une seule couleur. Les labels CSS (--color-50 e --color-950) respectent la convention Tailwind, ce qui rend l'integration dans vos projets immediate. Et tout cela sans envoyer vos données sur un serveur.
"Generateur de nuances indispensable. Les variables CSS --color-50 e --color-900 me font gagner des heures sur chaque projet Tailwind."
Thomas B.
développeur front-end
"Je l'utilisé pour préparer mes design tokens. L'export Tailwind config colle directement dans mon projet. Un gain de temps enorme."
Sofia K.
Designer systeme
"Enfin un outil qui fait les deux : shades ET tints. La suggestion d'harmonies en bonus m'a aidee e construire ma palette complete."
Emma L.
UI Designer
Les frameworks CSS modernes comme Tailwind CSS organisent leurs palettes autour de nuances numerostees (50, 100, 200... 900, 950). Chaque nuance correspond e une luminosite différente de la même couleur de base. Notre outil vous evite de calculer manuellement ces variations il suffit de choisir votre couleur et le nombre de nuances desire.
C'est particulièrement utile pour : la création de design tokens pour votre design system, la personnalisation d'un theme Tailwind, l'exploration des possibilités d'une couleur avant de l'adopter, ou encore la préparation de palettes pour des data visualizations.
Le oe Coolors ne propose pas de labels CSS et oe 0to255 se limite e l'affichage, Volade genere des nuances pretes e l'emploi avec export multiple. Les labels --color-50 e --color-950 suivent la nomenclature Tailwind pour une integration directe.
| Volade | Coolors | Paletton | Adobe Color | ColorSpace | Tailwind CSS | 0to255 | |
|---|---|---|---|---|---|---|---|
| Nuances progressives (shades+tints) | Partiel | ||||||
| Nombre ajustable (5-20) | |||||||
| Labels --color-50 e --color-950 | |||||||
| Export CSS variables | Payant | ||||||
| Export Tailwind config | |||||||
| Export JS module | V+ | ||||||
| Export ASE (Adobe) | V+ | Payant | |||||
| Export PNG | V+ | ||||||
| Export SCSS | Payant | ||||||
| Verrouillage individuel | |||||||
| Suggestions d'harmonies | |||||||
| Noms IA | V+ | ||||||
| 100% cete client | |||||||
| Gratuit sans compte |
| Fonctionnalite | Gratuit | V+ Premium |
|---|---|---|
| Nuances + teintes progressives (5-20) | ||
| Selecteur de couleur + 12 prereglages | ||
| Affichage HEX / RGB / HSL par nuance | ||
| Copie individuelle d'une couleur | ||
| Verrouillage individuel des nuances | ||
| Couleur aleatoire | ||
| Labels CSS --color-50 e --color-950 | ||
| Suggestion d'harmonies (5 couleurs) | ||
| Copier en CSS variables | ||
| Copier en Tailwind config | ||
| Copier en SCSS / JSON | ||
| Copier en JS module | ||
| Export PNG (bande de couleurs) | ||
| Export ASE (Adobe Swatch) | ||
| Nom IA + historique des palettes | ||
| Galerie persistante (50 entrées) | ||
| Support prioritaire |
Tous les calculs de nuances sont effectués localement dans votre navigateur. Aucune donnée n'est transmise e un serveur. Les palettes sauvegardees sont stockees dans votre localStorage.
Export PNG, ASE (Adobe Swatch), JS module, noms IA et galerie persistante. decouvrir V+
11
nuances par couleur dans Tailwind CSS (50 e 950)
1678
annee de la première echelle de couleurs systematique (Wall)
85%
des designers utilisent des nuances pour leur systeme de design
Tout ce que vous devez savoir sur la génération de nuances de couleurs.
Une nuance (shade) est une version plus foncee d'une couleur, obtenue en ajoutant du noir. Une teinte (tint) est une version plus claire, obtenue en ajoutant du blanc. Notre outil genere automatiquement un degrade complet de la plus sombre e la plus claire.
V+ Premium
Exportez vos nuances comme un pro
PNG, ASE (Adobe), JS module, galerie illimitee, noms IA. Tout ce dont un développeur a besoin pour intégrer ses nuances dans ses projets.
Essayez gratuitement pendant 14 jours. Sans engagement.
Derniere mise e jour : juillet 2026. Sources : Tailwind CSS Documentation, CCICOLOR Institute, Interaction of Color (Albers), documentation WCAG 2.2 contraste des couleurs.