Iriserende gradienter: perlemorsfarver med koder

En iriserende gradient er en blanding af lyse nuancer, der ligger tæt på hinanden, typisk lilla, mint, lyserød, himmelblå og en varm creme, lagt over en lys bund med et blødt hvidt højlys. Effekten efterligner ægte iriserende ting: perler, sæbebobler, indersiden af en abalone-skal. Farverne er milde og skifter gradvist hen over overfladen, så det læses som en glans og ikke som en farvestribe. Koderne nedenfor er klar til at indsætte i CSS eller et hvilket som helst designværktøj, der forstår hex.

Koder til iriserende gradienter

Hver af dem starter fra en næsten hvid eller næsten sort bund og lægger nuancer til, der ligger tæt på hinanden. Kopiér en, som den er, eller byt et enkelt stop ud for at gøre den til din.

Læg mærke til, hvad de lyse har til fælles: intet stop er fuldt mættet, og det lyseste punkt er rent eller næsten rent hvidt. Skub et vilkårligt stop op til en stærk farve, og perlen bliver til en pastelgradient eller, endnu længere, til en regnbue.

Iriserende mod holografisk

Folk bruger ofte de to ord om det samme, men i design beskriver de forskellige looks. Holografisk efterligner folieklistermærker og hologrammer på kreditkort: alle nuancer, høj mætning, hårde bånd. Iriserende efterligner naturlige overflader, der skifter farve stille. Vil du have den højere version, dækker holografiske gradienter den fuldt ud.

Sådan bygger du en iriserende gradient fra bunden

1. 1

   Vælg bunden

   Lys iridescens starter fra hvid eller en svagt varm råhvid som #fbf9f6. Mørk iridescens starter fra en blåsort som #0d0f1a. Bunden skal dække en tredjedel af overfladen eller mere.

2. 2

   Vælg tre til fem nabonuancer

   Gå rundt på farvehjulet i små skridt: lilla til himmel til mint til creme til lyserød. Hold dem på samme lysstyrke, så ingen springer frem.

3. 3

   Sæt mætningen ned

   Hvis en nuance ligner en farve, du kunne navngive fra den anden side af rummet, er den for stærk. Til lyse versioner skal du sigte efter nuancer, der mest er hvide med et spor af farve.

4. 4

   Tilføj ét højlys

   En lille hvid radial plet, forskudt mod et hjørne, fortæller øjet, hvor lyset kommer fra. Ét er nok; to begynder at ligne en blank knap.

5. 5

   Slut af med fint korn

   Lyse blandinger får let bånd på skærme. En smule støj bryder trinene op, hvilket gradientbanding forklarer sammen med løsningen.

Det trin, der betyder mest, er det tredje. De fleste iriserende design, der fejler, er simpelthen for farverige. Ægte perlemor er overvejende hvid; farven er noget, du lægger mærke til bagefter.

Iriserende CSS med farveskift ved hover

På nettet kan du få glansen til at bevæge sig, når nogen peger på den, og det er det ene, en trykt perle kan, som et fladt billede ikke kan. Når du registrerer vinklen med @property, kan browseren animere den jævnt; browsere uden understøttelse viser blot hviletilstanden. MDN-siden om @property har detaljerne.

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

At rotere vinklen er blidere end at skubbe baggrundspositionen, fordi nuancerne bliver, hvor de er, og kun deres retning ændres, hvilket ligner mere, hvordan en ægte overflade fanger lyset. Til blandinger, der blander jævnere, hjælper det at definere stop i OKLCH; se OKLCH-gradienter i CSS.

Tekst på en iriserende baggrund

Lys iridescens er en svær overflade for skrift. Hvid tekst forsvinder på den, og mørk tekst virker kun, hvis området bag den er jævnt. Brug et mørkt blæk fra paletten frem for ren sort, hold ordene over den roligste del af blandingen, og lad det mest urolige skift ligge i et hjørne. De generelle regler står i tekst på en gradientbaggrund.

Her tjener en Gradiently Mark sine penge. En Mark ved, hvor ordene står: den flytter sit roligste område bag dem, og Auto-blæk vælger lys eller mørk skrift linje for linje ud fra Markens egen palet, så en blød perlemorsoverflade forbliver læselig i enhver størrelse uden bokse eller skygger.

Hvor iridescens virker bedst

• Hudpleje og skønhed: lanceringsopslag, nuancekort og klistermærker på emballage. Den antyder dug og lys på huden; se design til hudplejebrands.
• Brude og bryllup: invitationer og save the date på perle, med grafitblæk og rummelige margener.
• Smykker: en perle- eller opalbund bag produktfotos fremhæver stenene uden at konkurrere med dem.
• Musik og natteliv: den mørke oliefilmblanding på en story på 1080×1920 med én linje hvid skrift over det mørkeste område.
• Produktsider for teknologi: et perlehelt med hover-glansen ovenfor, holdt bag en kort overskrift.

Iridescens klæder rene serifskrifter eller lette sans serif-skrifter med god afstand. Den støder mod kraftige skygger, tykke konturer og mættede accenter. Vil du have metal i stedet for perle, er kromeffekten den hårdere, koldere søskende.