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

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

O arco-íris padrão tem uma faixa amarela ofuscante e um buraco azul-escuro no meio. Acerte a luminosidade, escolha o seu arco e o espectro vira uma das ferramentas mais alegres que você tem.

## The short version

- Um gradiente arco-íris passa pelos matizes do espectro, e a versão padrão parece barata porque as suas cores têm luminosidades muito diferentes.
- Em OKLCH, o amarelo puro tem luminosidade de cerca de 97%, enquanto o azul puro fica perto de 45%, e é por isso que um arco-íris padrão mostra uma faixa clara e uma faixa escura.
- Gradientes arco-íris parecem pensados quando você mantém todas as paradas numa luminosidade parecida, reduz um pouco o croma e usa só a parte do espectro de que precisa.
- O CSS pode misturar um arco-íris por você com `linear-gradient(in oklch longer hue, ...)`, que percorre o círculo de matizes inteiro entre duas cores.
- O texto sobre um arco-íris precisa de uma área calma ou de uma faixa por trás, porque o contraste muda ao longo de todo o gradiente.

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

Este guia mostra por que a predefinição parece errada, três formas de corrigi-la, códigos de arco-íris para copiar e o CSS que cria arco-íris suaves nos navegadores modernos. Se matiz, luminosidade e croma são novidade para você, o guia de [códigos de cor explicados](https://gradiently.design/pt-br/guide/color-codes-explained) trata disso primeiro.

## Por que o arco-íris padrão parece barato

O arco-íris clássico é feito em HSL, avançando o matiz enquanto a saturação e a luminosidade ficam fixas. A luminosidade do HSL é uma fórmula, não uma medida de quão claras as cores parecem. Para o seu olho, o amarelo puro é muito mais claro que o azul puro, mesmo que o HSL diga que os dois têm 50%. O OKLCH mede a luminosidade percebida, e os números mostram o problema com clareza.

| 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 todas são igualmente claras. A luminosidade percebida vai de 45% a 97%, e é por isso que o arco-íris padrão parece listrado.

- Arco-íris HSL padrão: `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 pelo círculo de matizes. O segundo mantém todas as paradas perto de 72% de luminosidade OKLCH, então nenhuma cor salta nem afunda.

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

1. **Iguale a luminosidade** Escolha uma única luminosidade percebida, como 72% em OKLCH, e mantenha todas as paradas nela. Essa única mudança elimina a faixa amarela e o buraco azul.
2. **Reduza um pouco o croma** Cores de tela totalmente saturadas brigam entre si. Um croma perto de 0,12 em OKLCH mantém todos os matizes vivos e ainda dentro do que as telas comuns mostram.
3. **Use um arco, não o círculo inteiro** Três ou quatro matizes vizinhos, como coral ao dourado ou verde-azulado ao violeta, parecem uma escolha pensada. O espectro completo parece um padrão de teste, a menos que esse seja o objetivo.
4. **Dê um fundo a ele** Um arco-íris sobre branco parece brinquedo de criança; o mesmo arco-íris surgindo do quase preto parece luz passando por um prisma. Decida qual você quer.
5. **Acrescente textura ou suavidade** Grão, desfoque ou uma queda radial lenta transformam faixas de cor em luz. Veja [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) para a parte do grão.

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

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

- 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 amanhecer: `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 paradas numa luminosidade; os arcos escolhem um canto do círculo; os dois últimos usam o espectro como luz.

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

O CSS moderno consegue percorrer o círculo de matizes por você. Definir a interpolação como `oklch` e o método de matiz como `longer hue` faz o navegador ir pelo caminho longo entre duas cores, então duas paradas no mesmo matiz produzem um arco-íris completo e uniforme. Funciona nas versões atuais do Chrome, Edge, Safari e Firefox; confira a [tabela de compatibilidade da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) para o seu 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 única cor. A segunda desenha um arco, pegando o caminho mais curto entre dois matizes.

Mantenha o croma moderado ao fazer isso. Com croma alto, alguns matizes, sobretudo o azul e o violeta, ficam fora do que uma tela sRGB comum mostra, e o navegador precisa comprimi-los de volta, o que traz de volta as faixas irregulares. Mais sobre isso em [gradientes CSS mais suaves com OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch).

## Como colocar 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 o verde-azulado pode sumir sobre o violeta. Coloque as palavras sobre a parte mais calma, sobre uma faixa ou um cartão discreto, ou use um arco-íris pastel com texto escuro e confira os pontos mais claros e mais escuros atrás de cada linha. O guia de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) passa pelas opções.

Um post quadrado com as palavras Olá cor atravessando um gradiente arco-íris, algumas letras mais difíceis de ler

Sem ajuda, as palavras cruzam todos os matizes e o contraste muda o tempo todo.

O mesmo post quadrado em que o gradiente se suaviza atrás das palavras Olá cor para que o texto seja lido com clareza

Com o campo se acalmando atrás das palavras, o arco-íris continua alegre e a frase é lida.

## Onde os gradientes arco-íris funcionam

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

> **Escolha o arco primeiro** Antes de partir para o espectro completo, pergunte quais três ou quatro matizes carregam o clima. A maioria dos designs arco-íris que parecem caros são, na verdade, arcos.

Um Mark do Gradiently pode ter até oito cores, o que basta para um arco-íris completo e uniforme com um material e grão por cima. Você pode criar um controle por controle na Forge.

## FAQ

### Como fazer um gradiente arco-íris em CSS?

Use `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 paradas em hex antes dele como alternativa.

### Por que o meu gradiente arco-íris tem uma faixa amarela clara?

O amarelo é percebido como muito mais claro que o azul ou o vermelho com a mesma luminosidade HSL. Mantenha todas as paradas numa luminosidade percebida, como 72% em OKLCH, para eliminar a faixa.

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

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

### Dá para colocar texto sobre um gradiente arco-íris?

Sim, mas o contraste muda ao longo do gradiente. Coloque o texto sobre a área mais calma, numa faixa ou num cartão, ou use um arco-íris pastel com texto escuro e confira todos os pontos atrás das palavras.