# Gradientes arco-íris que não parecem uma predefinição

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

O arco-íris predefinido tem uma risca amarela ofuscante e um buraco azul-escuro. Corrige a luminosidade, escolhe o teu arco e o espectro torna-se uma das ferramentas mais alegres que tens.

## The short version

- Um gradiente arco-íris passa pelos tons do espectro, e a versão predefinida parece barata porque as suas cores têm luminosidades muito diferentes.
- Em OKLCH, o amarelo puro tem uma luminosidade de cerca de 97% enquanto o azul puro fica perto dos 45%, e é por isso que um arco-íris predefinido mostra uma risca clara e uma faixa escura.
- Os gradientes arco-íris parecem desenhados quando manténs todas as paragens com uma luminosidade semelhante, baixas um pouco o croma e usas só a parte do espectro de que precisas.
- O CSS consegue misturar um arco-íris por ti com `linear-gradient(in oklch longer hue, ...)`, que percorre a roda de tons toda entre duas cores.
- O texto sobre um arco-íris precisa de uma zona calma ou de uma faixa por trás, porque o contraste muda ao longo de todo o gradiente.

Um **gradiente arco-íris** passa pelos tons do espectro, do vermelho ao laranja, amarelo, verde, azul e violeta. A versão que a maioria das ferramentas te dá parece uma predefinição porque salta em luminosidade: uma risca amarela ofuscante, uma faixa azul-escura e arestas duras entre elas. Um arco-íris que parece desenhado mantém todas as cores com uma luminosidade semelhante, usa um pouco menos de saturação e muitas vezes cobre só uma parte do espectro.

Este guia mostra porque a predefinição parece errada, três formas de a corrigir, códigos de arco-íris para copiar e o CSS que faz arco-íris suaves nos browsers modernos. Se o tom, a luminosidade e o croma são novidade para ti, os [códigos de cor explicados](https://gradiently.design/pt-pt/guide/color-codes-explained) tratam disso primeiro.

## Porque é que o arco-íris predefinido parece barato

O arco-íris clássico é construído em HSL, avançando o tom e mantendo fixas a saturação e a luminosidade. A luminosidade do HSL é uma fórmula, não uma medida de quão claras as cores parecem. Para o teu olho, o amarelo puro é muito mais claro do que o azul puro, embora o HSL diga que ambos estão a 50%. O OKLCH mede a luminosidade percebida, e os números mostram bem o problema.

| Cor | Hex | Luminosidade HSL | Luminosidade OKLCH |
| --- | --- | --- | --- |
| Vermelho | `#ff0000` | 50% | 62,8% |
| Amarelo | `#ffff00` | 50% | 96,8% |
| Verde | `#00ff00` | 50% | 86,6% |
| Ciano | `#00ffff` | 50% | 90,5% |
| Azul | `#0000ff` | 50% | 45,2% |
| Magenta | `#ff00ff` | 50% | 70,2% |

O HSL diz que estas cores são igualmente claras. A luminosidade percebida vai de 45% a 97%, e é por isso que o arco-íris predefinido parece às riscas.

- Arco-íris HSL predefinido: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Arco-íris de luminosidade uniforme: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

A mesma volta à roda de tons. O segundo mantém todas as paragens perto de 72% de luminosidade OKLCH, por isso nenhuma cor salta nem se afunda.

## Como fazer um gradiente arco-íris parecer desenhado

1. **Iguala a luminosidade** Escolhe uma única luminosidade percebida, como 72% em OKLCH, e mantém lá todas as paragens. Só esta mudança elimina a risca amarela e o buraco azul.
2. **Baixa um pouco o croma** As cores de ecrã totalmente saturadas lutam entre si. Um croma à volta de 0,12 em OKLCH mantém todos os tons vivos e ainda dentro do que os ecrãs normais conseguem mostrar.
3. **Usa um arco, não a roda inteira** Três ou quatro tons vizinhos, como coral a dourado ou verde-azulado a violeta, leem-se como uma escolha pensada. O espectro completo lê-se como um padrão de teste, a menos que seja esse o objetivo.
4. **Dá-lhe um fundo** Um arco-íris sobre branco parece um brinquedo de criança; o mesmo arco-íris a erguer-se de um quase preto parece luz através de um prisma. Decide qual queres.
5. **Junta textura ou suavidade** Grão, desfocagem ou uma queda radial lenta transformam faixas de cor em luz. Vê os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) para a parte do grão.

## Códigos de gradientes arco-íris para copiar

Os três primeiros cobrem o espectro inteiro com níveis de luminosidade diferentes. Os restantes são arcos: uma parte do arco-íris escolhida para um ambiente, que é como funciona a maioria das identidades arco-íris.

