Sfumati iridescenti: cambi di colore madreperlacei con i codici

Uno sfumato iridescente è una miscela di tinte chiare molto vicine, in genere lilla, menta, rosa tenue, azzurro cielo e un crema caldo, stese su una base chiara con un morbido punto di luce bianco. L’effetto imita cose iridescenti reali: perle, bolle di sapone, l’interno di una conchiglia di abalone. I colori sono delicati e cambiano gradualmente sulla superficie, quindi si legge come un riflesso e non come una striscia di colore. I codici qui sotto sono pronti da incollare in CSS o in qualsiasi strumento di design che accetti l’esadecimale.

Codici per sfumati iridescenti

Ognuno parte da un quasi bianco o da un quasi nero e aggiunge tinte vicine tra loro. Copiane uno così com’è, oppure cambia una sola tonalità per renderlo tuo.

Nota cosa hanno in comune quelle chiare: nessuna tonalità è del tutto satura, e il punto più chiaro è bianco puro o quasi. Spingi una tonalità verso un colore forte e la perla diventa uno sfumato pastello o, andando oltre, un arcobaleno.

Iridescente e olografico a confronto

Spesso si usano le due parole per la stessa cosa, ma in design descrivono aspetti diversi. L’olografico imita gli adesivi in lamina e gli ologrammi delle carte di credito: tutte le tinte, alta saturazione, bande nette. L’iridescente imita superfici naturali che cambiano colore con discrezione. Se vuoi la versione più rumorosa, gli sfumati olografici sono trattati per intero.

Come costruire da zero uno sfumato iridescente

1. 1

   Scegli la base

   L’iridescenza chiara parte dal bianco o da un bianco sporco appena caldo come #fbf9f6. Quella scura parte da un nero bluastro come #0d0f1a. La base deve coprire un terzo della superficie o più.

2. 2

   Scegli da tre a cinque tinte vicine

   Percorri la ruota dei colori a piccoli passi: lilla, cielo, menta, crema, rosa tenue. Tienile a luminosità simile, così nessuna salta in primo piano.

3. 3

   Abbassa la saturazione

   Se una tinta sembra un colore che sapresti nominare da una parte all’altra della stanza, è troppo forte. Per le versioni chiare, punta a tinte quasi bianche con una traccia di colore.

4. 4

   Aggiungi un solo punto di luce

   Una piccola macchia radiale bianca, spostata verso un angolo, dice all’occhio da dove arriva la luce. Una basta; due cominciano a sembrare un pulsante lucido.

5. 5

   Finisci con una grana fine

   Le miscele chiare formano facilmente bande sugli schermi. Un po’ di rumore spezza i gradini, come spiega il banding negli sfumati insieme alla soluzione.

Il passaggio che conta di più è il terzo. La maggior parte dei design iridescenti che falliscono sono semplicemente troppo colorati. La vera perla è quasi tutta bianca; il colore è qualcosa che noti per secondo.

CSS iridescente con cambio di colore al passaggio del mouse

Sul web puoi far muovere il riflesso quando qualcuno ci passa sopra, l’unica cosa che una perla vera fa e un’immagine piatta no. Registrare l’angolo con @property permette al browser di animarlo con fluidità; i browser senza supporto mostrano semplicemente lo stato a riposo. La pagina MDN su @property ha i dettagli.

@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; }
}

Ruotare l’angolo è più delicato che far scorrere la posizione dello sfondo, perché le tinte restano ferme e cambia solo la loro direzione, il che somiglia di più a come una superficie vera cattura la luce. Per miscele più uniformi aiuta definire le tonalità in OKLCH; vedi gli sfumati OKLCH in CSS.

Mettere parole su uno sfondo iridescente

L’iridescenza chiara è una superficie difficile per il testo. Il bianco vi sparisce, e il testo scuro funziona solo se l’area dietro è uniforme. Usa un inchiostro scuro preso dalla palette invece del nero puro, tieni le parole sulla parte più calma della miscela e lascia il cambio più movimentato in un angolo. Le regole generali sono in testo su uno sfondo sfumato.

Qui un Mark di Gradiently fa la differenza. Un Mark sa dove sono le parole: sposta la sua zona più calma dietro di esse e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla palette del Mark stesso, così una superficie perlata e morbida resta leggibile a ogni misura, senza riquadri né ombre.

Dove l’iridescenza funziona meglio

• Skincare e bellezza: post di lancio, cartelle colori e adesivi per confezioni. Suggerisce rugiada e luce sulla pelle; vedi il design del brand per la cura della pelle.
• Nozze e cerimonie: inviti e save the date su perla, con inchiostro grafite e margini generosi.
• Gioielleria: uno sfondo perla o opale dietro le foto dei prodotti richiama le pietre senza competere con loro.
• Musica e vita notturna: la miscela scura a chiazza d’olio su una storia 1080×1920, con una riga di testo bianco sull’area più scura.
• Pagine di prodotti tech: un hero perlato con il riflesso al passaggio del mouse visto sopra, tenuto dietro a un titolo breve.

L’iridescenza sta bene con serif puliti o sans leggeri e spaziatura ampia. Stona con ombre pesanti, contorni spessi e accenti saturi. Se vuoi il metallo al posto della perla, l’effetto cromo è il fratello più duro e freddo.