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 Escola de UX e Design: Matricula-se na escola de UX e Design. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

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

Atualmente projeto, ensino e lidero UX / Product Design na Alura Cursos Online de Tecnologia.UX Designer e desenvolvedor front-end com um histórico de quatro anos em ensinar.Desenvolvimento de interfaces web e sua implementação front-end, desde o HTML/CSS, projetando protótipos de alta fidelidade e testes com usuários.

Veja outros artigos sobre UX & Design