Générateur d'Échelles de Couleur
Crée des échelles de couleur professionnelles à partir d'une seule couleur de base. Parfait pour construire des design systems cohérents et des bibliothèques de composants UI avec des variations de couleur mathématiquement précises.
Que sont les échelles de couleur et pourquoi en as-tu besoin ?
Les échelles de couleur sont des variations systématiques d'une couleur de base qui créent une palette harmonieuse pour les design systems et les interfaces utilisateur. Elles fournissent la base d'une hiérarchie visuelle cohérente, d'états interactifs et d'un sens sémantique dans tout ton produit. Notre générateur professionnel d'échelles de couleur t'aide à créer ces variations mathématiquement, garantissant une harmonie et une cohérence visuelle parfaites.
Dans le design UI/UX moderne, les échelles de couleur sont essentielles pour créer des expériences utilisateur intuitives. Elles aident les utilisateurs à comprendre les relations visuelles entre les éléments, indiquent les états interactifs (survol, actif, désactivé) et établissent une hiérarchie d'information claire. Sans échelles de couleur appropriées, les interfaces peuvent sembler incohérentes, confuses ou peu professionnelles.
Notre générateur crée des échelles à 10 paliers suivant la convention standard du secteur 50-900, où 50 représente la variation la plus claire et 900 la plus sombre. Ce système est largement adopté par les grands design systems comme Material Design, Ant Design et bien d'autres.
Applications pratiques
- Design Systems: Crée des palettes de couleurs cohérentes pour des applications à grande échelle
- Bibliothèques de composants: Construis des composants UI réutilisables avec un style cohérent
- Cohérence de marque: Maintiens l'harmonie des couleurs sur tous les supports marketing
- Accessibilité: Garantis des ratios de contraste appropriés pour différents cas d'usage
Types de courbes expliqués
Courbe douce (recommandée)
Utilise des fonctions d'easing pour créer des transitions de couleur naturelles et perceptuellement uniformes
Idéale pour : la plupart des design systems, progression naturelle des couleurs
Courbe linéaire
Crée des variations linéaires mathématiquement précises entre les couleurs
Idéale pour : applications techniques, paliers de couleur prévisibles
La courbe douce produit généralement des résultats visuellement plus agréables car elle tient compte de la façon dont les humains perçoivent les différences de couleur, tandis que la courbe linéaire offre un contrôle mathématique précis.
Formats d'export et intégration
Notre générateur d'échelles de couleur prend en charge plusieurs formats d'export pour s'intégrer parfaitement à ton flux de travail de développement :
Variables CSS
Propriétés personnalisées CSS prêtes à l'emploi pour le développement web moderne
Config Tailwind
Intégration directe avec les fichiers de configuration Tailwind CSS
Format JSON
Format lisible par machine pour l'automatisation des design systems
Comment créer une échelle de couleur 50–900 pour ton design system
Tous les design systems sérieux — Tailwind, Material, Polaris — organisent les couleurs en échelles numérotées de 50 à 900. Voici pourquoi elles fonctionnent et comment construire la tienne.
Une échelle remplace « bleu clair » et « bleu plus foncé » par des tokens stables : blue-500 pour les actions primaires, blue-50 pour les arrière-plans subtils, blue-700 pour les états survol. Les chiffres rendent les couleurs prévisibles, communicables et réutilisables entre équipes.
500 est l'ancre
Ta couleur de marque, ajustée pour que le texte blanc passe le contraste AA quand nécessaire.
Une courbe, pas une droite
En dessous de 500 c'est plus clair, au-dessus plus foncé — mais les échelles perceptuellement uniformes utilisent une courbe d'easing pour que chaque palier paraisse également différent.
Saturation atténuée
Les paliers très clairs (50–100) et très sombres (800–900) ont besoin de moins de saturation pour ne pas paraître artificiels.
Carte d'utilisation typique
| Palier | Usage courant |
|---|---|
| 50–100 | Arrière-plans subtils, surfaces au survol |
| 200–300 | Bordures, badges, illustrations douces |
| 400 | Accents décoratifs, icônes |
| 500 | Action primaire de la marque |
| 600–700 | États survol / enfoncé |
| 800–900 | Texte sur fonds clairs, thèmes sombres |
Exporte-la partout
Une échelle n'est utile que si elle vit dans tes outils. Le générateur ci-dessus applique une courbe d'easing perceptive, maintient la teinte stable sur tous les paliers — à partir de l'indigo #6366F1 chaque palier partage la teinte 239°, la propriété qui fait que les échelles du bleu ou de l'émeraude semblent professionnelles plutôt que générées — et exporte en :
Variables CSS
Pour les projets vanilla.
Config Tailwind
theme.extend.colors, prête à coller.
Design tokens W3C
JSON pour les plugins Figma et les style dictionaries.
Une couleur de base, une courbe, dix paliers cohérents — c'est tout ce qu'il faut pour une palette professionnelle.