Gradientes iridescentes: mudanças de cor perolada com códigos

Um gradiente iridescente é uma mistura de tons claros muito próximos, tipicamente lilás, rosa-pálido, azul-céu, menta e um creme quente, sobre uma base clara com um suave realce branco. O efeito imita coisas iridescentes reais: pérolas, bolhas de sabão, o interior de uma concha de haliótis. As cores são delicadas e mudam gradualmente pela superfície, por isso lê-se como um brilho e não como uma faixa de cor. Os códigos abaixo estão prontos a colar em CSS ou em qualquer ferramenta de design que aceite hexadecimal.

Códigos de gradientes iridescentes

Cada um parte de um quase branco ou de um quase preto e junta tons vizinhos. Copia um tal como está, ou troca uma única paragem para o fazeres teu.

Repara no que as claras têm em comum: nenhuma paragem é totalmente saturada e o ponto mais claro é branco puro ou quase. Força uma paragem para uma cor forte e a pérola transforma-se num gradiente pastel ou, mais longe ainda, num arco-íris.

Iridescente vs holográfico

As pessoas usam muitas vezes as duas palavras para a mesma coisa, mas em design descrevem visuais diferentes. O holográfico imita autocolantes de folha metalizada e hologramas de cartões: todos os matizes, saturação alta, faixas duras. O iridescente imita superfícies naturais que mudam de cor em silêncio. Se queres a versão mais ruidosa, os gradientes holográficos tratam dela por inteiro.

Como construir um gradiente iridescente de raiz

1. 1

   Escolhe a base

   A iridescência clara parte do branco ou de um branco-sujo ligeiramente quente, como #fbf9f6. A escura parte de um preto azulado, como #0d0f1a. A base deve cobrir um terço ou mais da superfície.

2. 2

   Escolhe três a cinco tons vizinhos

   Percorre a roda de cores em passos pequenos: lilás, azul-céu, menta, creme, rosa-pálido. Mantém-nos com luminosidade semelhante, para nenhum saltar para a frente.

3. 3

   Baixa a saturação

   Se um tom parece uma cor que poderias nomear do outro lado da sala, está demasiado forte. Nas versões claras, procura tons que sejam quase só branco com um vestígio de matiz.

4. 4

   Junta um realce

   Um pequeno ponto radial branco, deslocado para um canto, diz ao olho de onde vem a luz. Um chega; dois começam a parecer um botão brilhante.

5. 5

   Termina com grão fino

   As misturas claras formam bandas facilmente nos ecrãs. Um pouco de ruído desfaz os degraus, e o banding em gradientes explica a solução.

O passo que mais importa é o terceiro. A maioria dos designs iridescentes que falham tem simplesmente demasiada cor. A pérola verdadeira é esmagadoramente branca; a cor é algo que se nota em segundo lugar.

CSS iridescente com mudança de cor ao passar o rato

Na web, podes fazer o brilho mexer-se quando alguém aponta para ele, que é a única coisa que uma pérola real faz e uma imagem plana não. Registar o ângulo com @property permite ao navegador animá-lo com suavidade; os navegadores sem suporte mostram simplesmente o estado de repouso. A página da MDN sobre @property tem os pormenores.

@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}

Rodar o ângulo é mais suave do que deslizar a posição do fundo, porque os tons ficam no sítio e só muda a direção, o que se aproxima mais da forma como uma superfície real apanha a luz. Para misturas mais uniformes, ajuda definir as paragens em OKLCH; vê gradientes OKLCH em CSS.

Pôr palavras num fundo iridescente

A iridescência clara é uma superfície difícil para texto. O branco desaparece nela, e o escuro só funciona se a zona por trás for uniforme. Usa uma tinta escura tirada da paleta em vez de preto puro, mantém as palavras sobre a parte mais calma da mistura e deixa a mudança mais agitada num canto. As regras gerais estão em texto sobre um fundo em gradiente.

É aqui que um Mark do Gradiently justifica o seu lugar. Um Mark sabe onde estão as palavras: leva a sua região mais calma para trás delas e a tinta automática escolhe letra clara ou escura linha a linha a partir da paleta do próprio Mark, por isso uma superfície perolada e suave continua legível em todos os tamanhos, sem caixas nem sombras.

Onde a iridescência resulta melhor

• Cuidados de pele e beleza: publicações de lançamento, cartas de tons e autocolantes de embalagem. Sugere orvalho e luz na pele; vê o design de marcas de cuidados de pele.
• Noivas e casamentos: convites e save the dates em pérola, com tinta grafite e margens generosas.
• Joalharia: um fundo de pérola ou opala por trás das fotografias de produto realça as pedras sem competir com elas.
• Música e vida noturna: a mistura escura de mancha de óleo num story de 1080×1920, com uma linha de letra branca sobre a zona mais escura.
• Páginas de produtos tecnológicos: um topo em pérola com o brilho ao passar o rato acima, mantido por trás de um título curto.

A iridescência combina bem com letra serifada limpa ou sem serifa leve e espaçamento amplo. Choca com sombras fortes, contornos grossos e acentos saturados. Se queres metal em vez de pérola, o efeito cromado é o irmão mais duro e frio.