Regnbuegradienter som ikke ser ut som en standardinnstilling

En regnbuegradient blander seg gjennom fargetonene i spekteret, fra rødt via oransje, gult, grønt og blått til fiolett. Versjonen de fleste verktøy gir deg, ser ut som en standard fordi den hopper i lysstyrke: en skrikende gul stripe, et mørkeblått bånd og harde kanter mellom dem. En regnbue som ser designet ut, holder hver farge på en lignende lyshet, bruker litt mindre metning og dekker ofte bare en del av spekteret.

Denne guiden viser hvorfor forhåndsinnstillingen ser feil ut, tre måter å rette den på, regnbuekoder du kan kopiere, og CSS-en som lager jevne regnbuer i moderne nettlesere. Hvis fargetone, lyshet og kroma er nytt for deg, tar fargekoder forklart for seg dem først.

Hvorfor standardregnbuen ser billig ut

Den klassiske regnbuen bygges i HSL ved å flytte fargetonen trinnvis mens metning og lyshet holdes fast. Lysheten i HSL er en formel, ikke et mål på hvor lyse farger ser ut. For øyet ditt er ren gul langt lysere enn ren blå, selv om HSL kaller begge 50 %. OKLCH måler opplevd lyshet, og tallene viser problemet tydelig.

Slik får du en regnbuegradient til å se designet ut

1. 1

   Jevn ut lysheten

   Velg én opplevd lyshet, for eksempel 72 % i OKLCH, og hold hvert stopp der. Denne ene endringen fjerner den gule stripen og det blå hullet.

2. 2

   Senk kromaen litt

   Fullt mettede skjermfarger kjemper mot hverandre. En kroma rundt 0,12 i OKLCH holder hver fargetone livlig og fortsatt innenfor det vanlige skjermer kan vise.

3. 3

   Bruk en bue, ikke hele hjulet

   Tre eller fire nabotoner, som korall til gull eller turkis til fiolett, leses som et gjennomtenkt valg. Hele spekteret leses som et testbilde, med mindre det er selve poenget.

4. 4

   Gi den en grunn

   En regnbue på hvitt føles som en barneleke, mens den samme regnbuen som stiger opp fra nesten svart, føles som lys gjennom et prisme. Bestem deg for hvilken du vil ha.

5. 5

   Legg til tekstur eller mykhet

   Korn, uskarphet eller et langsomt radialt lysfall gjør fargebånd om til lys. Se kornete gradienter for kornsiden av saken.

Regnbuegradientkoder du kan kopiere

De tre første dekker hele spekteret på ulike lyshetsnivåer. Resten er buer: en del av regnbuen valgt for en stemning, og det er slik de fleste regnbueidentiteter faktisk fungerer.

Jevne regnbuer i CSS med OKLCH-interpolering av fargetone

Moderne CSS kan gå rundt fargehjulet for deg. Når du setter interpoleringen til oklch og fargetonemetoden til longer hue, går nettleseren den lange veien mellom to farger, så to stopp med samme fargetone gir en full, jevn regnbue. Det fungerer i gjeldende versjoner av Chrome, Edge, Safari og Firefox. Sjekk kompatibilitetstabellen hos MDN for publikummet ditt.

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

Hold kromaen moderat når du gjør dette. Ved høy kroma faller noen fargetoner, særlig blått og fiolett, utenfor det en vanlig sRGB-skjerm kan vise, og nettleseren må presse dem tilbake, noe som bringer tilbake ujevne bånd. Mer om dette i jevnere CSS-gradienter med OKLCH.

Sette tekst på en regnbuegradient

En regnbue er den vanskeligste bakgrunnen for tekst fordi kontrasten endrer seg langs hele lengden. Mørk tekst som leses godt over turkis, kan forsvinne over fiolett. Plasser ordene over den roligste delen, sett dem på et rolig bånd eller kort, eller bruk en pastellregnbue med mørk skrift og sjekk de lyseste og mørkeste punktene bak hver linje. Tekst på en gradient går gjennom alternativene.

Hvor regnbuegradienter passer

• Kreative verktøy og fargeprodukter, der spekteret viser bredde
• Barnemerker og utdanning, som regel i pastellversjonen
• Musikk, festivaler og uteliv, som et prisme på en mørk grunn
• Holografiske og iriserende uttrykk, som et blekt perleskimmer. Se holografiske gradienter
• Pride-kampanjer, der regnbueflagget har sin egen betydning og sine egne seks striper, så bruk det med hensikt og ikke som pynt

En Mark i Gradiently kan ha opptil åtte farger, og det er nok til en full, jevn regnbue med et materiale og korn på toppen. Du kan bygge en kontroll for kontroll i Forge.