Aller au contenu

Couleurs Material Design : palette complète avec accents

La palette classique de Material Design de Google : 19 couleurs avec leurs nuances de 50 à 900 et les accents A100 à A700. Copiez chaque couleur en HEX, RGB, HSL, OKLCH ou avec son nom MUI.

Voir couleurs UI
Copier comme

Valeurs de chaque couleur

Choisissez une couleur pour voir toutes ses nuances avec le nom MUI, le HEX, le RGB, l'OKLCH et la couleur de texte qui contraste le mieux.

Blue

NuanceMUIHEXRGBOKLCHTexte
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

Qu'est-ce que Material Design et comment sa palette est-elle organisée

Material Design est le système de design présenté par Google en 2014 pour unifier ses produits et Android. Sa palette réunit 19 couleurs, chacune avec dix nuances numérotées de 50 (la plus claire) à 900 (la plus foncée).

Ce qui la distingue des autres échelles, ce sont les accents : A100, A200, A400 et A700, des versions plus saturées de chaque couleur pensées pour les boutons, interrupteurs et autres éléments qui doivent ressortir. Brown, Grey et Blue Grey n'ont pas d'accents.

Associer une couleur principale et un accent

Les directives originales de Material proposent de choisir une couleur principale et d'utiliser sa nuance 500 sur les surfaces les plus visibles, comme la barre supérieure, et la 700 pour la barre d'état. Les nuances claires (50–200) servent aux fonds et aux éléments secondaires.

Pour l'accent, on choisit une autre famille et l'une de ses nuances A, généralement l'A200 : le bouton d'action principal ressort ainsi sur le reste. L'association classique est Indigo avec un accent Pink.

Material Design 2 et Material 3 : deux systèmes de couleurs

Ce tableau reprend la palette classique de Material Design (versions 1 et 2). Material 3, aussi appelé Material You, utilise un système différent.

Material Design 2 (cette palette)

  • 19 couleurs fixes avec nuances 50–900 et accents A100–A700.
  • Les valeurs sont toujours les mêmes, c'est pourquoi on peut les copier depuis un tableau.
  • C'est la palette incluse dans MUI (@mui/material/colors) et de nombreux modèles.

Material 3 (Material You)

  • Les palettes sont générées à partir d'une couleur de base, avec 13 tons de 0 (noir) à 100 (blanc).
  • Sur Android 12 et ultérieur, la couleur de base peut venir du fond d'écran (couleur dynamique).
  • Le thème s'organise en rôles : primary, secondary, tertiary, neutral et neutral variant.

Utiliser les couleurs Material dans votre projet

Si vous travaillez avec MUI (React), les couleurs sont incluses et s'importent par famille. Dans tout autre projet, copiez le HEX du tableau et enregistrez-le comme variable CSS.

MUI (React)

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

Questions fréquentes

Ce sont des variantes plus saturées de chaque couleur, pensées pour les éléments qui doivent ressortir, comme les boutons, les liens ou les icônes actives, contrairement aux nuances principales (50 à 900), pensées pour les fonds et surfaces.

Les directives originales proposent la nuance 500 pour les surfaces principales, comme la barre supérieure, la 700 pour la barre d'état et un accent d'une autre famille (généralement A200) pour le bouton d'action principal.

Les deux utilisent une échelle numérotée du clair au foncé, mais Material Design ajoute les nuances d'accent (A100 à A700), que Tailwind n'a pas. De plus, les noms et valeurs exacts de chaque famille diffèrent entre les deux systèmes.

C'est la palette classique de Material Design. Les versions plus récentes du système (Material You) introduisent des palettes dynamiques générées à partir d'une couleur de base, mais cette échelle reste très utilisée et compatible avec les projets qui y font directement référence.

MUI inclut cette même palette. Importez la famille depuis @mui/material/colors et utilisez la nuance comme index : indigo[500] ou pink.A200. Choisissez « MUI » dans « Copier comme » pour copier directement ce nom.

La palette officielle ne les définit pas. Ce sont des couleurs neutres ou sourdes pensées pour les fonds, le texte et les éléments secondaires, pas pour ressortir. Si vous avez besoin d'un accent, associez-les à une autre famille.

Oui. Dans « Copier comme », vous pouvez choisir HEX, RGB, HSL, OKLCH ou le nom MUI, et le tableau de chaque couleur affiche tous les formats à la fois.