Cor
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Crie esquemas de cores mais acessíveis e pessoais que comuniquem a hierarquia, o estado e a marca do seu produto. Ao projetar para wearables, a cor tem um papel crucial
na melhoria da legibilidade, usabilidade, apelo visual e expressão,
especialmente em telas menores.
Os princípios a seguir explicam como usar cores em temas.
Criar a partir do preto
Os relógios são projetados com um plano de fundo preto, em vez do plano de fundo colorido
usado pelos dispositivos de smartphone. Embora os temas escuros sejam destinados a ambientes com pouca luz
e os temas claros à luz do dia, as interfaces do relógio precisam funcionar perfeitamente de dia
e de noite. Portanto, os tokens de cor para relógios precisam ser personalizados.
Novas funções de cores
O sistema de cores do Material 3 mantém a estrutura de três cores de destaque e duas
cores de superfície neutras, mas introduz cores de contêiner nas funções de destaque.
Essas novas funções permitem um maior potencial de expressão sem interromper a hierarquia
visual, basicamente fornecendo variações de cor de superfície com aumento do cromatismo.
Os papéis de contêiner são particularmente úteis para destacar estados, como botões
de alternância, ou para fornecer um estilo complementar quando o acento principal já
está em uso.
Significado semântico
Nas interfaces de relógio, as cores precisam transmitir o significado de maneira clara e intuitiva. Por
exemplo, o vermelho indica erros, e o verde indica sucesso, ajudando os usuários a entender
rapidamente ações ou estados sem precisar de explicações adicionais. Esse uso semântico
de cores ajuda os usuários a navegar pela interface e realizar ações com confiança.
Acessibilidade de cor (conformidade com o contraste)
Nas interfaces de relógio, as cores precisam transmitir o significado de maneira clara e intuitiva. Por
exemplo, o vermelho indica erros, e o verde indica sucesso, ajudando os usuários a entender
rapidamente ações ou estados sem precisar de explicações adicionais. Esse uso semântico
de cores ajuda os usuários a navegar pela interface e realizar ações com confiança.
Novidades
Há atualizações substanciais no sistema de design visual e na forma como expressamos
isso nas atualizações das nossas bases de estilo, componentes e bibliotecas de design
de blocos.
O sistema de cores Expressivo do Material 3 inclui os seguintes recursos:
- Conjunto integrado de relações de cores acessíveis
- Mais de 28 funções de cor mapeadas para componentes do Material Design
- Cores de tema escuro integradas para criação em preto
- Valores de cores desativadas aprimorados
- Cores de erro adicionais
- Cor de referência estática com cores padrão atribuídas a cada função de cor
- Recursos de cores dinâmicas, incluindo mostrador do sistema/relógio e temas de cores
com base em imagens
Recursos
Para saber mais, consulte os recursos a seguir.
Diretrizes de cores do Material Design
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-26 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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"]]
