Skip to main content

Palette de couleurs Material Design Parcourez la palette de couleurs Material Design complète avec toutes les nuances et accents.

Couleurs Material Design illustration
🎨

Couleurs Material Design

Parcourez la palette de couleurs Material Design complète avec toutes les nuances et accents.

1

Sélectionner une famille

Choisissez une famille de couleurs comme le rouge, le bleu ou le vert teal.

2

Parcourir les nuances

Voyez toutes les nuances allant de 50 (la plus claire) à 900 (la plus sombre), ainsi que des variantes d'accentuation.

3

Copier les couleurs

Copiez le code HEX de n'importe quelle nuance en un seul clic.

Loading tool...

What Is Couleurs Material Design?

Les couleurs de Material Design sont une référence complète pour le système de couleurs de Material Design de Google, présentant 19 familles de couleurs avec des nuances allant de 50 à 900 ainsi que des variantes d'accent (A100-A700). La palette de Material Design a été soigneusement élaborée par Google pour fournir un ensemble équilibré et complet de couleurs pour la conception d'interfaces utilisateur. Chaque famille de couleurs offre une gamme allant du très clair (50) au très sombre (900), avec des nuances d'accent qui offrent des variantes vives et saturées pour les éléments d'emphasis. La palette est conçue en tenant compte de l'accessibilité, avec un contraste net entre les nuances adjacentes. Elle est largement utilisée dans le développement d'applications Android, Material UI (React), Angular Material, Flutter et les applications Web suivant les directives de conception de Material Design. L'outil vous permet de parcourir par famille, de visualiser toutes les nuances sous forme de bande visuelle et de copier le code HEX de n'importe quelle couleur.

Why Use Couleurs Material Design?

  • Palette complète de conception Material Design avec les 19 familles
  • Nuances 50-900 ainsi que des variantes d'accentuation (A100-A700)
  • Sélecteur visuel de famille de couleurs avec navigation rapide
  • Bande de nuances affichant toutes les variantes en un seul coup d'œil
  • Copie en un seul clic pour chaque couleur

Common Use Cases

Développement Android

Sélectionnez des couleurs Material pour les applications Android suivant les directives de conception de Google.

Material UI (React)

Trouvez les valeurs de couleur exactes pour la personnalisation du thème MUI.

Développement Flutter

Choisissez des couleurs Material pour les applications Flutter avec confiance.

Conception Web

Créez des sites web inspirés de la conception Material Design avec la palette de couleurs officielle.

Technical Guide

Le système de couleurs de Material Design utilise une convention d'appellation structurée : Nom de la famille + Numéro de nuance. Chaque famille comporte 10 nuances standard (50, 100, 200...900) et jusqu'à 4 nuances d'accent (A100, A200, A400, A700). Les nuances standard progressent du très clair (50, adapté aux arrières-plans) au très sombre (900, adapté au texte). Les nuances d'accent sont des variantes hautement saturées conçues pour les boutons d'action flottants, les éléments interactifs et l'emphase. Toutes les familles n'ont pas de nuances d'accent - Brown, Grey et Blue Grey ne disposent pas de variantes d'accent car elles sont neutres. Les couleurs ont été conçues en utilisant l'espace de couleur HCT (Hue, Chroma, Tone) dans Material Design 3 (Material You), qui offre des rampes de couleurs plus uniformément perçues que le HSL. La palette garantit un contraste WCAG AA entre la nuance 500 et le texte blanc, ainsi qu'entre les nuances claires et le texte sombre.

Tips & Best Practices

  • 1
    La nuance 500 est la « nuance principale » de chaque famille - utilisez-la comme base
  • 2
    Les nuances 50-200 conviennent bien pour les arrière-plans et les surfaces
  • 3
    Les nuances 600-900 conviennent bien pour le texte sur des arrière-plans clairs
  • 4
    Les nuances d'accentuation (A100-A700) sont destinées aux éléments d'emphasis comme les FABs et les liens
  • 5
    Material Design 3 introduit la couleur dynamique à partir des fonds d'écran de l'utilisateur - consultez Material You pour les mises à jour

Related Tools

Frequently Asked Questions

Q Est-ce la dernière palette de conception Material Design ?
Ceci inclut la palette Material Design 2. Material Design 3 (Material You) introduit le thème de couleur dynamique qui génère des palettes à partir des fonds d'écran de l'utilisateur, mais la palette classique reste la référence standard.
Q Pourquoi les familles Brown, Grey et Blue Grey ne disposent-elles pas de nuances d'accentuation ?
Ce sont des familles de couleurs neutres. Les accents sont conçus pour être très saturés et vifs, ce qui contredit la nature des couleurs neutres.
Q Quelle nuance devrais-je utiliser pour les boutons principaux ?
La nuance 500 ou 600 est typique pour les boutons principaux en mode clair. En mode sombre, la nuance 200 ou 300 sur des surfaces sombres. Vérifiez toujours les rapports de contraste.

About This Tool

Couleurs Material Design is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.