Générateur de palette en dégradé
Créez une gamme de couleurs fluide à partir d'une couleur de base ou entre plusieurs couleurs. Copiez chaque nuance, obtenez le CSS du dégradé et exportez en CSS, Tailwind, SCSS ou JSON.
Chargement de Générateur de palette en dégradé…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de palette en dégradé
- 1
Ouvrez Générateur de palette en dégradé sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Un design system a besoin de plusieurs nuances pour chaque couleur : des teintes claires pour les fonds, des tons moyens pour les boutons, des nuances foncées pour le texte et les états de survol. Ce générateur de palette en dégradé crée une gamme de couleurs fluide à partir d'une couleur de base, ou une série d'étapes mélangées entre les couleurs de votre choix, et l'exporte directement dans votre code.
Comment créer une gamme de couleurs
- Choisissez une couleur de base.
- Choisissez le mode : scale pour des nuances claires à foncées d'une seule couleur, ou steps pour mélanger plusieurs couleurs que vous ajoutez.
- Ajoutez ou retirez des couleurs et réglez le nombre d'étapes.
- Nommez la palette, cliquez sur une pastille pour copier son code HEX et copiez le CSS du dégradé.
- Exportez la palette en variables CSS, en couleur Tailwind, en variables SCSS ou en JSON.
Utiliser une gamme dans un design system
Une convention courante, utilisée par Tailwind, nomme les nuances de 50 (la plus claire) à 900 ou 950 (la plus foncée) :
- 50 à 100 : fonds de page et de cartes.
- 200 à 300 : bordures et remplissages discrets.
- 500 à 600 : boutons principaux et liens.
- 700 à 900 : états de survol et texte sur fond clair.
Conseils
- Vérifiez le contraste de chaque nuance utilisée derrière du texte avec le vérificateur de contraste.
- Gardez des étapes régulières pour que les états de survol et actifs paraissent cohérents.
- Mélangez des teintes proches pour des dégradés naturels ; des teintes éloignées peuvent passer par le gris.
- Nommez les couleurs selon leur rôle dans le code (primary, accent) pour qu'un changement d'identité ne touche qu'un seul endroit.
Pour des combinaisons harmonieuses de couleurs différentes, utilisez le générateur de palette de couleurs. Pour créer un seul fond en dégradé, essayez le générateur de dégradés CSS.
Questions fréquentes
Qu'est-ce qu'une gamme de couleurs ?
Une série de nuances d'une couleur, du clair au foncé, utilisée de façon cohérente pour les fonds, les bordures, les boutons et le texte.
Puis-je exporter une gamme de couleurs Tailwind ?
Oui. Choisissez l'export Tailwind pour obtenir une entrée de couleur à coller dans votre configuration Tailwind.
Quelle différence entre les modes scale et steps ?
Scale crée des nuances plus claires et plus foncées d'une couleur de base. Steps mélange plusieurs couleurs que vous choisissez, en autant d'étapes que vous le définissez.
Comment copier une seule couleur ?
Cliquez sur une pastille pour copier son code HEX.
Quels formats puis-je exporter ?
Variables CSS, configuration Tailwind, variables SCSS et JSON, plus le CSS du dégradé.
Est-ce gratuit ?
Oui, sans inscription.