Use a cor para expressar estilo e comunicar significados. Definir as cores do app pode ser crucial para a personalização, definir a finalidade semântica e, claro, a identidade da marca.
Takeaways
- Para garantir a acessibilidade:
- Verifique o contraste das cores e evite combinar cores com tons semelhantes.
- Considere que vermelho e verde são padrões comuns, mas também que eles não são acessíveis a usuários com determinados tipos de daltonismo.
- Pratique o uso de cores de forma significativa: os apps podem ser vibrantes e expressivos, mas se encaixam em uma paleta de cores. Estender o esquema com muitas cores semânticas pode ser confuso, enquanto ter muitas cores decorativas pode ser sobrecarregado.
- As cores podem ter padrões, então repita os padrões de cores estabelecidos. Ao usar cores semânticas no app, use cores consistentes.
- Para que o app funcione bem em diferentes contextos, crie um esquema de cores claros e escuros (e, de preferência, temas contrastantes).
- Atribua cores com tokens para indicar a função de cor do elemento, em vez de usar um valor fixado no código.
- As cores podem vir de várias fontes dinâmicas e estáticas, mas evite misturar muitas na mesma visualização.
- Ao usar cores de conteúdo dinâmicas, evite extrair cores de vários conteúdos.
Espaço de cores no Android
Para entender corretamente como o Android aplica cores à interface, é importante primeiro reconhecer como elas são mostradas em um dispositivo.
Como a cor é exibida em um dispositivo
O app é exibido em uma tela retroiluminada, que usa cores digitais e adere a determinados modelos e regras que ajudam nossos olhos a notar essa cor. A cor digital é uma cor aditiva, criada pela "adição" ou mistura de luzes diferentes para criar um espectro completo de cores. A maneira como os humanos percebem cores de uma tela para outra pode variar muito, dependendo da calibração de cores de um dispositivo, do tipo de tela, das configurações e do espaço de cores.
Ao projetar um app, considere que as cores usadas podem não ser idênticas devido a esses fatores, sem mencionar as percepções de cores exclusivas dos usuários.
Sobre os espaços de cor
Um espaço de cores é uma organização de cores que usa um modelo de cores. O RGB é um modelo de cor aditiva que cria o espectro de cores em vermelho, verde e azul, enquanto o CMYK, que é usado para impressão, é subtrativo. Por esse motivo, designers interativos normalmente usam RGB ou modelos semelhantes para escolher cores.
O Material 3 (M3) introduziu o HCT, um novo espaço de cores que usa matiz, chroma e tom para definir cores perceptivamente precisas em comparação com outros modelos como HSL
Para saber mais sobre a ciência das cores e o desenvolvimento do HCT, leia The Science of Color & Design (em inglês).
Matiz, chroma e tom
O HCT permite usos mais personalizados e flexíveis de cores que permanecem nos parâmetros do sistema. O HCT modela cores usando matiz, chroma e tom:
- Hue: o matiz é análogo ao adjetivo que um usuário individual pode usar para descrever a cor, por exemplo, "vermelho" ou "violeta elétrico". O valor HCT de matiz varia de 0 a 360.
- Chroma: representa a coloração da cor, variando de cinza neutro a vitalidade total. No espaço de cores HCT, o chroma tem um valor máximo de cerca de 120.
- Tom: o tom é a luminância, ou brilho, de uma cor. O HCT usa tom para criar contraste. As cores definidas com o mesmo valor de tom não são acessíveis para determinados contextos de acessibilidade. Tons de valor mais baixo são mais escuros, e tons de maior valor são mais claros.
Processo do sistema de cores
A cor do M3 é criada em torno do modelo HCT para gerar esquemas de cores acessíveis harmoniosas e ajuda a recursos de cor dinâmicos. O sistema de cores M3 começa com uma cor de origem. Essa cor de origem é traduzida em cinco cores principais: variante primária, secundária, terciária, neutra e neutra. Essas cinco cores principais criam paletas tonais compostas de incrementos tonais para cada cor principal.
Se você atribuir manualmente uma cor de chave, observe o cromo e o tom da entrada, já que o tom pode não ser o valor tonal da função de cor.
O sistema de cores M3 é alimentado pelo Material Color Utilitários (MCU), um conjunto de bibliotecas de cores que contém algoritmos e utilitários que facilitam o desenvolvimento de temas e esquemas de cores no app.
O vídeo a seguir descreve como os esquemas de cores são derivados.
Limitações de cor
As limitações de cor são os limites físicos da cor, seja a física real, nossas próprias limitações visuais biológicas ou as limitações da renderização de cores na tela. Por exemplo, alguns matizes não podem existir com determinados chroma ou tons. Por causa das limitações de cor, cores como azul-claro ou vermelho-claro não são possíveis. O mapeamento de cores de tom precisa ser consistente em todos os valores de matiz.
A figura anterior mostra três gráficos de mapeamento de tons diferentes para os valores de matiz H105, H25 e H285.
Gráfico 1 – matiz 105 (amarelo). Indica a disponibilidade de cores. Chroma e Tone funcionam como um gráfico. A tonalidade amarela tem chroma limitado com determinados tons ao longo do gráfico, enquanto o amarelo não tem uma grande variedade de vitalidade em tons mais baixos.
Gráfico 2 – matiz 25 (vermelho). Mostra mais opções cromáticas do que o matiz 105 (amarelo). Neste mapa de tons, o ponto de maior coloração está em um nível de tom mais baixo.
Gráfico 3 – matiz 285 (azul). Mostra que a maior coloração é encontrada em um tom ainda mais escuro. Por outro lado, a capacidade cromática é perdida em um tom mais leve.
Esquema de cores
Um esquema de cores é o conjunto de acentos e superfícies derivados de tons específicos e atribuídos a funções de cor, que são então mapeados para elementos e componentes da IU. Funções de cor referem-se ao uso da cor, e não à matiz da cor. Por exemplo, na primária em vez de na cor azul.
Os esquemas de cores são projetados para serem harmoniosos, garantir texto acessível e distinguir os elementos da interface e as superfícies umas das outras. Os pares de papéis de cores (compostos por papéis no contêiner e no contêiner) têm valores tonais que oferecem contraste acessível.
Os esquemas claros e escuros são criados e têm as próprias atribuições de tom específicas.
O sistema de cores do Material Design e os esquemas personalizados oferecem valores padrão de cor como ponto de partida para personalização.
Saiba mais sobre o sistema de cores M3.
Para um esquema de cores personalizável, explore o Kit de IU do Android.
Aplicar cores à interface
A cor da interface consiste em cores de destaque, semânticas e de superfície.
- As cores de destaque se referem às cores principais que normalmente fazem parte da paleta de cores da marca Android.
- Cores semânticas (ou cores personalizadas no Material 3) têm um significado específico.
- As cores de superfície se referem a qualquer cor derivada neutra usada para cores de fundo.
Cor de destaque
As cores de destaque geralmente têm a maior expressividade em uma interface, seja para branding, destaque de ações, expressão pessoal ou expressão do usuário.
Cada cor de destaque (primária, secundária e terciária) é fornecida em um grupo de quatro a oito cores compatíveis de tons diferentes para pareamento, definição de ênfase e expressão visual.
Cores dinâmicas
As cores de destaque podem ser definidas a partir de fontes dinâmicas.
No Android 12 (nível 31 da API) e versões mais recentes, as cores dinâmicas permitem que o sistema extraia uma cor de origem do plano de fundo ou do conteúdo do app de um usuário, como um recurso de arte principal. As cores dinâmicas usam algoritmos e processos de MCU para criar esquemas e implementá-los com pouco esforço. Para aplicar cores dinâmicas ao app, leia Permitir que os usuários personalizem a experiência de cores no app.
Teste o codelab Como visualizar cores dinâmicas para ter uma visão prática de cores dinâmicas.
Estático
Um esquema estático tem valores imutáveis (ou relativamente). Uma maneira comum de criar um esquema estático é com as cores da marca, alinhando as cores primárias, secundárias e terciárias à paleta de cores principal da marca.
Mesmo que você use cores dinâmicas, recomendamos criar um esquema estático como substituto caso a cor dinâmica não esteja disponível para o dispositivo do usuário. Caso contrário, o sistema vai usar o esquema de cores roxo do valor de referência.
Com o Material Theme Builder, é possível aplicar o algoritmo de cores MCU para gerar um tema estático e personalizado. Isso resulta nas cores que você escolheu, mas que estão alinhadas aos tokens do sistema de cores do M3 e aos princípios harmoniosos de acessibilidade.
Ainda é possível criar um esquema estático totalmente personalizado. Para fazer isso,
atribua valores diferentes nos estilos de cores (color.kt ou color.xml) ou
exporte o arquivo de tema do Material Theme Builder para Figma depois de atualizar as
propriedades de estilo do Figma.
Uso
Os componentes do Material Design têm funções de cor pré-atribuídas, mas é possível usar tokens de cor em toda a IU e em elementos personalizados. Use todas as cores de destaque com atenção, considerando que o olho humano é particularmente atraído por cores vibrantes.
Assim como no tipo, o sistema aplica cores em uma hierarquia, com a cor primária e os respectivos papéis atribuídos a calls-to-action (CTAs) essenciais. Recomendamos componentes como botões de ação flutuantes (FABs, na sigla em inglês) para assumir papéis principais.
Ao escolher uma cor primária, vale a pena atribuir a cor principal da sua marca. Como alternativa, você pode selecionar uma cor para representar componentes interativos, permitindo que as cores da marca sejam usadas com mais moderação. As cores secundárias e terciárias continuam abaixo na hierarquia de importância do destaque.
Um visual saturado pode resultar no uso apenas dos papéis de cor de base da primária, secundária ou terciária. Para ajudar na hierarquia de cores, aplique esquemas de cores para incluir cores de contêiner menos vibrantes e funções de contorno.
Para garantir uma melhor experiência do usuário, use cores primárias mais vibrantes para indicar ações de maior destaque na hierarquia visual do app. Na figura a seguir, o FAB na primeira imagem tem uma cor suave com o mesmo tom e chroma da navegação, fazendo com que ele se misture. A segunda imagem mostra um FAB que chama mais atenção para si mesmo com uma cor primária vibrante.
Para ter uma experiência prática sobre cores dinâmicas, teste o codelab para Personalizar cores do Material Design.
Cor semântica
Cor semântica são cores que têm significados específicos. Por exemplo, Error é uma cor semântica.
Seja consistente com o significado da cor: se você estabelecer um padrão, repita-o em todo o app. Por exemplo, se você definiu roxo para indicar um recurso de associação, use roxo para todas as instâncias desse recurso.
No exemplo a seguir, um app usa vermelho para indicar um erro em um campo de texto, mas roxo para o outro. Isso causaria confusão ao deslizar um formulário.
Embora o esquema de cores do Material Design forneça a cor de erro semântica, outras cores semânticas são criadas usando cores personalizadas para ampliar seu esquema de cores. Leia mais sobre cores personalizadas.
A Harmonização oferece uma maneira de alinhar cores dinâmicas geradas pelo usuário com cores personalizadas no seu app para criar paletas mais harmoniosas.
Cores da superfície
As cores de superfície foram projetadas para elementos de segundo plano, como contêineres de componentes, planilhas e painéis, e representam a maioria das cores do app. Não tenha vergonha de usar muito espaço na superfície, o olho humano precisa de espaço para relaxar. As superfícies também ajudam a conter conteúdo e direcionar o leitor.
O M3 introduziu o conceito de superfícies tonais, o que significa que todas as cores são derivadas das paletas tonais. Os tons criam profundidade e mais contraste para ajudar na acessibilidade. Para saber mais sobre papéis de superfície, consulte a orientação sobre papéis de superfície do M3.
Acessibilidade e cor
As pessoas veem as cores de várias maneiras, dependendo da acuidade visual. Como alguns leitores são daltônicos, é necessário verificar as combinações para garantir que os elementos da interface não se misturem. Embora a opacidade e o peso possam não ser a matiz literal de uma cor, eles têm um efeito visual poderoso na forma como os usuários percebem a cor.
O contraste de cores é a diferença entre a luminosidade dos elementos em primeiro e segundo plano, apresentada em um formato de proporção. Esses critérios de proporção recebem notas. Por exemplo, medir o contraste entre o texto em um botão e o contêiner dele ajuda a determinar a legibilidade do texto. As diretrizes de contraste de cores são divididas em texto e não texto, cada uma com o próprio conjunto de notas. Leia Projetar com cores acessíveis para ver mais detalhes.
Nunca torne a cor a única funcionalidade ou indicador de uma ação disponível. Use um botão do componente, uma mudança de espessura da fonte ou até mesmo um ícone para informar ao usuário que é possível interagir com o elemento.
Implementar cor
Os tokens são pequenas representações semânticas variáveis dos dados de design. Eles são repetíveis e substituem valores estáticos, como códigos hexadecimais de cor, por nomes autoexplicativos. Para atribuir a função de cor de um elemento, use tokens em vez de valores de cor codificados.
Confira o exemplo do Figma no Now in Android para conferir exemplos de mapeamento de funções de cor.
Os valores de cor são definidos em um arquivo de cor color.kt usando o Compose (ou
color.xml usando visualizações). Essas cores definidas como estilos fazem parte de um
tema. Saiba mais em Criar temas para dispositivos móveis Android.
Para definir valores de cor no Android, use o código hexadecimal, que representa o RGB em um formato de seis dígitos. Para capturar a opacidade, acrescente o valor à frente para criar um código de oito dígitos.
Como usar o Material Theme Builder:
Você pode criar esquemas personalizados de cores claras e escuras usando o Material Theme Builder (MTB).
O MTB permite visualizar cores dinâmicas, gerar tokens do Material Design e personalizar seus esquemas de cores.
O esquema de cores pode ser totalmente personalizado atualizando as propriedades de estilo no painel do inspetor do Figma. Esses valores modificados são exportados.
