Générateur de nuances couleur
Générez une échelle 50-950 depuis une couleur de base pour surfaces UI, bordures, hover et dark mode.
Continuer avec cette couleur
Ce que donne cette page
- Générez teintes claires et nuances foncées depuis une couleur.
- Partez de la couleur originale marquée et vérifiez le texte et le fond réels avant d’attribuer des couleurs aux boutons ou aux textes.
- Exportez l’échelle en variables CSS, Tailwind CSS v3/v4 ou JSON.
Utile pour
- Échelles Tailwind
- Design tokens
- Hover
Comment l’utiliser
Exemple pratique
Vérifiez ensemble le texte et le fond réels. Un nom de couleur ou un numéro de nuance ne garantit pas un texte lisible.
:root {
--brand: #E24B4A; /* original at 400, not necessarily 500 */
--button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }Puis-je utiliser cela avec le générateur principal?
Oui. Commencez ici, ouvrez l’outil Chromoforge avec la même couleur de base et exportez la palette.
À quoi sert chaque palier d'une échelle 50-950 ?
Les numéros sont des identifiants. Les nuances claires conviennent souvent aux fonds et les foncées au texte, mais les rôles dépendent de la couleur de départ et du contraste du couple. Ne supposez pas que 500 est l’original ni que chaque 600 convient à un bouton.
Faut-il interpoler les nuances en HSL ou en OKLCH ?
OKLCH sépare mieux clarté perçue et chroma que HSL. Cet outil utilise des cibles de clarté fixes avec chroma variable, conserve l’original au palier le plus proche et limite les couleurs hors gamut à sRGB. Il ne garantit pas des écarts visuels égaux.