Palette de couleurs Material Design

Les 19 familles de couleurs avec codes HEX, variables CSS et vérification du contraste. Cliquez sur une couleur pour la copier.

Télécharger CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Texte blanc {{ whiteContrast.toFixed(1) }}:1
Texte noir {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Qu’est-ce que le système de couleurs Material Design ?

Le système de couleurs Material Design de Google comprend 19 familles de couleurs, chacune avec 10 teintes principales (50, 100–900) et jusqu’à 4 teintes d’accentuation (A100–A700). Il fournit un langage de couleurs cohérent pour les sites web et les applications.

Comment utiliser les couleurs Material Design en CSS ?

Téléchargez le fichier CSS avec toutes les variables et incluez-le dans votre projet. Utilisez ensuite les couleurs via les Custom Properties CSS comme var(--color-md-teal-500). Vous pouvez aussi utiliser les codes HEX directement.

Conseils pour choisir les couleurs

  • Choisissez une couleur primaire (ex. Teal 500) et une couleur d’accentuation d’une autre famille.
  • Utilisez des teintes claires (50–200) pour les fonds et sombres (700–900) pour le texte.
  • Assurez un contraste suffisant (au moins 4,5:1) entre le texte et l’arrière-plan pour l’accessibilité.
  • La teinte 500 est la représentation standard de chaque famille de couleurs et idéale comme couleur primaire.