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

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

Como fazer um gradiente arco-íris parecer desenhado

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

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 para o teu 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));
}

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.

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 percorre as opções.

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

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.