Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
À propos de cet outil
L'Extracteur de Palette de Couleurs génère une échelle de 10 étapes pour systèmes de design à partir de n'importe quelle couleur de base, correspondant aux conventions de nuances 50–900 utilisées par Tailwind CSS, Material Design et frameworks similaires.
Chaque échantillon de l'échelle affiche ses valeurs hex, RGB et HSL. La couleur du texte s'ajuste automatiquement au blanc ou au sombre selon la luminance.
Comment utiliser
- Choisissez une couleur de base avec le sélecteur ou saisissez une valeur hex.
- L'échelle de 10 étapes (50–900) se génère instantanément, couvrant toute la plage de luminosité.
- Utilisez les valeurs hex, RGB ou HSL dans votre système de design ou vos variables CSS.
Cas d'utilisation
Les équipes de design génèrent des échelles de couleurs complètes pour les extensions de config Tailwind ou les propriétés CSS personnalisées. Les développeurs frontend construisent des composants UI accessibles.
Questions fréquentes
- En quoi cette échelle diffère-t-elle des « nuances » d'autres outils ? — Cet outil génère une échelle fixe de 10 étapes (50, 100, 200, … 900) ancrée à des valeurs de luminosité spécifiques, suivant les conventions courantes des systèmes de design.
- La modification de la saturation affecte-t-elle l'échelle ? — La saturation de votre couleur de base est préservée à toutes les étapes — seule la luminosité change.
- Puis-je utiliser ces couleurs directement dans Tailwind CSS ? — Oui. Copiez les valeurs hex de chaque niveau de nuance et ajoutez-les à tailwind.config.js sous theme.extend.colors avec les numéros de nuance comme clés.