Générateur de palette Material Design
Choisissez une couleur de base et obtenez instantanément ses dix nuances, de la plus claire (50) à la plus foncée (900), dans l'esprit des palettes tonales popularisées par Material Design. Le calcul se fait entièrement dans votre navigateur.
Comment ça marche
L'outil considère votre couleur de base comme la nuance 500, puis calcule les nuances plus claires (50 à 400) en la mélangeant progressivement avec du blanc, et les nuances plus foncées (600 à 900) en la mélangeant avec du noir, avec des proportions croissantes à mesure qu'on s'éloigne du 500. Le résultat donne une palette tonale cohérente prête à intégrer dans un design system ou une charte de composants.
Est-ce exactement l'algorithme officiel de Material Design ?
Non, Google calcule ses palettes officielles avec un algorithme propriétaire basé sur l'espace colorimétrique HCT, plus complexe. Cet outil propose une approximation par mélange linéaire vers le blanc et le noir, qui donne un résultat visuellement proche et directement exploitable, sans prétendre reproduire au pixel près les palettes Material officielles.
Comment utiliser cette palette dans mon projet ?
Cliquez sur une nuance pour copier son code HEX, puis utilisez-la comme variable CSS ou token de design (par exemple --primary-500) : les nuances claires servent souvent aux fonds et états désactivés, la nuance 500 à la couleur principale, et les nuances foncées au texte ou aux états actifs à fort contraste.
Tous les calculs de couleur ont lieu directement dans votre navigateur, sans aucun appel à un serveur externe.