Générateur de palette Material Design

Le générateur conserve votre couleur au niveau 500, puis calcule les niveaux clairs de 50 à 400 et foncés de 600 à 900. Chaque résultat est fourni au format #RRGGBB en majuscules, prêt à être copié dans du CSS, un fichier de thème ou une chaîne de jetons. Le calcul est immédiat, reproductible et indépendant de tout service réseau ou choix chromatique subjectif.

Choisissez une couleur de base fiable

Saisissez une couleur hexadécimale à six chiffres précédée du dièse, par exemple #3F51B5. Cette valeur devient la nuance 500, point d'ancrage visuel de la gamme produite. Un format strict élimine toute ambiguïté entre les notations abrégées, celles qui comportent un canal alpha et les valeurs sans dièse. Avant de choisir la base, déterminez où elle apparaîtra le plus souvent. Une couleur de marque destinée aux boutons doit parfois offrir un contraste suffisant sur des surfaces claires comme sombres, tandis qu'une couleur décorative de graphique doit surtout se distinguer des séries voisines. Le générateur ne modifie pas discrètement l'ancrage pour atteindre un objectif de contraste : le maintien exact du niveau 500 garantit que la palette reste liée à votre choix. Les faibles numéros sont de plus en plus clairs et les grands numéros, plus foncés. Les valeurs finales, normalisées sur six chiffres en majuscules, s'intègrent directement aux propriétés CSS, fichiers JSON de jetons, thèmes de composants ou documents. Toute chaîne non valide est refusée plutôt qu'interprétée approximativement.

Comprenez la construction de la gamme

La palette reprend les niveaux Material habituels : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900. Le niveau 500 correspond exactement à la base transmise. Pour les valeurs claires, chaque canal rouge, vert et bleu est mélangé au blanc selon des proportions fixes, la nuance 50 recevant l'éclaircissement maximal. Pour les valeurs foncées, les mêmes canaux sont mélangés au noir, avec l'assombrissement maximal au niveau 900. Chaque canal est arrondi à l'entier le plus proche, puis reconverti en hexadécimal. Cette interpolation RGB fixe rend l'algorithme transparent et déterministe : une entrée identique produit toujours les dix mêmes valeurs dans le même ordre. Elle évite aussi toute dépendance cachée envers les profils d'écran, la gestion des couleurs du navigateur, une API réseau ou les réglages variables des logiciels de création. Cette gamme constitue une famille tonale pratique inspirée de Material, sans prétendre que chaque intervalle possède une luminosité perçue identique. La perception humaine varie selon la teinte ; pour des exigences perceptuelles strictes, utilisez ce résultat comme base stable et examinez-le dans son contexte réel.

Préservez l'accessibilité lors de l'utilisation

Associez les valeurs obtenues à des jetons sémantiques au lieu de disperser les numéros de nuance dans toute l'application. Un thème peut réserver une nuance à l'arrière-plan interactif, une autre au survol et une valeur plus claire à une surface sélectionnée. Cette correspondance centralisée dans une couche de jetons permet d'ajuster le système visuel sans modifier chaque composant. Testez toujours les combinaisons de premier plan et d'arrière-plan avec la taille et la graisse de police réellement publiées. Le numéro d'une nuance ne garantit aucun rapport de contraste précis, et deux couleurs de base peuvent donner des résultats d'accessibilité très différents au même niveau. Vérifiez séparément les indicateurs de focus, les commandes désactivées, les visualisations de données, le mode sombre et les réglages à contraste élevé. La palette accélère l'exploration en proposant rapidement des candidats cohérents, mais le choix définitif doit tenir compte du contexte et du sens. N'utilisez jamais la couleur comme seul signal d'erreur ou d'état. Lorsque les équipes de conception et de développement partagent la gamme, consignez ensemble la base originale et les valeurs calculées afin que toute évolution reste reproductible.