Círculo cromático
Gere facilmente uma paleta de cores personalizada com o Figma
Abra no Figma
Escolha uma cor
As cores têm um papel importantíssimo em nossa vida diária: influenciam nossas emoções, orientam nossas decisões e moldam nossa percepção do mundo.
Imagine que você se dedicou de corpo e alma à criação de um design incrível. Você acertou em cheio no layout, a tipografia está perfeita, mas algo parece errado. As cores não estão funcionando.
No mundo do design, a escolha das cores não é apenas uma questão de estética. As cores podem guiar os olhares pelo seu projeto, evocar emoções, contar histórias e, por fim, criar uma experiência. Escolher as cores certas faz toda a diferença entre um projeto claro e envolvente e outro que deixa as pessoas confusas ou desorientadas.
Mas com um vasto espectro de cores ao seu alcance, como ter certeza de que está escolhendo as cores certas e combinando-as de forma eficaz? É aí que entra o círculo cromático — uma ferramenta poderosa para criar paletas de cores harmoniosas que levam seus designs para outro nível.
O círculo cromático é uma ferramenta simples, mas poderosa, que ajuda os designers a tomar decisões sobre cores, criar esquemas que ressoem com o público e atingir objetivos de design específicos. Esse diagrama circular organiza as cores com base em suas relações, categorizando-as em cores primárias, secundárias e terciárias, ilustrando como elas se transformam e misturam. Os designers usam essa ferramenta de visualização para compreender as interações das cores e criar esquemas de cores harmoniosos para projetos digitais.
Quem inventou o círculo cromático?
Isaac Newton inventou o círculo cromático em 1666, estabelecendo as bases para a teoria das cores moderna. Sua curiosidade pela luz o levou a experimentar passar a luz branca por um prisma, separando-a num espectro de cores. Esse fenômeno inspirou Newton a organizar essas cores em formato circular, criando a primeira roda de cores. Esse diagrama engenhoso demonstrou como as cores se relacionam e estabeleceu uma forma sistemática de entender como elas interagem e se misturam. O círculo cromático de Isaac Newton continua sendo uma ferramenta fundamental na ciência e na arte.
Quantas cores têm no círculo cromático?
Normalmente, o círculo cromático possui 12 cores: três cores básicas (vermelho, amarelo e azul, também conhecidas como cores primárias), três cores secundárias (laranja, verde e violeta) e seis cores terciárias (vermelho-alaranjado, amarelo-alaranjado, amarelo-esverdeado, azul-esverdeado, azul-violeta e vermelho-violeta).
Os círculos de cores avançados incorporam um espectro mais amplo de matizes, sombras e tons para um design de cores mais sutil — especialmente útil para design digital e de UI. Isso oferece aos designers um controle mais preciso sobre a seleção de cores, facilitando a criação de paletas e temas de cores complexos e refinados.
Usar o círculo cromático é uma maneira simples e eficaz de criar uma paleta de cores atraente e coesa para qualquer projeto. Veja como fazer isso:
Passo 1: escolha uma cor de base
Use o seletor de cores para selecionar uma cor de base no círculo. Essa cor será a base de sua paleta de cores, definindo o tom e a vibe do seu design e influenciando a seleção de cores adicionais.
Passo 2: selecione um esquema de cores
Selecione um esquema de cores. Cada esquema oferece um impacto visual diferente:
- Complementar. Oferece contraste máximo ao usar cores diretamente opostas.
- Triádico. Cria uma aparência vibrante, porém equilibrada, usando cores numa formação triangular.
- Análogo. Produz um efeito harmônico com cores adjacentes.
- Dividido. Proporciona um visual de alto contraste com menos tensão, usando a cor de base e duas cores adjacentes como complemento.
- Quadrado. Aumenta a diversidade com quatro cores uniformemente espaçadas ao redor do círculo.
- Monocromático. Aproveita o poder da claridade (matizes) e da escuridão (tons) para criar transições sutis e contrastes marcantes a partir da cor de base.
Passo 3: aplique ao seu design
Após encontrar a melhor paleta de cores para seu projeto, aplique-a ao design para obter o impacto visual desejado.
A teoria das cores fornece um framework para os designers criarem o esquema de cores perfeito e transmitirem a impressão desejada, como sofisticação com roxos profundos e dourados ou sensação de calma com azuis e verdes suaves. Seja para chamar a atenção com combinações de alto contraste ou para criar uma atmosfera harmoniosa, é crucial entender a teoria das cores. Aqui está uma visão geral de alguns conceitos-chave:
O que são cores primárias (RYB)?
As cores primárias no modelo RYB são vermelho, amarelo e azul. Essas três cores formam a base do círculo cromático e podem ser misturadas em diferentes proporções para criar todas as demais cores.
O que são cores secundárias?
As cores secundárias ocupam os espaços entre as cores primárias no círculo cromático e são formadas pela mistura de duas tonalidades primárias. Por exemplo, a mistura de vermelho e azul gera o roxo, enquanto a combinação de vermelho e amarelo forma o laranja. Para lembrar como o verde é produzido, veja as cores primárias adjacentes para obter sua resposta: amarelo e azul.
O que são cores terciárias?
Preenchendo o restante do círculo estão as cores terciárias, também chamadas de cores intermediárias. Elas são obtidas quando você mistura uma cor primária e uma secundária. Por exemplo, a mistura de vermelho e laranja resulta em vermelho-alaranjado e completa o espaço que falta entre as duas. Com um círculo de cores online, você pode ajustar a tonalidade individual de vermelho-alaranjado que deseja com base no seu posicionamento na roda. Você também pode misturar azul-esverdeado, azul-violeta, vermelho-alaranjado, vermelho-violeta, amarelo-alaranjado e amarelo-esverdeado para criar cores terciárias exclusivas. Essa capacidade granular de seleção de cores ajuda os designers de produtos a encontrar a tonalidade e as cores de destaque exatas que desejam.
As cores têm um papel crucial na maneira como um produto é acessado, percebido, lembrado e diferenciado dos concorrentes. Quando cuidadosamente selecionadas com o contexto do produto em mente — seu público-alvo, setor e resultados desejados, as cores são uma ferramenta poderosa que pode influenciar o comportamento do usuário.
— Chelsea White, designer de marca no Figma
Quais são os sete esquemas de cores?
Os esquemas de cores são combinações estratégicas de cores que ajudam a alcançar harmonia visual. Esses esquemas usam os princípios da teoria das cores para criar designs esteticamente agradáveis. Há sete tipos esquemas de cores mais comuns:
Cores complementares
Esquemas complementares combinam cores de lados opostos do círculo cromático para criar um alto contraste. Para encontrar a cor complementar, basta escolher uma cor e depois percorrer 180° em torno do círculo cromático. Alguns esquemas de cores complementares são bem conhecidos e populares, como vermelho e verde. E podem ser poderosos caso queira cores quentes e frias no seu design.
Cores complementares divididas
Cores complementares divididas são combinações de cores em que você combina uma cor de base com as duas cores terciárias adjacentes em cada lado da cor. Isso resulta numa paleta de três cores e ajuda a criar uma paleta de cores mais sutil.
Cores monocromáticas
As cores monocromáticas são provavelmente as mais fáceis de entender, já que são apenas uma versão mais clara e outra mais escura da cor primária. O esquema de cores monocromático elimina a complexidade da tomada de decisão em torno do uso de várias cores contrastantes e, em geral, permite que os designers usem as cores de forma eficaz e sutil. Para criar uma paleta de cores monocromática, basta ajustar as versões mais claras e mais escuras na mesma proporção da sua cor primária.
Cores análogas
Cores análogas são grupos de três cores adjacentes no círculo cromático. Isso cria uma paleta de cores mais suave e natural. A natureza, inclusive, tem muitos tons próximos. Basta pensar nas folhas de uma árvore ou nas diferenças sutis na cor do oceano. Um esquema de cores análogas é bastante harmonioso e pode ajudar a unir diferentes elementos do design.
Cores triádicas
Um esquema de cores triádicas possui três cores igualmente contrastantes. Os pontos são distribuídos uniformemente em torno do círculo cromático, formando um triângulo equilátero. Geralmente, é melhor escolher uma única cor primária e usar as outras duas como realces nos designs. Os esquemas de cores triádicas tendem a ser mais ousados e divertidos.
Cores tetrádicas (duplas complementares)
O que o Google e a Microsoft têm em comum? Ambas usam paletas de cores tetrádicas nos seus logos. Tetrádico significa um grupo de quatro e, neste caso, estamos usando o círculo cromático para selecionar quatro cores que formam um retângulo. Essas cores incluem dois pares de cores complementares, criando uma paleta vibrante e energética. O esquema de cores tetrádicas também é conhecido como "harmonia dupla complementar".
Quadrado
Semelhante ao tetrádico, um esquema de cores quadrado usa quatro cores, mas elas são espaçadas uniformemente no círculo cromático, formando um quadrado. Isso cria uma aparência mais equilibrada em comparação com o alto contraste do esquema anterior. Da mesma forma, é melhor escolher uma cor dominante e usar as outras como realces.
Cores quentes x cores frias
O círculo cromático possui tonalidades quentes e frias. As cores quentes transmitem intensidade, como vermelho, laranja e amarelo. Os tons frios, como roxo, azul e verde, evocam sensações de calma e relaxamento. Reparou como o app de meditação Calm usa principalmente a cor azul? Ela foi escolhida intencionalmente para evocar uma sensação de paz.
Um modelo de cores é um sistema que ajuda a representar as cores usando valores numéricos. Os quatro modelos de cores usados nesta página são:
- Vermelho, verde e azul (RGB)
- Ciano, magenta, amarelo e preto (CMYK)
- Matiz, saturação e luminosidade (HSL)
- Códigos hexadecimais
Vermelho, verde e azul (RGB)
O modelo de cores vermelho, verde e azul (RBG) é a base para praticamente todos os designs exibidos em telas. Esse modelo de cores se baseia na percepção humana das cores e na forma como nossos olhos interagem com a luz. Essas "cores aditivas" podem ser misturadas a uma variedade de cores com as quais interagimos em nossas telas todos os dias.
Ciano, magenta, amarelo e preto (CMYK)
Por outro lado, o modelo CMYK é a base de todos os designs impressos. Essas "cores subtrativas" absorvem comprimentos de onda de luz, que correspondem mais claramente aos pigmentos encontrados no mundo real.
- Ciano (C): o ciano é uma cor verde-azulada. Quando a tinta ciano é aplicada a uma superfície, ela absorve a luz vermelha, fazendo com que pareça azul-esverdeada ao olho humano.
- Magenta (M): o magenta é uma cor vermelho-arroxeada. Ela absorve a luz verde, levando à percepção de uma tonalidade avermelhada-arroxeada.
- Amarelo (Y): o amarelo absorve a luz azul, resultando em uma cor amarelada quando impressa.
- Preto (K): o "K" em CMYK significa "chave", que se refere ao componente preto. A tinta preta é usada para aumentar a profundidade e o contraste de imagens e textos. Além disso, usar tinta preta ajuda a evitar que as cores fiquem turvas quando se tenta criar o preto por meio da combinação de cores.
Matiz, saturação e luminosidade
O matiz representa as cores vistas na roda de cores. Pense nele como um espectro num círculo de 360º. Ao navegar por esse círculo, você encontra diferentes matizes.
- Matiz de cor: a definição de matiz é um pouco complexa, mas basicamente se refere às cores que você vê no círculo cromático. O círculo cromático tem 360º e você encontra diferentes matizes à medida que o percorre.
- Saturação: a vibração ou intensidade de um matiz, conhecida como saturação, reflete sua riqueza e pureza.Na parte externa do círculo cromático, você pode ver um matiz com saturação total. À medida que você se dirige ao centro do círculo, ele se torna menos intenso. Para diminuir a intensidade dos matizes, misturamos preto e branco (ou seja, cinza).
- Luminosidade: a luminosidade determina a quantidade de preto ou branco que misturamos numa cor. Você pode obter cores pastel ao misturar mais branco, e uma paleta mais profunda e escura ao misturar mais preto.
Códigos hexadecimais
Os códigos hexadecimais (ou códigos hex), mostram ao computador a quantidade de vermelho, verde e azul a ser misturada para produzir a cor de um pixel na sua tela.
Cada pixel da tela é composto por três elementos de cores que produzem luz vermelha, verde e azul. Esses elementos de cor (chamados de subpixels), são tão pequenos que parecem ser uma única cor ao olho humano.
Misturando diferentes quantidades de luz vermelha, verde e azul, cada pixel pode exibir até 16 milhões de cores, o que está além do que o olho humano pode ver.
Cada pixel pode misturar 256 valores de vermelho, 256 valores de verde e 256 valores de azul para gerar 16 milhões de possibilidades de cores (multiplique 256 x 256 x 256 e você terá mais de 16 milhões). Os computadores enviam esses valores para cada pixel usando código binário, uma linguagem composta de 1s e 0s. Por exemplo, um valor vermelho de 200 seria representado como 11001000 em código binário. Como o código binário é incompreensível para os seres humanos, o sistema hexadecimal é empregado como uma alternativa legível.
Como o código hex funciona?
O código hexadecimal possui três valores — um para vermelho, verde e azul, cada um representado por dois dígitos. Por exemplo, #F234A2 consiste em:
- vermelho: F2
- verde: 34
- azul: A2
O que querem dizer essas letras? Diferentemente do nosso sistema usual de base 10, a contagem hexadecimal usa a base 16. Ela vai de 0 a 9 e depois, para representar números de 10 a 15, usa de A a F.
Como fazer a conversão entre códigos hex e RGB
Como os códigos hex e os valores HSL são apenas jeitos diferentes de representar o modelo de cores RGB, você pode fazer a conversão entre eles. Converter um código hex num valor RGB não é algo que você precisa fazer manualmente com frequência, mas existem alguns cálculos rápidos para isso. Para cada um dos três valores:
- Pegue o primeiro número (ou letra) e multiplique por 16
- Adicione o segundo número (ou letra)
Para #E234A2, o primeiro valor é E2. Isso representa o número 226 ( 14 x 16 + 2 ). Esse número é o valor RGB para a cor vermelha. E #E234A2 tem os seguintes valores RGB:
- vermelho: 226
- verde: 49
- azul: 152
(Você também pode converter códigos hexadecimais ou valores RGB em valores HSL, mas os cálculos são mais complicados!)
Perfis de cores no design digital: sRGB e P3
Vários dispositivos, monitores, navegadores e apps usam diversas tecnologias para renderização de cores, o que pode resultar em disparidades visuais. Ao criar designs para plataformas digitais, é fundamental considerar os perfis de cores, já que eles estabelecem um padrão consistente para definir e renderizar cores com base na tela específica.
Perfis de cores no design digital, como sRGB e P3, garantem uma renderização de cores consistente em todos os dispositivos. O sRGB tem sido o padrão da web há décadas para criadores de conteúdo e web designers, garantindo consistência visual na maioria dos dispositivos dos usuários. O Display P3, geralmente abreviado como P3, pode renderizar um espectro de cores com maior vibração, representando 49% mais cores distinguíveis do que o sRGB. Porém, usar P3 em smartphones ou laptops projetados para sRGB pode levar a um consumo excessivo de energia, pois o dispositivo precisa trabalhar mais para renderizar a extensa gama de cores. Se você estiver criando designs para plataformas como iOS ou telas de alta definição/retina, o Display P3 é a melhor opção, mas nem todos os apps e softwares suportam totalmente sua faixa de cores mais ampla.
Veja aqui como o Figma é compatível com perfis de cores P3.
WCAG e acessibilidade de cores
Em 1999, o World Wide Web Consortium (W3C) publicou a primeira versão das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Esse documento técnico visa garantir que o conteúdo da internet seja acessível a todos os usuários. Reconhecidas como padrão mundial para acessibilidade na web, as recomendações do W3C têm influência significativa nas comunidades de desenvolvimento web e design digital. A organização publica atualizações contínuas para refletir os avanços tecnológicos e as necessidades emergentes de acessibilidade.
O documento atual, WCAG 2.1, amplia as diretrizes de acessibilidade na web, abordando uma gama maior de deficiências, inclusive limitações cognitivas e uso de dispositivos móveis, criando uma experiência digital mais inclusiva. Um aspecto fundamental abordado nas diretrizes é a acessibilidade visual, principalmente a importância do contraste no design de cores. Um contraste adequado garante que o texto e os elementos interativos se destaquem contra as cores de fundo, o que é essencial para usuários com deficiências visuais, como daltonismo ou baixa visão.
As recomendações das WCAG especificam taxas mínimas de contraste para texto e imagens de texto para garantir que todos os usuários, independentemente de suas capacidades visuais, possam acessar as informações. Por exemplo, é recomendada uma taxa de contraste mínima de 4,5:1 para textos normais. Textos maiores devem ter uma proporção de pelo menos 3:1.
A nova versão WCAG 3.0 está sendo desenvolvida atualmente e promete ser ainda mais abrangente. Espera-se que sejam introduzidas diretrizes mais detalhadas para o contraste de cores, entre outras melhorias.
Siga aprendendo
O que é a teoria das cores?
A teoria das cores ajuda designers a selecionar cores que capturam a atenção dos usuários e valorizam a marca.
Saiba mais
UI design
Domine todos os detalhes do processo de design da interface do usuário.
Saiba mais
UX design
Descubra como criar experiências incríveis e significativas para os usuários.
Saiba mais