À propos Générateur d’échelle
Toute couleur → échelle 50–950 et export CSS
Utilisation
Transformez une couleur de base en échelle complète de 50 à 950 avec un CSS et un rendu Tailwind prêts à coller.
Générateur d’échelle
Pourquoi une échelle 50–950
Une échelle donne à une teinte assez de paliers pour les surfaces, bordures, textes et états. Le palier 50 est la teinte la plus claire, 950 la plus profonde, et 500 porte généralement la couleur de marque.
Des paliers réguliers facilitent la maintenance : l’écart entre deux valeurs voisines reste prévisible sur tous les écrans.
Comment les paliers sont construits
Chaque palier vise une luminosité en OKLCH, pour que la rampe reste perceptivement régulière au lieu de s’effondrer dans les ombres. La chroma baisse aux deux extrémités afin de garder les teintes claires nettes et les foncées riches.
Questions fréquentes
Pourquoi le palier 500 n’est-il pas exactement ma couleur ?
Le 500 est au centre de l’échelle, le défaut le plus sûr pour les boutons et liens. Votre couleur d’entrée peut être plus claire ou plus sombre et tomber sur un palier voisin.
Puis-je utiliser le CSS exporté directement ?
Oui. Le bloc définit --brand-50 à --brand-950. Renommez le préfixe selon votre design system avant de coller.
Cela fonctionne-t-il pour les gris ?
Oui. Les couleurs peu saturées produisent une rampe neutre sans dominante, utile pour le texte, les bordures et les états désactivés.