# Regnbuegradienter som ikke ser ut som en standardinnstilling

[Canonical HTML page](https://gradiently.design/nb/guide/rainbow-gradient)

Standardregnbuen har en skrikende gul stripe og et mørkeblått hull. Rett opp lysheten, velg buen din, og spekteret blir et av de mest gledesfylte verktøyene du har.

## The short version

- En regnbuegradient blander seg gjennom fargetonene i spekteret, og standardversjonen ser billig ut fordi fargene har svært ulik lyshet.
- I OKLCH har ren gul en lyshet på omtrent 97 %, mens ren blå ligger nær 45 %, og derfor viser en standardregnbue en lys stripe og et mørkt bånd.
- Regnbuegradienter ser designet ut når du holder hvert stopp på en lignende lyshet, senker kromaen litt og bruker bare den delen av spekteret du trenger.
- CSS kan blande en regnbue for deg med `linear-gradient(in oklch longer hue, ...)`, som går hele veien rundt fargehjulet mellom to farger.
- Tekst på en regnbue trenger et rolig område eller et bånd bak seg, fordi kontrasten endrer seg langs hele gradienten.

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](https://gradiently.design/nb/guide/color-codes-explained) 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.

| Farge | Hex | HSL-lyshet | OKLCH-lyshet |
| --- | --- | --- | --- |
| Rød | `#ff0000` | 50% | 62.8% |
| Gul | `#ffff00` | 50% | 96.8% |
| Grønn | `#00ff00` | 50% | 86.6% |
| Cyan | `#00ffff` | 50% | 90.5% |
| Blå | `#0000ff` | 50% | 45.2% |
| Magenta | `#ff00ff` | 50% | 70.2% |

HSL sier at disse er like lyse. Opplevd lyshet går fra 45 % til 97 %, og derfor ser standardregnbuen stripete ut.

- Standard HSL-regnbue: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Regnbue med jevn lyshet: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

Den samme reisen rundt fargehjulet. Den andre holder hvert stopp nær 72 % OKLCH-lyshet, så ingen farge stikker seg ut eller synker.

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

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. **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. **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. **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. **Legg til tekstur eller mykhet** Korn, uskarphet eller et langsomt radialt lysfall gjør fargebånd om til lys. Se [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) 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.

- Balansert spektrum: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Pastellregnbue: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Spektrumhjul: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Soloppgangsbue: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Lagunebue: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Skumringsbue: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prisme på svart: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Perleskimmer: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Åtte regnbuegradienter. Balansert og pastell holder hvert stopp på én lyshet, buene velger et hjørne av hjulet, og de to siste bruker spekteret som lys.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) for publikummet ditt.

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

Den første regelen tegner en full regnbue fra én enkelt farge. Den andre tegner en bue og tar den korteste veien mellom to fargetoner.

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](https://gradiently.design/nb/guide/css-gradient-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](https://gradiently.design/nb/guide/text-on-gradient) går gjennom alternativene.

Et kvadratisk innlegg der ordene Hei farge går rett over en regnbuegradient, med noen bokstaver som er vanskeligere å lese

Uten hjelp krysser ordene hver fargetone, og kontrasten deres endrer seg hele tiden.

Det samme kvadratiske innlegget der gradienten mykner bak ordene Hei farge, så teksten leses tydelig

Når feltet roer seg bak ordene, forblir regnbuen gledesfylt, og linjen kan leses.

## 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](https://gradiently.design/nb/guide/holographic-gradients)
- **Pride-kampanjer**, der regnbueflagget har sin egen betydning og sine egne seks striper, så bruk det med hensikt og ikke som pynt

> **Velg buen først** Før du griper til hele spekteret, spør deg hvilke tre eller fire fargetoner som bærer stemningen. De fleste regnbuedesign som føles påkostede, er egentlig buer.

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.

## FAQ

### Hvordan lager jeg en regnbuegradient i CSS?

Bruk `linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20))` for en jevn regnbue, med en gradient med hex-stopp foran som reserve.

### Hvorfor har regnbuegradienten min en lys gul stripe?

Gult oppleves som langt lysere enn blått eller rødt ved samme HSL-lyshet. Hold hvert stopp på én opplevd lyshet, for eksempel 72 % i OKLCH, for å fjerne stripen.

### Hva er hex-kodene for en pastellregnbue?

Prøv `#fcbfbe`, `#efca9f`, `#cbd8a5`, `#a3e0ca`, `#9ddcf1`, `#bfd0ff` og `#e6c3ee`, som alle ligger på en lignende høy lyshet.

### Kan man sette tekst på en regnbuegradient?

Ja, men kontrasten endrer seg over gradienten. Sett teksten over det roligste området, på et bånd eller kort, eller bruk en pastellregnbue med mørk tekst og sjekk hvert punkt bak ordene.