Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le framework de couleurs Expressive de Material 3 utilise une thématisation de couleur dynamique, basée sur deux couleurs de base mappées sur le système de couleurs HCT (teinte, chroma et ton).
Termes essentiels
Rôle de couleur
Comme les "chiffres" sur un canevas de peinture par numéros, les rôles de couleur sont attribués à des éléments d'interface utilisateur spécifiques. Ils portent des noms tels que "primary", "on primary" et "primary container". Le même rôle de couleur est utilisé pour les thèmes clair et sombre. Afficher tous les rôles de couleur
HCT
HCT signifie teinte, chroma et ton.
Définir des couleurs avec la teinte, la chrominance et le ton (HCT)
Générateur de couleurs HCT créant un ensemble de palettes de couleurs à partir d'une couleur de départ pour créer un modèle de couleur tridimensionnel qui définit les couleurs en fonction de leur teinte (couleur), de leur chroma (saturation) et de leur ton (luminosité)
Il existe trois couleurs d'accentuation principales: primaire, secondaire et tertiaire. Les teintes neutres, telles que les différents tons de gris avec une touche de couleur primaire, sont idéales pour les couleurs de conteneur de contenu riche en raison de leur nature monochrome.
Teinte
La teinte est la perception d'une couleur, comme le rouge, l'orange, le jaune, le vert, le bleu et le violet. La teinte est quantifiée par un nombre compris entre 0 et 360 et correspond à un spectre circulaire (les valeurs 0 et 360 correspondent à la même teinte).
Chroma
La chromie indique le degré de saturation d'une couleur. La chromie est quantifiée par un nombre allant de 0 (complètement gris, noir ou blanc) à l'infini (couleur la plus vive), bien que les valeurs de chromie dans le HCT atteignent environ 120.
En raison des limites biologiques et de l'affichage de l'écran, les teintes et les tons différents ont des valeurs chromatiques maximales différentes.
Ton
Le ton indique le degré de clarté ou d'obscurité d'une couleur. Le ton est parfois aussi appelé luminance. Le ton est quantifié par un nombre compris entre 0 (noir pur, pas de luminance) et 100 (blanc pur, luminance complète).
Le ton est crucial pour l'accessibilité visuelle, car il détermine le contraste. Les couleurs présentant une plus grande différence de ton créent un contraste plus élevé, tandis que celles présentant une plus petite différence créent un contraste plus faible.
Couleur dynamique (thématisation de couleur)
Wear OS implémente un système de thématisation conforme aux Consignes d'accessibilité des contenus Web (WCAG)-AAA, dérivées de deux couleurs de base désignées. Plus précisément, ces couleurs de base servent de base aux palettes primaires et tertiaires. À l'aide de ces deux couleurs initiales, le système génère une palette de couleurs complète comprenant des palettes primaires, secondaires, tertiaires et de surface. Par la suite, ce thème généré est appliqué aux composants Wear OS, aux éléments de l'interface utilisateur du système, aux cartes et aux applications.
Chaque cadran définit deux couleurs de départ, utilisées pour les palettes primaire et tertiaire.Ces graines sont soumises à un algorithme qui devient cinq gammes tonales. Des tons spécifiques (basés sur la luminance) sont insérés dans les rôles prédéfinis qui constituent un schéma. Les couleurs sont mappées à un jeu de couleurs à l'aide de jetons de conception.Chaque jeton de conception est ensuite appliqué à l'UI système, aux cartes et aux applications qui ont activé l'utilisation de couleurs dynamiques.
Selon vos préférences, vous pouvez utiliser une couleur de graine spécifique ou une couleur de marque pour dériver votre couleur dynamique.
À partir de la couleur de la graine
La couleur dynamique crée automatiquement un jeu de couleurs accessible en fonction d'une couleur de graine spécifique.
Étant donné que l'UI peut comporter un nombre illimité de couleurs sources différentes, il est préférable de commencer par concevoir à l'aide du jeu de couleurs de référence afin de vous assurer que les rôles de couleur appropriés sont mappés aux composants appropriés de votre produit. Utilisez Material Theme Builder pour voir à quoi ressemblent vos maquettes d'UI dans une gamme de couleurs sources et ajustez les paramètres si nécessaire.
Palette de couleurs (à partir des couleurs de départ du cadran)
Thème de couleur appliqué à une carte
Thème de couleur appliqué à un écran d'application
À partir de la couleur de la marque
Comme Material 3 Expressive traite les rôles de couleur, Wear OS applique la couleur aux expériences individualisées avec une expression de couleur dynamique et accessible. Wear OS n'utilise que le thème sombre, car l'interface du wearable est conçue sur un arrière-plan noir. Étant donné qu'il s'agit d'une plate-forme exécutée sur des appareils tactiles, Wear OS dispose également d'une palette de couleurs plus limitée, car il ne nécessite pas autant d'états de survol et de mise au point. Utilisez les outils de création de thèmes de couleurs spécifiques à Wear OS pour créer un thème personnalisé autour de votre marque, et générer les palettes de référence complètes et les rôles de couleur attribués qui prennent en charge les jetons Material Design et sont conçus pour fonctionner de manière transparente avec les composants d'UI du système.
Palette de couleurs (à partir des couleurs de départ de l'illustration)
Thème de couleur appliqué à une carte
Thème de couleur appliqué à un écran d'application
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Color system\n\nThe Material 3 Expressive color framework uses dynamic color theming, based on\ntwo seed colors mapped on the HCT (Hue, Chroma and Tone) color system.\n\nEssential terms\n---------------\n\nColor role\n: Like the \"numbers\" on a paint-by-number canvas, color roles are assigned to\n specific UI elements. They have names like primary, on primary, and primary\n container. The same color role is used for both light and dark themes. See all\n color roles\n\nHCT\n: HCT stands for hue, chroma, and tone.\n\nDefine colors with hue, chroma, and tone (HCT)\n----------------------------------------------\n\nHCT color generator creating a set of color palettes from one seed color to\ncreates a three-dimensional color model that defines colors based on their hue\n(color), chroma (saturation), and tone (lightness)\n\nThere are three main accents colors: primary, secondary and tertiary. Neutral\nshades, such as various tones of gray with a hint of primary color, are ideal\nfor use as container colors for rich content due to their monochromatic nature.\n\n### Hue\n\n\nHue is the perception of a color, such as red, orange, yellow, green, blue, and\nviolet. Hue is quantified by a number ranging from 0-360 and is a circular\nspectrum (values 0 and 360 are the same hue). \n\n\u003cbr /\u003e\n\n### Chroma\n\n\nChroma is how colorful or neutral (gray, black or white) a color appears. Chroma\nis quantified by a number ranging from 0 (completely gray, black or white) to\ninfinity (most vibrant), though chroma values in HCT top out at roughly 120.\n\nBecause of biological and screen rendering limitations, different hues and\ndifferent tones will have different maximal chroma values. \n\n\u003cbr /\u003e\n\n### Tone\n\n\nTone is how light or dark a color appears. Tone is sometimes also referred to as\n*luminance*. Tone is quantified by a number ranging from 0 (pure black, no\nluminance) to 100 (pure white, complete luminance).\n\nTone is crucial for visual accessibility because it determines contrast. Colors\nwith a greater difference in tone create higher contrast, while those with a\nsmaller difference create lower contrast. \n\n\u003cbr /\u003e\n\nDynamic color (color theming)\n-----------------------------\n\nWear OS implements a theming system compliant with [Web Content Accessibility\nGuidelines (WCAG)-AAA](https://www.w3.org/TR/WCAG22/#contrast-enhanced), derived from two designated *seed\ncolors*. Specifically, these seed colors serve as the basis for primary and\ntertiary palettes. Using these two initial colors, the system generates a\ncomprehensive color palette encompassing primary, secondary, tertiary, and\nsurface palettes. Subsequently, this generated theme is applied across Wear OS\ncomponents, System UI elements, tiles, and apps.\nEach Watch face defines two seed colors, used for primary and tertiary palettes.\n\n\u003cbr /\u003e\n\nThese seeds are put through an algorithm that becomes five tonal ranges, specific tones (based on luminance) are slotted into the predefined roles that consist of a scheme. Colors are mapped to a scheme through design tokens.\n\n\u003cbr /\u003e\n\nEach design token is then applied to the SysUI, tiles and apps that have opted in to using dynamic color.\n\n\u003cbr /\u003e\n\nDepending on your preference, you can use either a specific seed color or a\nbrand color to derive your dynamic color.\n\n### From seed color\n\nDynamic color will automatically create an accessible color scheme based on a\nspecific seed color.\n\nBecause the UI could end up with any number of different source colors, it's\nbest to initially design using the baseline color scheme so you can ensure the\nright color roles are mapped to the right components in your product. Use the\nMaterial Theme Builder to see how your UI mocks look across a range of source\ncolors and adjust settings as needed.\n\n\nColor palette (from Watch face seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### From brand color\n\nSimilar to the way Material 3 Expressive treats color roles, Wear OS applies\ncolor to individualized experiences with dynamic and accessible color\nexpression. Wear OS uses only the dark theme because the wearable interface is\nbuilt on a black background. Being a platform that runs on touch devices, Wear\nOS also has a more limited color palette as it doesn't require as many hover and\nfocus states. Use the Wear OS-specific color theme building tools to build a\ncustom theme around your brand and generate the full reference palettes and\nassigned color roles that support Material Design tokens and are built to work\nseamlessly with system UI components.\n\n\nColor palette (from artwork seed colors) \n\nColor theme applied to a Tile \n\nColor theme applied to an app screen\n\n\u003cbr /\u003e"]]
