Qu'est-ce que Sélecteur de couleurs Material Design ?

Material Design Color Picker met à votre disposition la palette de couleurs Material Design complète avec toutes les couleurs primaires et leurs variantes de teinte (50 à 900). Cliquez sur un échantillon pour copier la valeur en HEX, RGB ou HSL, puis vérifiez l'accessibilité avec l'outil de contraste WCAG intégré.

La palette couvre les 19 teintes principales (Red à Brown) avec les nuances 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ainsi que les accents A100, A200, A400, A700 lorsque Google les définit. Chaque case affiche la valeur HEX exacte, et le panneau des couleurs sélectionnées permet de constituer la palette d'un projet, à copier ou télécharger.

Comment utiliser

1. Parcourez la grille de couleurs affichant toutes les couleurs primaires Material Design — Rouge, Rose, Violet, Violet foncé, Indigo, Bleu et bien d'autres.
2. Cliquez sur une couleur primaire pour afficher ses variantes de teinte, de la plus claire (50) à la plus foncée (900), y compris les tons d'accent (A100–A700).
3. Cliquez sur une teinte pour copier sa valeur dans le format choisi (HEX, RGB ou HSL), ajoutez des teintes au panneau Couleurs Sélectionnées, puis téléchargez la palette en CSS, SCSS, config Tailwind ou JSON pour votre projet.

Quand l'utiliser

• Choisir une teinte principale, un conteneur plus clair et un survol plus sombre dans la même couleur.
• Aligner une interface Android ou Flutter sur la palette officielle de Google sans deviner les HEX.
• Construire une palette cohérente pour une présentation ou un visuel marketing.

Résultat

Vous construisez un tableau de bord et avez besoin du « Indigo 500 » (#3F51B5) exact de Material Design pour la couleur de votre bouton principal et du « Indigo 50 » (#E8EAF6) pour l'arrière-plan au survol.

FAQ

Quelle est la différence entre les nuances principales et les accents (A) ?

Les nuances 50 à 900 sont des variations tonales d'une même teinte, utiles pour les fonds, surfaces et textes. Les A100 à A700 sont plus saturées et Google les réserve aux éléments d'action comme les boutons et les badges.

Pourquoi certaines couleurs n'ont-elles pas d'accents ?

Brown et Grey sont volontairement désaturées, donc Google n'a jamais publié de variantes A pour elles. L'outil respecte la spécification d'origine et n'invente pas de valeurs absentes du système.

Quelle nuance pour le texte principal ?

Material recommande Grey 900 sur fond clair et Grey 50 ou blanc sur fond sombre. Les nuances moyennes (500 à 600) conviennent au texte secondaire ou aux icônes qui demandent moins de contraste.

S'agit-il des mêmes couleurs que Material 3 (Material You) ?

Non. Cette palette est celle du système Material original publié par Google en 2014. Material 3 introduit des palettes tonales dynamiques générées à partir d'une couleur source, ce qui est un autre algorithme.

Comment vérifier le contraste entre deux nuances ?

Ajoutez les deux nuances au panneau Couleurs Sélectionnées, puis descendez jusqu'au Vérificateur de Contraste. Choisissez l'une comme premier plan et l'autre comme arrière-plan : le panneau affiche le ratio WCAG avec des badges Passe/Échoue aux niveaux AA et AAA, pour les textes normaux et grands.

Outils similaires