# Como usar um círculo cromático para escolher uma paleta

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-wheel)

O círculo cromático é a ferramenta mais antiga da cor e ainda a mais útil. Veja como ler um, por que o círculo do pintor e o da tela discordam e como transformá-lo em uma paleta.

## The short version

- 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.

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](https://gradiently.design/pt-br/guide/color-theory-basics).

## 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.

O círculo do pintor (RYB): `conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)`

Doze matizes do tradicional círculo de vermelho, amarelo e azul, desenhado com um [gradiente cônico](https://gradiently.design/pt-br/guide/conic-gradient). O vermelho fica no topo, e o círculo corre no sentido horário.

## 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 |

A mesma ideia, geometria diferente. Saiba qual círculo um guia está usando antes de segui-lo.

O círculo da tela (RGB): `conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`

O círculo de matizes por trás dos seletores de cor e do HSL. O amarelo fica a um sexto do caminho, e o ciano fica oposto ao vermelho.

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](https://gradiently.design/pt-br/guide/complementary-colors).
- **Análoga:** de três a cinco vizinhas em sequência. Calma e natural. Veja [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors).
- **Tríade:** três matizes separados por um terço do círculo. Ousada, mas equilibrada. Veja [cores em tríade](https://gradiently.design/pt-br/guide/triadic-colors).
- **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](https://gradiently.design/pt-br/guide/monochromatic-color-scheme).

- Azul: #2156a5
- Laranja (complementar): #f28c28
- Azul-esverdeado (vizinha): #1b8a8f
- Azul-violeta (vizinha): #4b3a9a
- Vermelho (tríade): #d7263d
- Amarelo (tríade): #f4e04d

Partindo do azul no círculo do pintor: sua complementar, suas duas vizinhas e os outros dois pontos da sua tríade.

## 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.

- Azul e laranja, força total: `linear-gradient(90deg, #0000ff 0%, #0000ff 50%, #ff8000 50%, #ff8000 100%)`
- Mesmos matizes: marinho e damasco: `linear-gradient(90deg, #14213d 0%, #14213d 50%, #f4b183 50%, #f4b183 100%)`

O círculo dá os matizes. A luminosidade e a saturação decidem se eles ficam bem juntos.

### 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](https://gradiently.design/pt-br/guide/css-gradient-oklch).

## 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](https://gradiently.design/pt-br/guide/gradient-color-combinations) traz exemplos testados.

## FAQ

### 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.