Outil couleur pratique
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.
Ce que donne cette page
- Générez teintes claires et nuances foncées depuis une couleur.
- Utilisez 50-200 pour fonds, 500-600 pour actions, 800-950 pour dark UI.
- Exportez en CSS, Tailwind, SCSS ou JSON.
Utile pour
- Échelles Tailwind
- Design tokens
- Hover
Comment l’utiliser
Générateur paletteCréez des palettes accessibles, vérifiez le contraste WCAG, extrayez des couleurs d'images et exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.Contrôle WCAGVérifiez le contraste entre texte et arrière-plan selon WCAG AA et AAA, testez des paires réelles et choisissez des couleurs lisibles.Extracteur imageExtrayez les couleurs dominantes des images PNG, JPG ou WebP dans le navigateur et créez des palettes exportables.
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 ?
De 50 à 200 pour les fonds de page et de carte, 300 et 400 pour les bordures et séparateurs, 500 et 600 pour les boutons et liens, de 700 à 950 pour le texte sur surfaces claires et les fonds en mode sombre. C'est la stabilité de ces rôles qui rend une échelle réutilisable.
Faut-il interpoler les nuances en HSL ou en OKLCH ?
OKLCH. En HSL les paliers de clarté sont irréguliers, car la même valeur numérique paraît très différente en jaune et en bleu. En OKLCH les paliers sont perceptuellement réguliers : l'écart de 100 à 200 se ressent comme celui de 700 à 800.