- Espectro equilibrado: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Arco-íris pastel: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Roda do espectro: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Arco do nascer do sol: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Arco da lagoa: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Arco do crepúsculo: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisma sobre preto: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Brilho perolado: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Oito gradientes arco-íris. O equilibrado e o pastel mantêm todas as paragens com a mesma luminosidade; os arcos escolhem um canto da roda; os dois últimos usam o espectro como luz.

## Arco-íris suaves em CSS com interpolação de tom OKLCH

O CSS moderno consegue dar a volta à roda de tons por ti. Definir a interpolação como `oklch` e o método de tom como `longer hue` faz o browser ir pelo caminho mais longo entre duas cores, por isso duas paragens com o mesmo tom produzem um arco-íris completo e uniforme. Funciona nas versões atuais do Chrome, Edge, Safari e Firefox; consulta a [tabela de compatibilidade do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) para o teu público.

```css
.rainbow {
  /* Fallback: hand-picked stops at even lightness */
  background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
  /* One colour, all the way round the hue wheel, at one lightness */
  background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}

.rainbow-arc {
  /* Only the short way from coral to teal, still perceptually even */
  background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}
```

A primeira regra desenha um arco-íris completo a partir de uma só cor. A segunda desenha um arco, pelo caminho mais curto entre dois tons.

Mantém o croma moderado quando fazes isto. Com croma alto, alguns tons, sobretudo o azul e o violeta, ficam fora do que um ecrã sRGB comum consegue mostrar, e o browser tem de os comprimir, o que traz de volta faixas irregulares. Há mais sobre isto em [gradientes CSS mais suaves com OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch).

## Pôr texto sobre um gradiente arco-íris

Um arco-íris é o fundo mais difícil para texto, porque o contraste muda ao longo de todo o comprimento. Um texto escuro que se lê bem sobre verde-azulado pode desaparecer sobre violeta. Coloca as palavras sobre a parte mais calma, põe-nas numa faixa ou num cartão sóbrio, ou usa um arco-íris pastel com letra escura e verifica os pontos mais claros e mais escuros por trás de cada linha. O [texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) percorre as opções.

Uma publicação quadrada com as palavras Olá cor a atravessar diretamente um gradiente arco-íris, com algumas letras mais difíceis de ler

Sem ajuda, as palavras atravessam todos os tons e o contraste está sempre a mudar.

A mesma publicação quadrada em que o gradiente suaviza por trás das palavras Olá cor, para o texto se ler com clareza

Com o campo a acalmar por trás das palavras, o arco-íris continua alegre e a linha lê-se.

## Onde encaixam os gradientes arco-íris

- **Ferramentas criativas e produtos de cor**, onde o espectro mostra amplitude
- **Marcas infantis e educação**, normalmente na versão pastel
- **Música, festivais e vida noturna**, como um prisma sobre um fundo escuro
- **Visuais holográficos e iridescentes**, como um brilho perolado pálido; vê os [gradientes holográficos](https://gradiently.design/pt-pt/guide/holographic-gradients)
- **Campanhas do Orgulho**, em que a bandeira arco-íris tem o seu próprio significado e as suas seis riscas, por isso usa-a com intenção e não como decoração

> **Escolhe primeiro o arco** Antes de recorreres ao espectro completo, pergunta que três ou quatro tons carregam o ambiente. A maioria dos designs arco-íris que parecem caros são, na verdade, arcos.

Um Mark da Gradiently pode ter até oito cores, o suficiente para um arco-íris completo e uniforme com uma matéria e grão por cima. Podes construir um, controlo a controlo, na Forge.

## FAQ

### Como faço um gradiente arco-íris em CSS?

Usa `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` para um arco-íris suave e uniforme, com um gradiente de paragens hex antes dele como alternativa.

### Porque é que o meu gradiente arco-íris tem uma risca amarela clara?

O amarelo é percebido como muito mais claro do que o azul ou o vermelho com a mesma luminosidade HSL. Mantém todas as paragens com a mesma luminosidade percebida, como 72% em OKLCH, para eliminar a risca.

### Quais são os códigos hex de um gradiente arco-íris pastel?

Experimenta `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` e `#e6c3ee`, que ficam todos numa luminosidade alta semelhante.

### Pode pôr-se texto sobre um gradiente arco-íris?

Sim, mas o contraste muda ao longo do gradiente. Põe o texto sobre a zona mais calma, numa faixa ou num cartão, ou usa um arco-íris pastel com texto escuro e verifica cada ponto por trás das palavras.