# Pastellgradienter som holder seg friske, ikke søtladne

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

Pasteller er de gradientene som er lettest å like og lettest å overdrive. Noen få regler gjør at de føles som vårlys på papir og ikke som en bursdagskake.

## The short version

- En pastellgradient blander bleke farger med høy lyshet og varsom metning, som blekrosa, smørgul, syrin og mint.
- Hvit tekst fungerer nesten aldri på pastellgradienter. Et mørkt blekk i en dyp nabofargetone er langt lettere å lese.
- Pastellgradienter virker søtladne når hver farge er like søt og mettet, og friske når én farge er støvete, dypere eller uventet.
- En offwhite papirbunn under pastellfarger får dem til å føles trykte og rolige fremfor digitale.
- OKLCH gjør jevne pasteller enkle: hold lyshet og kroma fast og endre bare fargetonen.

En **pastellgradient** er en overgang mellom bleke, mykt tonede farger: blekrosa over i smørgult, syrin over i himmelblått, mint over i krem. Pasteller har høy lyshet og bare litt metning, og derfor føles de milde, friske og vennlige. Haken er at de også er lette å gjøre for søte, og at hvit tekst nesten er umulig å lese på dem. Begge deler løses med et mørkt blekk, en papirbunn og én farge som er litt mindre opplagt enn resten.

## Hva som gjør en farge til pastell

En pastell er en farge med mye hvitt i seg: høy lyshet, lav til moderat metning. I fargerommet OKLCH ligger de fleste pasteller rundt 0.88 til 0.95 i lyshet med en liten kroma. Det gir et fint triks for å lage pastellgradienter som føles jevne: lås lysheten og kromaen, og endre bare fargetonen. Da har hver farge samme visuelle vekt, og ingen av dem roper.

- Pastellspekter i OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))`
- Blekrosa og smør: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)`
- Blåregn: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)`
- Pistasjkrem: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)`
- Himmel og mint: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)`
- Gravmyrtdis: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)`
- Støvet rosa og salvie: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)`
- Sjøskum: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)`
- Aprikosrosa: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)`

Pastellpar med koder du kan kopiere. Den første er bygget i OKLCH med fast lyshet og kroma, så de tre fargetonene føles like myke.

## Frisk eller søtladen: forskjellen

Pasteller tipper over i det søtladne når alt er like søtt: rosa, babyblå og syrin med samme metning, hvit skrift, avrundet alt. De føles friske når noe i designet yter motstand. Det kan være en mer støvete, gråere farge, et dypt blekk til ordene, en offwhite papirbunn eller en skarp, alvorlig skrift.

### Søtladen

- Rosa, babyblå og syrin i lik styrke
- Hvit tekst på en blek bakgrunn
- Ren hvit bunn, helt glatt
- Hvert element avrundet og boblete

### Frisk

- Én støvete eller uventet farge, som salvie eller aprikos
- Et dypt blekk fra en nabofargetone
- En offwhite papirbunn med lett korn
- En selvsikker antikva eller en stram grotesk til ordene

## Sett pasteller sammen med et mørkt blekk

Hvit skrift på en pastell stryker nesten alltid på kontrast, fordi begge er svært lyse. Løsningen er et mørkt blekk: en dyp versjon av en av gradientens egne fargetoner, som indigo på syrin eller burgunder på blekrosa. Det holder paletten i én familie og leses uten anstrengelse. Her er målte forholdstall for vanlige blekk på pastellbunner. For reglene bak dem, se [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

| Tekstfarge | På blekrosa `#fbcfe8` | På syrin `#c4b5fd` |
| --- | --- | --- |
| `#ffffff` hvit | 1.4:1, består ikke | 1.9:1, består ikke |
| `#6b7280` mellomgrå | 3.5:1, bare stor tekst | 2.6:1, består ikke |
| `#9d174d` burgunder | 5.7:1, består AA | 4.3:1, bare stor tekst |
| `#312e81` indigo | 8.3:1, består AAA | 6.2:1, består AA |
| `#1f2937` blekk | 10.6:1, består AAA | 8.0:1, består AAA |

Kontrastforhold etter WCAG 2. Brødtekst trenger minst 4.5:1, stor tekst minst 3:1. Jo dypere pastellen er, desto mørkere må blekket være.

