Palette de couleurs Material Design Parcourez la palette de couleurs Material Design complète avec toutes les nuances et accents.
Couleurs Material Design
Parcourez la palette de couleurs Material Design complète avec toutes les nuances et accents.
Sélectionner une famille
Choisissez une famille de couleurs comme le rouge, le bleu ou le vert teal.
Parcourir les nuances
Voyez toutes les nuances allant de 50 (la plus claire) à 900 (la plus sombre), ainsi que des variantes d'accentuation.
Copier les couleurs
Copiez le code HEX de n'importe quelle nuance en un seul clic.
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
-
1La nuance 500 est la « nuance principale » de chaque famille - utilisez-la comme base
-
2Les nuances 50-200 conviennent bien pour les arrière-plans et les surfaces
-
3Les nuances 600-900 conviennent bien pour le texte sur des arrière-plans clairs
-
4Les nuances d'accentuation (A100-A700) sont destinées aux éléments d'emphasis comme les FABs et les liens
-
5Material Design 3 introduit la couleur dynamique à partir des fonds d'écran de l'utilisateur - consultez Material You pour les mises à jour
Related Tools
Convertisseur HEX vers RGB
Convertissez les codes de couleur HEX en valeurs RVB instantanément avec un aperçu de couleur interactif.
🎨 Color Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Palettes de couleurs de marque
Parcourez les palettes de couleurs officielles de plus de 50 marques et entreprises technologiques populaires.
🎨 Color Tools
Rechercheur de couleurs Tailwind
Trouvez la classe de couleur CSS Tailwind la plus proche pour n'importe quel code HEX.
🎨 Color Tools
Couleurs de système iOS et Android
Parcourez les couleurs de système pour l'interface humaine d'iOS et le design Material de Android.
🎨 Color ToolsFrequently Asked Questions
Q Est-ce la dernière palette de conception Material Design ?
Q Pourquoi les familles Brown, Grey et Blue Grey ne disposent-elles pas de nuances d'accentuation ?
Q Quelle nuance devrais-je utiliser pour les boutons principaux ?
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.