Générateur de nuances
Donnez une couleur de marque et dix paliers sont construits, plus clairs (teintes) et plus sombres (ombres). La sortie arrive sous la forme 50 · 100 · … · 900 qu’attendent Tailwind et la plupart des design systems.
🎨 Tout tourne dans votre navigateur. Rien à installer, aucun compte.
À quoi sert chaque palier
- · 50~200 Fonds, rehauts discrets, états désactivés
- · 400~600 Boutons et liens — la couleur de marque elle-même
- · 700~900 États pressés et texte sur fond sombre
- La note à droite de chaque ligne indique si le texte blanc ou noir franchit le seuil d’accessibilité (4,5:1) sur ce fond.
Ce que fait cet outil
- Dix paliers de 50 à 900
- HEX et HSL par palier
- Indique si le texte blanc ou noir se lit
- Copier l’ensemble en variables CSS
Autres outils de couleur
Générateur de palettes de couleursSortir les couleurs qui vont avec une couleur de base, par règleMélangeur de couleursTrouver la couleur entre deux couleursGénérateur de couleurs aléatoiresVerrouiller celles qui plaisent, relancer le resteVérificateur de contrasteVérifier la lisibilité du texte selon WCAG
Les couleurs peuvent paraître un peu différentes selon votre écran et son profil couleur.