25%Off

Compre com desconto

Começou!

Começou!

00

DIAS

00

HORAS

00

MIN

00

SEG

Cores com harmonia

Cores com harmonia
Natan Souza
Natan Souza

Compartilhe

cor-estranha

Pode ser flat, mas as cores parecem não combinar entre si, não há harmonia entre elas.

Chutar até acertar? Não mais!

Para ajudar a evitar isso que existe a teoria das cores. Ela nos ajuda a combinar cores de uma forma harmoniosa e com algum sentido. Nela há algumas regras básicas de uso de cores e a relação entre elas, como:

  • cores complementares
complementar
  • cores análogas
analoga

Entre diversas outras relações que foram definidas com o passar do tempo. Essas relações entre as cores são geralmente baseadas ou podem ser facilmente visualizadas nas suas posições no círculo cromático:

circulo-cromatico

Banner da promoção da black friday, com os dizeres: A Black Friday Alura está chegando. Faça parte da Lista VIP, receba o maior desconto do ano em primeira mão e garanta bônus exclusivos. Quero ser VIP

Facilitando essa escolha com o Adobe Color

Uma ferramenta que ajuda a encontrar uma boa paleta cromática é a Adobe Color, em que você escolhe uma cor base, e vai testando a regra que mais te agradar e fazer sentido com o seu projeto.

Com essa ferramenta você também consegue salvar suas paletas na sua conta da Adobe, e puxar as cores direto do Photoshop e/ou do Illustrator.

adobe-color

Você pode escolher a cor base seja por causa da psicologia das cores (laranja costuma ser conectado a inovação, azul com tecnologia, etc) ou pela identidade visual da sua empresa.

Com a cor base escolhida, dado as regras de combinações acima, podemos concluir que existe um conjunto finito de combinações bacanas. Por isso que em alguns manuais de identidade visual acabamos notando semelhanças na escolha das cores, pois as combinações de cores para um resultado harmonioso é limitado.

O mesmo parece ser válido para a música e diversas outras áreas com um número limitado de harmonias: começando em um tom, existe um número limitado de tons harmônicos a ele, por isso muitas melodias “se parecem”.

E o header?

Uma sugestão para a mudança do exemplo do header, baseada na regra de triangulação (ou triádica):

triadica

Perceba que comparado com o primeiro exemplo, o header ficou mais elegante e as cores não parecem brigar entre si.

Saber escolher as cores do seu projeto faz uma enorme diferença visual, seja para o bem ou para o mal.

Natan Souza
Natan Souza

Sou educador, designer e líder com foco em UX, liderando projetos que melhoram a experiência do usuário e impulsionam negócios.Na Alura, atingi 90% de satisfação e 80% de retenção de alunos com estratégias centradas no usuário e métricas de produto. Como gestor de pessoas e Product Designer, também sou autor de livros sobre front-end e escrevo para o blog Dicas UX. Sou entusiasta de IA, aplicando-a para aprimorar produtos educacionais e colaborar em iniciativas inovadoras no setor EdTech.

Veja outros artigos sobre UX & Design