destaque teoria das cores

Cores com harmonia

(Last Updated On: 24 de fevereiro de 2016)

Sabe quando você foi encarregado de escolher as cores de algum projeto e o resultado fica parecido com:

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

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.

Quer saber mais sobre cores, composição e identidade visual? Por que não dá uma conferida em nossa trilha de Design e UX?

Fique por dentro

Bacharel em Design Digital, atua na área de web há cerca de cinco anos. Já trabalhou também com animação e edição de vídeo. Atualmente desenvolve e ensina front end e UX Design na Caelum. Ama tecnologia, front end, design, jogos e coisas revolucionárias.

  • Ótimo artigo. Uma dúvida, entre as regras de utilização do círculo cromático, qual é a mais utilizada?

    • Natan Souza

      Oi Bruno, muito obrigado pelo seu elogio e comentário!

      Googlei se existem pesquisas com relação a isso, e infelizmente não encontrei nada. :/

      Mas um bom caminho é você pensar no sentimento que você quer passar com as cores escolhidas (psicologia das cores). Outro norte é se perguntar se você precisa mesmo de X cores para fazer um logo, por exemplo, será que duas já não bastariam? Se você quer algo com mais contraste o esquema complementar fica bacana.

      Abcs!

  • Rejane Wronowski

    Que orgulho Natan Parabéns bjs

    • Natan Souza

      Professora Rejane!!! Muito obrigado!! 🙂

  • Fala ai Natan, ótimo post.

    Foi dito que azul é referente a tecnologia, laranja a inovação, onde mais eu posso ver isso sobre outras cores ?

    Abraços

    • Natan Souza

      Opa Matheus, obrigado cara!

      Você pode pesquisar por “simbologia das cores”.

      Neste link o autor comenta das cores e no final tem um infográfico bacana.
      Abcs!

Próximo ArtigoDeclarando duas variáveis com o mesmo nome