Une échelle de nuances est une série de variantes d'une même couleur, de la plus claire à la plus foncée. Cet outil crée 11 paliers de 50 à 950, la convention utilisée par Tailwind CSS et de nombreux design systems.
Mis à jour le
Cliquez sur un HEX pour le copier · cadenas pour le garder
Chaque cellule affiche la couleur de la colonne en texte sur le fond de la ligne.
Cliquez sur une nuance pour copier son HEX.
Enregistrées uniquement dans ce navigateur. Cliquez sur une palette pour la charger.
Elle fournit des variantes cohérentes d'une couleur pour les fonds, les bordures, les états de survol et le texte, sans choisir chaque nuance à la main. La teinte reste la même et la luminosité change palier par palier.
C'est le palier central, proche de votre couleur, mais recalculé avec une luminosité fixe pour que toutes les échelles restent cohérentes. Si vous avez besoin du HEX exact, utilisez-le tel quel à côté de l'échelle.
Collez les valeurs dans theme.extend.colors avec les clés 50 à 950. Utilisez ensuite des classes comme bg-marque-100 ou text-marque-900.
