palette Générateur d'échelle de teintes et nuances star

Comment la palette est construite

La théorie des couleurs définit trois façons de modifier systématiquement une teinte de base dans le modèle HSL : la teinte claire (tint) (mélange vers le blanc, augmentant la Luminosité — la couleur paraît plus pâle), la nuance foncée (shade) (mélange vers le noir, diminuant la Luminosité — la couleur paraît plus sombre et plus riche), et le ton (tone) (mélange vers le gris, réduisant la Saturation avec une Luminosité à peu près inchangée — la couleur paraît mate ou « poussiéreuse »). Ce générateur produit la moitié teinte/nuance de ce trio : à partir de votre couleur de base, il fait varier la Luminosité vers le blanc pour les paliers les plus clairs et vers le noir pour les paliers les plus foncés, produisant l'échelle en dix étapes 50-900 utilisée par des design systems comme Tailwind et Material, avec la couleur de marque d'origine ancrée autour de l'étape 500.

Un exemple concret : en partant d'un bleu autour de hsl(217, 91%, 60%), l'étape 50 se retrouve près de hsl(217, 91%, 97%) — presque blanc, avec juste un soupçon de teinte restant — tandis que l'étape 900 se retrouve près de hsl(217, 60%, 20%) — très sombre, la saturation se compressant à mesure que la couleur approche du noir. Chaque palier reçoit à la fois un code hex et une variable CSS prête à l'emploi ; cliquer sur n'importe quel échantillon le copie.

L'intérêt pratique de générer une palette complète plutôt que d'estimer à l'œil une poignée de nuances est la cohérence : chaque palier est dérivé de la même teinte de base avec la même règle de mélange, si bien qu'une bordure de carte à l'étape 200 et un état de survol à l'étape 100 donnent toujours l'impression d'appartenir à la même famille de couleurs, même des mois plus tard, quand un autre designer ou un autre composant a besoin d'une nouvelle nuance de la même couleur de marque.

Ce qu'il faut savoir

• Teinte claire, nuance foncée et ton ne sont pas la même opération : cet outil n'effectue que la teinte claire et la nuance foncée — des changements de Luminosité. Un vrai ton réduit la Saturation en maintenant la Luminosité à peu près fixe, produisant une version mate de la couleur plutôt qu'une version plus claire ou plus sombre ; cette manipulation distincte n'est pas ce que ce générateur applique.
• Où utiliser chaque palier : 50-100 pour les arrière-plans de page et les remplissages au survol, 200-300 pour les bordures et séparateurs, 500-600 pour les boutons et liens (la couleur de marque elle-même), 700-900 pour le texte de corps sur fonds clairs.
• Le contraste n'est pas automatique : associer une étape ≥700 à une étape ≤100 franchit généralement le contraste WCAG AA, mais « généralement » n'est pas « toujours » — vérifiez la paire exacte que vous prévoyez de publier avec un vérificateur de contraste dédié.
• Pas identique aux palettes propres à Tailwind : les couleurs intégrées de Tailwind sont ajustées à la main pour chaque teinte, par conception, tandis que ce générateur applique une formule de mélange cohérente unique à n'importe quelle entrée — prévisible pour des couleurs de marque personnalisées, suffisamment proche pour de vraies interfaces.
• Le mode sombre inverse généralement la palette : un arrière-plan qui utilise l'étape 50 en mode clair correspond souvent à quelque chose proche de l'étape 900 en mode sombre, et vice versa — générer la palette complète en amont signifie que les deux thèmes sont déjà couverts.