Générateur d'échelle de teintes et nuances
Transformez une couleur de marque en échelle de design system 50-900 — dix teintes et nuances avec codes hex, cliquez pour copier.
731 vues
Cliquez sur une pastille pour copier son code hex
D'une couleur à un système
Les design systems (Tailwind, Material) ne livrent jamais une seule couleur de marque — ils livrent une échelle de 50 (presque blanc) à 900 (presque noir), la couleur de marque se situant autour de 500. Les paliers clairs (tints) mélangent la base vers le blanc, les paliers foncés (shades) vers le noir. Ce générateur produit les dix paliers standard avec codes hex et variables CSS ; cliquez sur une pastille pour la copier.
Usage typique de l'échelle : 50-100 pour arrière-plans et survols, 200-300 pour les bordures, 500-600 pour boutons et liens, 700-900 pour le texte sur fond clair. Associer des paliers de la même échelle garde l'interface cohérente, et les paliers ≥700 sur ≤100 passent généralement le contraste WCAG — vérifiez la paire exacte avec notre vérificateur de contraste.
Questions fréquentes
Pourquoi ma couleur vive paraît-elle délavée dans les teintes claires ?
Le mélange vers le blanc pur réduit la saturation — c'est voulu pour les arrière-plans. Pour des teintes plus vives, augmentez la saturation de la couleur de base avant de générer.
Où placer ma couleur de marque sur l'échelle ?
Visez 500-600. Si votre couleur est très claire ou très foncée, placez-la au palier correspondant à sa luminosité ; le générateur remplit les deux directions.
Sont-ce les mêmes valeurs que celles de Tailwind ?
Pas identiques — les palettes Tailwind sont ajustées à la main teinte par teinte. Cette échelle utilise un mélange cohérent, prévisible pour des couleurs de marque personnalisées et suffisamment proche pour des projets réels.
Outils similaires
Signaler un problème
Générateur d'échelle de teintes et nuances