Resumindo
- Um círculo cromático organiza os matizes em uma roda para que as relações entre eles, como opostos e vizinhos, fiquem fáceis de ver.
- O círculo do pintor usa vermelho, amarelo e azul como primárias, enquanto o da tela usa vermelho, verde e azul, então as cores opostas são diferentes.
- Harmonias de cor como complementar, análoga e tríade são posições fixas no círculo.
- O círculo mostra só o matiz, então toda paleta tirada dele ainda precisa de versões claras e escuras para texto e fundos.
- Círculos digitais simples não são perceptualmente uniformes: com o mesmo ajuste, o amarelo parece muito mais claro que o azul.
Nesta página
Um círculo cromático (ou roda de cores) organiza os matizes em uma roda, na ordem em que aparecem em um arco-íris, com as pontas unidas. O valor dele é que as relações viram geometria: cores opostas contrastam forte, cores vizinhas se misturam com facilidade e cores igualmente espaçadas se equilibram. Para usar um, você escolhe um matiz de partida e depois escolhe os companheiros pela posição.
Este guia explica como o círculo é construído, em qual confiar, como ler as harmonias nele e como ir de alguns matizes a uma paleta utilizável. Para o quadro geral, comece por noções básicas de teoria das cores.
Cores primárias, secundárias e terciárias
Todo círculo começa com três primárias. Misturar duas primárias dá uma secundária, e misturar uma primária com uma secundária vizinha dá uma terciária. Três primárias, três secundárias e seis terciárias formam o conhecido círculo de doze segmentos.
conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)O círculo do pintor e o círculo da tela
Há dois círculos em uso comum, e eles discordam. O círculo do pintor é construído sobre vermelho, amarelo e azul (RYB), da mistura de pigmentos. As telas criam cor a partir de luz vermelha, verde e azul (RGB), e um círculo construído com elas tem primárias, secundárias e opostas diferentes.
| Propriedade | Círculo do pintor (RYB) | Círculo da tela (RGB) |
|---|---|---|
| Primárias | Vermelho, amarelo, azul | Vermelho, verde, azul |
| Secundárias | Laranja, verde, violeta | Amarelo, ciano, magenta |
| Oposta do vermelho | Verde | Ciano |
| Oposta do azul | Laranja | Amarelo |
| Oposta do amarelo | Violeta | Azul |
| Usado por | Pintores, ensino de arte, muitos guias de paleta | Seletores de cor, valores de matiz em CSS, a maioria dos softwares de design |
conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)Qual usar? Para trabalho digital, o círculo da tela combina com suas ferramentas, então os números de matiz que você digita coincidem com o que vê. O círculo do pintor muitas vezes dá opostas mais agradáveis, como azul e laranja, porque distribui as cores quentes com mais generosidade. Muitos designers leem as harmonias no círculo do pintor e depois escolhem os valores exatos na tela. Qualquer um serve, desde que você seja consistente.
Lendo as harmonias de cor no círculo
As harmonias são formas sobrepostas ao círculo. Gire a forma e você obtém uma nova paleta com o mesmo equilíbrio.
- Complementar: dois matizes diretamente opostos. Contraste máximo. Veja cores complementares.
- Análoga: de três a cinco vizinhas em sequência. Calma e natural. Veja cores análogas.
- Tríade: três matizes separados por um terço do círculo. Ousada, mas equilibrada. Veja cores em tríade.
- Complementar dividida: um matiz mais os dois ao lado do seu oposto. Contraste com menos tensão.
- Quadrada ou tetrádica: quatro matizes igualmente espaçados, ou dois pares complementares. Rica e difícil de controlar.
- Monocromática: um matiz em várias luminosidades. Veja paletas monocromáticas.
O que o círculo cromático não mostra
Um círculo mostra o matiz. Ele não diz nada sobre luminosidade ou saturação, e são elas que decidem boa parte de como uma paleta realmente parece. Azul e laranja em força total são ásperos juntos. Um azul-marinho profundo com um damasco suave usa os mesmos dois matizes e parece refinado. Toda paleta lida no círculo ainda precisa de um escuro, um claro e versões mais discretas de suas cores.
Círculos digitais simples são irregulares
No HSL, o amarelo puro e o azul puro têm o mesmo valor de luminosidade, mas o amarelo parece bem mais brilhante. Isso acontece porque o HSL é construído sobre os canais da tela, e não sobre como os olhos percebem o brilho. Espaços de cor perceptuais como o OKLCH corrigem isso: valores iguais de luminosidade parecem igualmente claros em todos os matizes, o que os torna melhores para criar paletas e gradientes suaves.
Como montar uma paleta a partir do círculo cromático
- 1
Escolha seu matiz âncora
Comece pela cor que precisa estar lá: a cor da marca, a cor de um produto ou uma tirada de uma foto.
- 2
Escolha uma harmonia para o clima
Análoga ou monocromática para calma; complementar, complementar dividida ou tríade para energia.
- 3
Deixe uma cor liderar
Use a âncora na maior parte do design e as outras em quantidades menores. Quantidades iguais de todas as cores raramente parecem intencionais.
- 4
Varie luminosidade e saturação
Acrescente uma versão escura e uma clara e suavize as cores de apoio. É isso que transforma matizes em paleta.
- 5
Teste em um layout real
Coloque texto sobre ela, confira o contraste e olhe no tamanho em que as pessoas vão ver.
Quando uma paleta funciona como amostras, experimente-a como gradiente. Matizes vizinhos se misturam lindamente; matizes opostos precisam de uma cor intermediária. Combinações de cores para gradientes traz exemplos testados.
Perguntas frequentes
O que é um círculo cromático?
Um círculo cromático é uma roda de matizes em ordem espectral que mostra como as cores se relacionam: opostas contrastam, vizinhas harmonizam e matizes igualmente espaçados se equilibram.
Quais são as cores primárias no círculo cromático?
No círculo tradicional do pintor, são vermelho, amarelo e azul. No círculo da tela usado pelas ferramentas digitais, são vermelho, verde e azul.
Por que as cores complementares mudam de um círculo para outro?
Os círculos do pintor e da tela têm primárias diferentes, então a roda é espaçada de outro jeito. No círculo do pintor, a oposta do azul é o laranja; no da tela, é o amarelo.
Qual círculo cromático os designers devem usar?
Para trabalho digital, o círculo da tela combina com as ferramentas. Muitos designers leem as harmonias no círculo do pintor e escolhem os valores exatos na tela. A consistência importa mais do que a escolha.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