- Papir: #f8f1ea
- Blekrosa: #fbcfe8
- Syrin: #e9d5ff
- Salvie: #d5e3d0
- Smør: #fde68a
- Indigoblekk: #312e81

Et komplett pastellsystem: en papirbunn, tre pasteller, én varm aksent og et mørkt blekk til hvert ord.

## Bruk en papirbunn

Pasteller på ren hvit kan virke utvasket, og på skjermer er ren hvit det lyseste som finnes. En varm offwhite bunn, som `#f8f1ea`, får pastellfarger til å virke bevisste, som akvarell eller risografblekk på papir. La pastellen blomstre ut fra ett hjørne og tone over i papiret, i stedet for å fylle hele flaten.

- Blekrosa blomstring på papir: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)`
- Salvieblomstring på papir: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)`
- Syrin ovenfra: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)`

Pastellblomstringer på en papirbunn. Det meste av flaten forblir papir, og det er det som holder dem rolige.

Et lett korn forsterker papirfølelsen. Hold det svært diskret på pasteller, fordi støy er lett å se på lyse farger. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har mengder å starte med.

## En pastellgradient i CSS

I CSS kommer papirbunnen, blomstringen og blekket sammen på noen få linjer. Å blande pasteller i OKLCH hindrer at midten blir krittaktig når fargetonene ligger langt fra hverandre, og et fargehint lar papiret ta det meste av flaten.

```css
.pastel {
  background-color: #f8f1ea; /* paper */
  background-image:
    radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
    linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
  color: #312e81; /* indigo ink */
}
```

Blomstringer i blekrosa og salvie over en lasur fra papir til syrin, med indigoblekk til ordene.

Hold pastellpar nær hverandre i fargetone for det reneste resultatet, som i [tofargede gradienter](https://gradiently.design/nb/guide/two-color-gradients). Vil du likevel ha fjerne pasteller sammen, leder du dem gjennom en blek syrin eller smørgul, så midten forblir tonet i stedet for å bli hvitgrå.

## Hvor pastellgradienter fungerer

- Skjønnhet, hudpleie, velvære og parfyme
- Baby, bryllup, papirvarer og gaver
- Vår- og påskekampanjer, bakerier og kafeer
- Rolig onboarding og hjelpesider i programvare
- Myke, drømmende estetikker, særlig med holografisk skjær. Se [holografiske gradienter](https://gradiently.design/nb/guide/holographic-gradients)

Et stående salgsinnlegg med tittelen Vårutvalget på en myk pastellgradient med mørke bokstaver

En pastellflate med mørkt blekk leses som rolig og selvsikker i feedstørrelse.

En stående storyversjon av det samme salgsdesignet i pastell

Det samme uttrykket som en story, med fargen som blomstrer ut fra toppen.

Liker du mykheten, men vil ha mer kontrast, går du ett skritt mot [estetiske bakgrunner](https://gradiently.design/nb/guide/aesthetic-backgrounds) med en dypere aksent. Du kan også søke i Markedet etter ord som «myk syrin» eller «blek fersken» for å finne Marker i pastell og designe med dem med en gang.

## FAQ

### Hva er en pastellgradient?

En pastellgradient er en overgang mellom bleke, mykt mettede farger som blekrosa, syrin, smørgul og mint.

### Hvilken tekstfarge passer på en pastellgradient?

Et mørkt blekk, helst en dyp versjon av en av gradientens fargetoner, som indigo eller burgunder. Hvit tekst stryker som regel på kontrast på pasteller.

### Hvordan får jeg fargene i en pastellgradient til å føles jevne?

Bygg dem i OKLCH med samme lyshet og kroma, og endre bare fargetonen, så hver farge har samme vekt.

### Hvordan hindrer jeg at en pastellgradient blir for søt?

Legg til én støvete eller uventet farge, bruk et mørkt blekk til teksten, sett den på en offwhite papirbunn og kombiner den med en selvsikker skrift.

### Hvilken bakgrunnsfarge passer til pasteller?

En varm offwhite som `#f8f1ea` får pasteller til å virke trykte og rolige. Ren hvit kan få dem til å virke utvasket.