Couleur
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Créez des jeux de couleurs plus accessibles et personnalisés qui communiquent la hiérarchie, l'état et la marque de votre produit. Lorsque vous concevez des accessoires connectés, la couleur joue un rôle crucial pour améliorer la lisibilité, la facilité d'utilisation, l'attrait visuel et l'expression, en particulier sur les petits écrans.
Les principes suivants expliquent comment utiliser les couleurs dans les différents thèmes.
Créer à partir du noir
Les montres sont conçues avec un arrière-plan noir, au lieu de l'arrière-plan teinté utilisé par les téléphones. Si les thèmes sombres sont destinés aux environnements faiblement éclairés et les thèmes clairs à la lumière du jour, les interfaces utilisateur des montres doivent fonctionner de manière fluide, de jour comme de nuit. Par conséquent, les jetons de couleur des montres doivent être adaptés spécifiquement.
Nouveaux rôles de couleur
Le système de couleurs Material 3 conserve la structure de trois couleurs d'accentuation et de deux couleurs de surface neutres, mais introduit des couleurs de conteneur dans les rôles d'accentuation.
Ces nouveaux rôles offrent un plus grand potentiel d'expression sans perturber la hiérarchie visuelle, en fournissant essentiellement des variations de couleur de surface avec une chromie accrue.
Les rôles de conteneur sont particulièrement utiles pour mettre en évidence des états, tels que des boutons d'activation/de désactivation, ou pour fournir un style complémentaire lorsque l'accentuation principale est déjà utilisée.
Sens sémantique
Dans les interfaces utilisateur des montres, les couleurs doivent communiquer une signification claire et intuitive. Par exemple, le rouge indique les erreurs et le vert signale la réussite, ce qui aide les utilisateurs à comprendre rapidement les actions ou les états sans avoir besoin d'explications supplémentaires. Cet usage sémantique de la couleur aide les utilisateurs à naviguer dans votre UI et à agir en toute confiance.
Accessibilité des couleurs (respect du contraste)
Dans les interfaces utilisateur des montres, les couleurs doivent communiquer une signification claire et intuitive. Par exemple, le rouge indique les erreurs et le vert signale la réussite, ce qui permet aux utilisateurs de comprendre rapidement les actions ou les états sans avoir besoin d'explications supplémentaires. Cet usage sémantique de la couleur aide les utilisateurs à naviguer dans votre UI et à agir en toute confiance.
Nouveautés
Des modifications importantes ont été apportées au système de conception visuelle et à la façon dont nous mettons en valeur l'expression à travers les mises à jour de nos bases de style, de nos composants et de nos bibliothèques de conception de cartes.
Le système de couleurs Expressive de Material 3 inclut les fonctionnalités suivantes:
- Ensemble intégré de relations de couleurs accessibles
- Plus de 28 rôles de couleur mappés aux composants Material
- Couleurs du thème sombre intégrées pour la création à partir du noir
- Amélioration des valeurs de couleur désactivées
- Autres couleurs d'erreur
- Couleur de référence statique avec des couleurs par défaut attribuées à chaque rôle de couleur
- Fonctionnalités de couleurs dynamiques, y compris le système/cadran et les thèmes de couleurs basés sur des images
Ressources
Pour en savoir plus, consultez les ressources suivantes.
Consignes relatives aux couleurs Material Design
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/26 (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/26 (UTC)."],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
