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

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

Como fazer um gradiente arco-íris parecer pensado

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

   Acrescente textura ou suavidade

   Grão, desfoque ou uma queda radial lenta transformam faixas de cor em luz. Veja gradientes com grão 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.

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 para o seu público.

.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));
}

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.

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 passa pelas opções.

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

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.