Como escolher as cores certas para seu app

Essa escolha nunca é casual. As empresas estão bem cientes da importância da cor quando se trata de influenciar o comportamento do consumidor.

Cada cor carrega suas próprias associações. Por exemplo, o vermelho evoca emoções fortes como amor, paixão e raiva. Em um contexto de marketing, o vermelho é frequentemente usado para ofertas especiais ou descontos. As pessoas agora associam esse significado, então é uma boa ideia usar o vermelho se você quiser chamar a atenção para alguma oferta que está fazendo. Azul e verde são cores relaxantes e calmantes. Elas transmitem sentimentos de confiança e compromisso. Preto e cinza são cores elegantes. O preto também é usado para dar um toque moderno e atual. O amarelo é uma cor cativante e alegre, mas deve ser usado apenas em pequenas quantidades para destacar, caso contrário, é percebido como irritante.

A cor é uma ferramenta muito útil para criar uma identidade de marca e desencadear emoções específicas nos usuários.

Primeiro, você precisa conhecer sua marca e o que deseja que ela seja associada. Qual é o humor ou sentimento que você quer expressar? Como você quer que as pessoas se sintam ao usar seu app? Você quer que sua marca e app pareçam acessíveis, calmos, ousados, sofisticados, polidos, peculiares ou elegantes?

Depois de definir isso, veja qual cor evoca essa emoção.
As cores podem ser divididas em duas categorias principais: quentes e frias. As cores quentes tendem a estar associadas à energia, enquanto as cores frias estão ligadas à calma e segurança.

Por exemplo,

Seu próximo passo é criar seu esquema de cores. Muitas marcas de sucesso têm apenas uma ou duas cores de marca, portanto, não tenha medo de simplificar e manter a cor principal da marca.

Um esquema de cores é simplesmente a maneira como as cores são combinadas.

- Você pode escolher uma cor de base e depois diferentes tons dessa cor. Você pode usar uma roda de cores para ajudá-lo a escolher diferentes tons da mesma cor, variando a saturação e o tom da cor base para escolher tons mais claros e mais escuros. Isso é chamado de esquema de cores monocromático. Dá uma aparência mais uniforme ao seu aplicativo.
- Em seguida é o esquema de cores Triádico. Lá, você usará três cores, igualmente espaçadas na roda de cores. Isso também criará uma aparência harmoniosa, mas sem o efeito degradê do esquema monocromático.
- Um esquema de cores complementares é composto usando duas cores opostas na roda de cores. É o mais contrastante de todos os esquemas de cores, e o que mais atrai a atenção. Por exemplo, vermelho e verde, azul e laranja.
- Cores análogas são um grupo de três cores próximas umas das outras em uma roda de cores, como violeta, vermelho-violeta e vermelho. Quando essas cores são agrupadas, chamamos de esquema de cores análoga. A cor no centro desse grupo de três é às vezes chamada de cor mãe, pois as outras duas cores contêm essa cor central. Esquemas de cores análogos criam uma exibição visualmente agradável e calmante.
Seja qual for o esquema escolhido, verifique se seus textos continuam legíveis sobre o fundo. As diretrizes de acessibilidade web (WCAG) pedem um contraste de pelo menos 4,5 para 1 para texto normal e de 3 para 1 para texto grande.

Agora você está pronto para escolher as cores do seu app. Essas ferramentas gratuitas ajudarão você a usar tudo o que aprendeu neste artigo para que você possa escolher o melhor esquema de cores e paleta para seu app.

Adobe Color, a ferramenta online da Adobe construída em torno da roda de cores. Escolha uma cor base e uma harmonia (monocromática, complementar, análoga, triádica…) e a ferramenta monta a paleta para você. Ela também extrai uma paleta de uma imagem, mede o contraste entre duas cores e simula como pessoas com daltonismo veem sua paleta.

My Color.Space é um ótimo recurso gratuito para gerar paletas de cores e gradientes de cores.
Você começa com uma cor de sua escolha. Digite o código HEX e o ColorSpace gera várias paletas correspondentes à sua cor. Se você não conhece o código HEX, existem muitas ferramentas gratuitas online que fornecem o código de uma foto que você envia.

Coolors gera paletas com um clique e também permite explorar paletas prontas. Com o Image Picker, ele cria uma paleta a partir da foto que você escolher. O essencial é gratuito; existe uma versão Pro paga.

Color Viewfinder é um app conveniente quando você precisa criar paletas de cores rapidamente. Este app gratuito para iOS (com compras no app) gera automaticamente uma paleta de cores com base em uma foto no seu dispositivo e requer pouca edição e alteração. Os resultados de cores podem ser adicionados ou removidos da paleta gerada, e a seleção final de cores é exibida ao lado da foto original e seus códigos de cores HEX.

O Contrast Checker da WebAIM verifica se seus textos continuam legíveis. Digite a cor do texto e a do fundo, e a ferramenta calcula o contraste e informa se a combinação atende às diretrizes de acessibilidade (WCAG). Um bom hábito antes de validar sua paleta.

Agora você está pronto para escolher seu esquema de cores para seu app. Você tem todas as dicas e ferramentas necessárias para começar.
Se isso ainda parece um pouco demais, não se preocupe. No seu back office GoodBarber, a página Cores (Minha App › Estilo da App › Cores) oferece um catálogo de temas de cores criados por nossos designers. Encontre aquele que melhor se adapta à sua marca, selecione-o e ele se aplicará automaticamente a todas as seções do seu app!
Prefere uma paleta sob medida? Na mesma página, a Paleta mágica, uma IA treinada pela GoodBarber para as cores de app, cria uma em um clique, pensando no contraste e na legibilidade. Gere de novo até encontrar a certa e depois salve.