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

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

O círculo cromático é a ferramenta mais antiga da cor e continua a ser a mais útil. Eis como ler um, porque é que o círculo do pintor e o do ecrã discordam e como o transformar numa paleta.

## The short version

- Um círculo cromático dispõe os matizes numa roda para que as relações entre eles, como opostos e vizinhos, sejam fáceis de ver.
- O círculo do pintor usa vermelho, amarelo e azul como primárias, enquanto o círculo do ecrã usa vermelho, verde e azul, por isso as suas cores opostas diferem.
- As harmonias de cor, como complementar, análoga e tríade, são posições fixas no círculo.
- Um círculo mostra só o matiz, por isso cada paleta tirada dele precisa ainda de versões claras e escuras para texto e fundos.
- Os círculos digitais simples não são uniformes para a perceção: com a mesma definição, o amarelo parece muito mais claro do que o azul.

Um **círculo cromático** dispõe os matizes numa roda, pela ordem em que aparecem num arco-íris, com as pontas unidas. O seu valor é que as relações se tornam geometria: as cores opostas contrastam fortemente, as cores vizinhas misturam-se com facilidade e as cores espaçadas de forma igual à volta do círculo equilibram-se. Para o usar, escolhes um matiz de partida e depois escolhes as companheiras pela posição.

Este guia explica como o círculo é construído, em que círculo confiar, como ler harmonias a partir dele e como passar de alguns matizes a uma paleta utilizável. Para o quadro mais amplo, começa pelos [fundamentos da teoria da cor](https://gradiently.design/pt-pt/guide/color-theory-basics).

## Cores primárias, secundárias e terciárias

Todos os círculos começam 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 círculo tradicional de vermelho, amarelo e azul, desenhados com um [gradiente cónico](https://gradiently.design/pt-pt/guide/conic-gradient). O vermelho fica no topo e o círculo corre no sentido dos ponteiros do relógio.

## O círculo do pintor e o círculo do ecrã

Há dois círculos de uso comum, e discordam. O círculo do pintor assenta em vermelho, amarelo e azul (RYB), da mistura de pigmentos. Os ecrãs fazem a cor com luz vermelha, verde e azul (RGB), e um círculo construído a partir dessas tem primárias diferentes, secundárias diferentes e opostos diferentes.

| Propriedade | Círculo do pintor (RYB) | Círculo do ecrã (RGB) |
| --- | --- | --- |
| Primárias | Vermelho, amarelo, azul | Vermelho, verde, azul |
| Secundárias | Laranja, verde, violeta | Amarelo, ciano, magenta |
| Oposto do vermelho | Verde | Ciano |
| Oposto do azul | Laranja | Amarelo |
| Oposto do amarelo | Violeta | Azul |
| Usado por | Pintores, ensino artístico, muitos guias de paletas | Seletores de cor, valores de matiz em CSS, a maioria do software de design |

A mesma ideia, geometria diferente. Sabe que círculo um guia está a usar antes de o seguir.

O círculo do ecrã (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, o ciano oposto ao vermelho.

Qual deves usar? Para trabalho digital, o círculo do ecrã corresponde às tuas ferramentas, por isso os números de matiz que escreves coincidem com o que vês. O círculo do pintor dá muitas vezes opostos 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 valores exatos no ecrã. Qualquer um serve, desde que sejas coerente.

## Ler harmonias de cor no círculo

As harmonias são formas sobrepostas ao círculo. Roda a forma e obténs uma nova paleta com o mesmo equilíbrio.

- **Complementar:** dois matizes diretamente opostos. Contraste máximo. Vê as [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors).
- **Análoga:** três a cinco vizinhas seguidas. Calma e natural. Vê as [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors).
- **Tríade:** três matizes a um terço do círculo de distância. Ousada mas equilibrada. Vê as [cores em tríade](https://gradiently.design/pt-pt/guide/triadic-colors).
- **Complementar dividida:** um matiz mais os dois de cada 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 muitas luminosidades. Vê as [paletas monocromáticas](https://gradiently.design/pt-pt/guide/monochromatic-color-scheme).

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

Partindo do azul no círculo do pintor: o seu complementar, as 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. Não diz nada sobre luminosidade ou saturação, e são estas que decidem a maior parte do aspeto real de uma paleta. Azul e laranja com toda a força ficam agressivos juntos. Azul-marinho profundo com um alperce suave usa os mesmos dois matizes e parece refinado. Cada paleta que lês num círculo precisa ainda de um escuro, um claro e algumas versões mais discretas das suas cores.

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

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

### Os círculos digitais simples são irregulares

No HSL, o amarelo puro e o azul puro partilham o mesmo valor de luminosidade, mas o amarelo parece muito mais brilhante. Isso acontece porque o HSL assenta nos canais do ecrã e não na forma como os olhos percebem o brilho. Os espaços de cor perceptuais, como o OKLCH, corrigem isto: valores de luminosidade iguais parecem igualmente claros em todos os matizes, o que os torna melhores para construir paletas e [gradientes suaves](https://gradiently.design/pt-pt/guide/css-gradient-oklch).

## Como construir uma paleta a partir do círculo cromático

1. **Escolhe o teu matiz âncora** Começa pela cor que tem de estar lá: uma cor da marca, uma cor do produto ou uma tirada de uma foto.
2. **Escolhe uma harmonia para o ambiente** Análoga ou monocromática para calma; complementar, complementar dividida ou tríade para energia.
3. **Deixa uma cor liderar** Usa a âncora para a maior parte do design e as outras em menor quantidade. Quantidades iguais de todas as cores raramente parecem intencionais.
4. **Varia a luminosidade e a saturação** Acrescenta uma versão escura e uma clara e suaviza as cores de apoio. É isto que transforma matizes numa paleta.
5. **Testa numa composição real** Põe texto por cima, verifica o contraste e vê-a no tamanho em que as pessoas a vão ver.

Quando uma paleta funcionar como amostras, experimenta-a como gradiente. Os matizes vizinhos misturam-se lindamente; os matizes opostos precisam de uma cor a meio. As [combinações de cores para gradientes](https://gradiently.design/pt-pt/guide/gradient-color-combinations) têm exemplos testados.

## FAQ

### O que é um círculo cromático?

Um círculo cromático é uma roda de matizes por ordem espetral que mostra como as cores se relacionam: os opostos contrastam, os vizinhos harmonizam e os matizes igualmente espaçados equilibram-se.

### Quais são as cores primárias no círculo cromático?

No círculo tradicional do pintor são o vermelho, o amarelo e o azul. No círculo do ecrã usado pelas ferramentas digitais são o vermelho, o verde e o azul.

### Porque é que as cores complementares são diferentes em círculos diferentes?

O círculo do pintor e o do ecrã têm primárias diferentes, por isso a roda é espaçada de forma diferente. No círculo do pintor o oposto do azul é o laranja; no círculo do ecrã é o amarelo.

### Que círculo cromático devem usar os designers?

Para trabalho digital, o círculo do ecrã corresponde às ferramentas. Muitos designers leem as harmonias no círculo do pintor e escolhem valores exatos no ecrã. A coerência importa mais do que a escolha.