Référence des couleurs Material Design
Référence consultable de tous les jetons de couleur Material Design 3 (Material You) - 37 rôles de couleur avec valeurs de thème clair et sombre, 6 palettes tonales de 13 tons chacune et noms de variables CSS pour chaque jeton. Cliquez sur n'importe quelle pastille ou valeur HEX pour la copier. Sans inscription.
Searchable reference of all Material Design 3 (Material You) color tokens - dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime - these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
Pourquoi utiliser notre Référence des couleurs Material Design ?
- Référence complète des jetons Material Design 3 : tous les rôles de couleur Material Design 3 - primary, secondary, tertiary, error, surface, background, outline, shadow et scrim - avec les valeurs de thème clair et sombre. Inclut les 6 palettes tonales avec 13 tons chacune.
- Recherche instantanée et filtrage par rôle : recherchez par nom de jeton, nom de variable CSS, valeur HEX ou description. Filtrez par rôle de couleur pour vous concentrer sur les jetons voulus. Les résultats se mettent à jour instantanément à chaque frappe.
- Valeurs de thème clair et sombre : basculez entre les valeurs de thème clair et sombre en un clic. Chaque rôle de couleur affiche la valeur de jeton correcte pour les deux thèmes - indispensable pour créer des interfaces Material You adaptatives.
- 100 % gratuit - sans inscription : entièrement gratuit, sans compte, sans niveau premium, sans limites d'utilisation et sans publicités bloquant l'interface. Consultez les couleurs Material Design 3 autant de fois que nécessaire.
Cas d'usage courants de la Référence des couleurs Material Design
- Développement d'applications Android : les développeurs Android utilisent la référence des couleurs Material Design pour implémenter les bons rôles de couleur dans Jetpack Compose et les mises en page XML. La référence affiche les valeurs de thème clair et sombre pour chaque jeton, éliminant la nécessité de les chercher dans la documentation officielle.
- Développement Flutter et multiplateforme : les développeurs Flutter utilisent la référence des couleurs Material Design pour configurer ColorScheme dans leur ThemeData. Les valeurs de la palette tonale correspondent directement au système de couleur Material 3 de Flutter, facilitant l'implémentation de couleurs de marque personnalisées.
- Implémentation web de Material Design : les développeurs web implémentant Material Design 3 avec Material Web Components utilisent les noms de variables CSS de cette référence pour remplacer les jetons de thème par défaut et appliquer des couleurs de marque personnalisées.
- Configuration du système de design dans Figma : les designers configurant Material Design 3 dans Figma utilisent la référence des couleurs pour remplir leurs styles et variables de couleur. Les valeurs de la palette tonale fournissent l'ensemble complet de pastilles nécessaire à un système de design Material You.
- Couleur dynamique Material You : les développeurs implémentant la couleur dynamique Material You utilisent les valeurs de jeton de référence comme repli lorsque la palette générée à partir du fond d'écran de l'utilisateur n'est pas disponible. Cette référence fournit toutes les valeurs de référence pour les thèmes clairs et sombres.
- Vérification d'accessibilité et de contraste : les ingénieurs en accessibilité utilisent la référence des couleurs Material Design pour vérifier que les paires de rôles de couleur (par exemple Primary + On Primary) respectent les exigences de contraste WCAG. Les rôles on-color sont spécialement conçus pour garantir un contraste lisible.
Qu'est-ce que Material Design 3 (Material You) ?
Material Design 3 (aussi appelé Material You) est le dernier système de design de Google, introduit en 2021 avec Android 12. Son système de couleur repose sur la couleur dynamique - la capacité de générer une palette de couleurs complète à partir du fond d'écran de l'utilisateur à l'exécution. Le système définit un ensemble de rôles de couleur (jetons sémantiques comme « Primary », « On Primary », « Surface ») qui correspondent à des tons précis d'une palette tonale. Cette séparation des rôles et des valeurs permet à toute l'interface de s'adapter à n'importe quelle marque ou couleur générée par l'utilisateur tout en maintenant un contraste et une accessibilité cohérents. Notre référence des couleurs Material Design fournit toutes les valeurs de jeton de référence pour les thèmes clairs et sombres.
Comment fonctionne le système de couleurs Material Design 3
- Palettes tonales : Material Design 3 génère six palettes tonales à partir d'une couleur graine - Primary, Secondary, Tertiary, Error, Neutral et Neutral Variant. Chaque palette contient 13 tons de 0 (noir) à 100 (blanc), offrant une gamme complète de valeurs de luminosité.
- Rôles de couleur : les rôles de couleur sont des jetons sémantiques qui correspondent à des tons précis des palettes tonales. Par exemple, « Primary » correspond au ton 40 en thème clair et au ton 80 en thème sombre. « On Primary » correspond au ton 100 en clair et au ton 20 en sombre.
- Couleur dynamique : sur Android 12+, Material You génère des palettes tonales personnalisées à partir du fond d'écran de l'utilisateur. Les rôles de couleur correspondent alors aux mêmes positions de ton dans la palette personnalisée, produisant une interface entièrement personnalisée. Les valeurs de référence de cette page sont le repli lorsque la couleur dynamique n'est pas disponible.
Groupes de rôles de couleur clés
- Primary / On Primary / Primary Container : la couleur de marque principale et ses variantes. Primary est utilisée pour les actions clés et les éléments à forte emphase. Primary Container est utilisée pour les boutons tonaux remplis et les états sélectionnés.
- Secondary et Tertiary : couleurs de soutien pour les composants moins proéminents et les accents contrastés. Secondary est utilisée pour les puces et les actions alternatives ; Tertiary fournit un troisième accent pour l'équilibre visuel.
- Surface et Background : les couleurs neutres utilisées pour les fonds de cartes, les feuilles, les boîtes de dialogue et l'arrière-plan de l'application. Material Design 3 introduit plusieurs niveaux de conteneur de surface (lowest, low, default, high, highest) pour la teinte basée sur l'élévation.
- Outline et Outline Variant : couleurs de bordure pour les champs de texte, les séparateurs et les anneaux de focus. Outline est utilisée pour les bordures proéminentes ; Outline Variant pour les séparateurs décoratifs subtils.
Utilisation des variables CSS
Material Web Components (l'implémentation web officielle de Material Design 3) utilise des propriétés personnalisées CSS avec le préfixe --md-sys-color- pour tous les jetons de couleur. Vous pouvez remplacer n'importe quel jeton en définissant la variable CSS dans votre feuille de style : :root { --md-sys-color-primary: #votre-couleur; }. Cette référence fournit le nom exact de la variable CSS de chaque jeton, ce qui facilite le copier-coller dans votre implémentation.
Foire aux questions
Material Design 3 est le dernier système de design de Google, avec une couleur dynamique qui génère des palettes à partir des fonds d'écran de l'utilisateur. Cette référence fournit toutes les valeurs de jeton de référence pour les thèmes clairs et sombres.
Une palette tonale est composée de 13 tons (0-100) issus d'une couleur graine. Un rôle de couleur est un jeton sémantique qui correspond à un ton précis - par exemple « Primary » correspond au ton 40 en clair et au ton 80 en sombre.
Material Web Components utilise le préfixe --md-sys-color-. Par exemple, Primary correspond à --md-sys-color-primary. Cette référence montre le nom exact de la variable CSS de chaque jeton.
Utilisez ColorScheme.fromSeed() ou spécifiez manuellement chaque rôle dans ColorScheme(). Convertissez le HEX en Color Flutter via Color(0xFF + hex sans #).
Utilisez dynamicColorScheme() pour Material You ou créez un ColorScheme personnalisé avec les valeurs des jetons. Convertissez le HEX en Color Compose via Color(0xFF6750A4).
Chaque rôle utilise des valeurs de ton différentes selon le thème - Primary est le ton 40 en clair et le ton 80 en sombre. Basculez entre les thèmes dans cette référence pour voir les valeurs correctes.
La couleur dynamique génère une palette personnalisée à partir du fond d'écran de l'utilisateur sur Android 12+. Les valeurs de référence ici sont le repli lorsque la couleur dynamique n'est pas disponible.
Oui. Ce sont les valeurs officielles de la palette de référence Material Design 3 issues de m3.material.io, avec la couleur graine violette par défaut (#6750A4).
Oui. 100 % gratuite, sans inscription, sans niveau premium, sans quota d'utilisation et sans publicités bloquant l'interface.