Círculo Cromático em Design

Introdução

Um círculo cromático é uma abstração ilustrativa para representar a relação entre cores primárias, secundárias e terciárias dentro de um círculo.

É importante entender que não existe apenas um único tipo de círculo cromático. Ao longo da história grandes pesquisadores como, por exemplo, Isaac Newton e Goethe, criaram suas próprias abstrações para organizar as relações entre as cores.

O círculo cromático mais comum é subdivido em 12 cores, sendo composto por 3 cores primárias (amarelo, vermelho e azul), 3 cores secundárias resultantes da combinação das primárias (verde, laranja e violeta) e 6 cores terciárias que são resultantes das combinações das cores anteriores.

Talvez a representação que nós, designers, estamos mais acostumados a ver é o círculo de cores proposto por Johannes Itten, professor da Bauhaus, chamado de Farbkreis. Nele, podemos observar com clareza as relações entre as cores primárias e como suas combinações geram as demais cores.

Ao entender as relações que as cores possuem umas com as outras fica mais fácil escolher as opções que melhor se adequam as necessidades dos nossos designs.

Para compreender essas relações, geralmente trabalhamos com o que chamamos de acordes de cores: díades (complementares), tríades (triângulo equilátero) e tétrades (dois pares de complementares que formam um quadrado). Também podemos incluir as relações análogas (3 cores uma ao lado da outra) e meio-complementares, que utiliza as duas cores ao lado da sua cor complementar.

A partir de agora, veremos com mais detalhes cada uma das combinações e como elas foram utilizadas em casos reais de design.

Análogas

Essa é uma combinação cromática suave e pode ser adquirida simplesmente escolhendo três cores próximas dentro do círculo cromático. É uma opção interessante para quem deseja criar composições que flertam com o monocromático.

Complementares

São cores opostas umas as outras no círculo cromático que resultam em um contraste forte: vermelho-verde e laranja-azul são dois bons exemplos.

A utilização dessa combinação deve ser feita de maneira delicada e inteligente, geralmente modificando outras características das cores para que o resultado seja visualmente coeso.

Tenha atenção redobrada ao combinar as cores verde e vermelho. Para pessoas com Deuteranopia (ausência de fotorreceptores verdes), essas cores perdem o contraste e costumam ser visualizadas como tons de bege, amarelo ou marrom.

Em situações como a da imagem a seguir, se não houver nada além das cores para a distinção entre o que é receita ou despesa, o usuário pode ficar confuso.

Complementares Dupla

É quando você une dois pares de cores complementares. Dependendo do arranjo de cores, você pode acabar dentro de uma combinação de tríade ou quadrada. Você também pode combinar duas cores que estão lado a lado e suas complementares.

Nesse arranjo de acordes você tem uma flexibilidade bem maior para explorar dezenas de combinações.

Ambas as imagens utilizam do mesmo acorde de cores, mas perceba como as alterações nas tonalidades e matizes criam artefatos completamente diferentes.

Tríades

Essa combinação é adquirida ao traçarmos um triângulo em cima do círculo cromático. Sua combinação cria uma paleta vibrante mas ao mesmo tempo equilibrada.

Para alcançar esse equilíbrio é necessário modificar outros elementos da cor, como os níveis de contraste e luminosidade.

Meio-complementares

É uma composição que ao invés de utilizar a cor complementar, opta pelas duas cores adjacentes do seu complemento, como verde, vermelho-alaranjado e vermelho-violeta.

Quadrado

A combinação em quadrado pode ser adquirida ao combinarmos quatro cores com um intervalo de duas cores entre elas. Em design digital pode ser um pouco difícil encontrarmos esse tipo de combinação, uma vez que interfaces geralmente precisam de menos cores para funcionar.

Tétrade

Também é uma combinação de quatro cores, mas ao contrário da anterior, essa é adquirida ao conectarmos um retângulo no círculo cromático onde o intervalo é de apenas 1 cor. Ao mesmo tempo que oferece mais cores para trabalhar, também aumenta a dificuldade em tornar essas composições coerentes e agradáveis.

Também veremos essa combinação com mais frequência em design gráfico do que em design de interfaces.

Combinações proporcionais

Depois de muitas tentativas você vai perceber que algumas combinações propostas pelos acordes simplesmente não funcionam em qualquer lugar. Isso acontece porque as cores nos diferentes círculos cromáticos são, como mencionado no início, apenas uma representação abstrata das suas relações.

Há inúmeros fatores que modificam nossa percepção em relação a interação entre duas ou mais cores. Um deles está diretamente relacionado com a quantidade de luz emitida pela cor.

De acordo com os estudos do Goethe, a cor amarela, por exemplo, é a que mais emite luz dentro do espectro cromático. Ao combiná-la com outras cores precisamos escolher opções que não emitem tanta luz, como roxo ou azul, ou usar uma proporção muito menor de amarelo em relação a outras cores para que se crie uma harmonia na composição.

Ao nos aprofundarmos em teoria das cores, veremos que o estudo de Goethe e a atribuição de valores para cada cor ajudou Johannes Itten, famoso professor da Bauhaus, a desenvolver um método de como distribuir proporcionalmente as cores dentro de um espaço.

Teremos uma aula sobre este assunto, mas se já quiser ir se familiarizando com o tema, leia a partir da página 59 em diante no livro The Elements of Color, escrito pelo Johannes Itten.

Esse tipo de conhecimento pode parecer, a princípio, irrelevante para alguém que trabalha com design de interfaces. Mas quando você precisa desenvolver uma interface que necessita de escolhas conscientes de cores porque ela será utilizada em um painel gigante em uma sala fechada, esse conhecimento vem ao seu encontro e dá suporte às suas escolhas.

Limitações

O círculo cromático, embora útil, não abrange todas as possibilidades de combinação de cores possíveis.

Temos a nossa disposição técnicas como combinação monocromática, cores frias e quentes, preto e branco, cores contextuais, cores inspiradas na natureza e muitas outras possibilidades.

É necessário pensar além das 12 cores apresentadas. Se um círculo tem 360º, isso significa que podemos facilmente ter uma cor a cada 1 grau, aumentando consideravelmente nossas possibilidades de combinações.

Eu já falei explorei alguns desses tópicos na aula sobre Paleta de Cores, mas veremos mais sobre tudo isso em outras aulas também.

Se você tiver qualquer dúvida a respeito dessa aula, utilize o canal de cores em nosso discord para perguntar.