# Pastellpaletter: myke fargekoder for milde merkevarer

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

Pasteller er lette å like og vanskelige å bruke: alene kan de ikke bære tekst. Hver palett her har de to ekstra fargene som får den til å fungere.

## The short version

- En pastellpalett består av lyse farger med mild metning, vanligvis over 85 % lyshet i HSL.
- Pasteller er for lyse til tekst på hvitt, så en pastellpalett trenger en mørk tekstfarge.
- De fleste pastellmerker trenger også én dypere ankerfarge, sterk nok til å bære hvit tekst på knapper og etiketter.
- Pasteller virker mest helhetlige når de har samme lyshet og hovedsakelig skiller seg i kulør.
- En varm, brukket hvit bakgrunn passer pasteller bedre enn ren hvit, som kan få dem til å virke utvasket.

En **pastellpalett** er et sett bleke, mykt mettede farger: fersken, smørgul, salvie, pudderblå og syrin. De føles milde, friske og vennlige. Derfor brukes de av bakerier, hudpleie- og babymerker og leverandører av bryllupstrykksaker. Utfordringen er at ingen pastell er mørk nok til tekst. Derfor kombinerer hver palett nedenfor tre pasteller med to bruksfarger: en mørk **tekstfarge** til ordene og en dypere **ankerfarge** til knapper og aksenter. Kodene er klare til å kopieres, og kontrasten er allerede sjekket.

## Fem pastellpaletter med hex-koder

**Fersken og salvie** er varmt, naturlig og rolig, et godt valg for mat, keramikk og merkevarer for et roligere liv. Terrakottaankeret hindrer uttrykket i å bli sukkersøtt.

- Fersken #f9d5c7: #f9d5c7
- Smørgul #fbe7b5: #fbe7b5
- Salvie #cfe3d1: #cfe3d1
- Terrakotta #ad5a45: #ad5a45
- Kakaotekst #3a2e2a: #3a2e2a

Kakaotekst på fersken gir 9,6:1. Hvit på terrakotta gir 4,9:1, nok for knappetekst.

**Sjøglass** er kjølig og rent, og passer velvære, hudpleie og alt som skal føles som frisk luft.

- Sjøglass #c9e9e4: #c9e9e4
- Pudderblå #c9dff2: #c9dff2
- Tåke #e3f1ec: #e3f1ec
- Dyp lagune #3f7f86: #3f7f86
- Skifertekst #2f3a4a: #2f3a4a

Skifertekst på sjøglass gir 8,9:1. Hvit på dyp lagune gir 4,6:1.

**Lavendel og sitron** setter to nesten motsatte farger sammen med samme myke lyshet. Det holder uttrykket muntert uten at fargene krasjer. Passer papirvarer, blomsterbutikker og barnebøker.

- Lavendel #ddd3f2: #ddd3f2
- Sitron #fbf0b5: #fbf0b5
- Blek rosa #f6cfdc: #f6cfdc
- Fiolett #7a5ba8: #7a5ba8
- Plommetekst #3b2f48: #3b2f48

Plommetekst på lavendel gir 8,7:1 og på sitron 10,8:1. Hvit på fiolett gir 5,4:1.

**Sorbet** er den søteste av de fem, med varme rosa- og aprikostoner for bakerier, neglestudioer og sommerkampanjer.

- Jordbær #f6cfdc: #f6cfdc
- Aprikos #fcd9b8: #fcd9b8
- Vanilje #fbe7b5: #fbe7b5
- Bringebær #b54f6e: #b54f6e
- Bærtekst #4a2e37: #4a2e37

Bærtekst på jordbær gir 8,6:1. Hvit på bringebær gir 4,9:1.

**Pistasj** er frisk og grønn, naturlig uten å bli jordpreget. Den passer plantebutikker, kafeer og miljømerker.

- Pistasj #d9e8c4: #d9e8c4
- Selleri #eef3d9: #eef3d9
- Fersken #f9d5c7: #f9d5c7
- Blad #4f7a3f: #4f7a3f
- Mosetekst #2e3b33: #2e3b33

Mosetekst på pistasj gir 9,1:1. Hvit på blad gir 5:1. Fersken er en liten, varm aksent.

Start med temperaturen når du velger mellom dem. Varme pasteller som fersken, aprikos og smørgul virker hjemlige og spiselige. Kalde pasteller som sjøglass, pudderblå og lavendel virker rene og luftige. Se deretter på ankerfargen, for den vil være på hver knapp og prislapp, og er fargen folk husker. Passer ingen av disse ankerfargene, beholder du pastellene og setter inn din egen merkevarefarge, mørknet til hvit tekst gir minst 4,5:1. Trenger du mer tilbakeholdenhet enn pasteller gir? [Dempede fargepaletter](https://gradiently.design/nb/guide/muted-color-palettes) er ett trinn gråere.

## Hvorfor pasteller trenger en tekstfarge og en ankerfarge

Alle pastellene over gir omtrent 1,1:1 til 1,4:1 i kontrast mot hvitt. Det er langt under 4,5:1 som brødtekst trenger, og betyr at pastellord på en hvit side rett og slett er uleselige for mange. Pastellknapper med hvit tekst feiler like mye. Tekstfargen og ankerfargen løser begge problemene, mens paletten fortsatt er myk som helhet.

| Bruk | Fargevalg | Hvorfor |
| --- | --- | --- |
| Side- og seksjonsbakgrunner | En pastell eller varm, brukket hvit | Store, myke flater setter stemningen |
| Overskrifter og brødtekst | Tekstfargen | Mørk nok til 8:1 eller mer på alle pastellene |
| Knapper og merker | Ankerfargen, med hvit tekst | Oppfyller 4,5:1 og gir øyet et fokuspunkt |
| Illustrasjoner og former | Alle pasteller, med ankerfargen brukt sparsomt | Variasjon uten støy |
| Tekst på bilder | Tekstfargen på en pastellflate, eller hvit på et mørkt bildeområde | Pasteller forsvinner over urolige bilder |

En enkel oppgavefordeling for alle pastellpaletter. Sjekk dine egne par med et kontrastverktøy før publisering.

Velg en tekstfarge som heller mot én av pastellene fremfor en flat grå: kakao til varme paletter, skifer eller plomme til kalde. En tonet tekstfarge får hele paletten til å virke gjennomarbeidet. Reglene bak tallene står i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

## Slik gjør du enhver farge til pastell

En pastell er enhver kulør med høy lyshet og moderat metning. I [HSL](https://gradiently.design/nb/guide/hsl-colors) sikter du mot 85 % til 92 % lyshet og 40 % til 80 % metning. Problemet med HSL er at gult og blått med samme tall virker svært ulike i lysstyrke. [OKLCH](https://gradiently.design/nb/guide/oklch-explained) løser det, så én formel gir en jevn pastell i alle kulører.

```css
:root {
  /* lightness 90%, gentle chroma, any hue */
  --pastel-peach: oklch(90% 0.06 60);
  --pastel-lemon: oklch(90% 0.06 100);
  --pastel-mint:  oklch(90% 0.06 150);
  --pastel-aqua:  oklch(90% 0.06 200);
  --pastel-pink:  oklch(90% 0.06 340);

  /* the ink: same idea, very dark */
  --ink: oklch(30% 0.03 40);
}
```

Endre bare kuløren, så beholder alle pastellene samme visuelle tyngde. Hold kroma rundt 0,04 til 0,07. Høyere verdier begynner å ligne godteri.

Samme metode gjør merkevarefargen til sin egen pastell: behold kuløren, øk lysheten og senk metningen. Da får du en myk bakgrunnsfarge som tydelig er din. For teorien bak lysere toner, se [lyse, dempede og mørke fargetoner](https://gradiently.design/nb/guide/tints-tones-shades).

## Feil som får pasteller til å virke billige

### Unngå

- Pastelltekst på hvitt eller en annen pastell
- Seks pasteller samtidig uten en mørk farge
- Pasteller med ulik lyshet, så én virker skitten
- Rent hvite bakgrunner som vasker ut pastellene
- Tynn løkkeskrift i bleke farger

### Gjør heller dette

- Mørk, tonet farge til alle ordene
- Tre pasteller pluss ankerfarge og tekstfarge
- Pasteller med tilsvarende lyshet
- En varm, brukket hvit som #fdf8f2
- Solide vekter med tydelige bokstavformer

## Pastellpaletter i et faktisk innlegg

Her er ideen i praksis: myk bakgrunn, mørk tekst og én ankerfarge brukt én gang. Vil du ha pasteller som flytende bakgrunner fremfor flate felter, har [pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients) koder. [Det myke uttrykket](https://gradiently.design/nb/guide/soft-aesthetic) viser hvordan stilen fungerer gjennom en hel strøm.

Et mykt pastellinnlegg på Instagram fra et bakeri som forteller at sitronkaken er tilbake denne helgen

En myk bakgrunn med mørk, trygg skrift. Pastellen setter stemningen, og tekstfargen fører ordet.

Lyse bakgrunner er der lesbarheten vanligvis svikter, og Gradiently tar seg av det. Auto-tekstfarge i en Mark velger lys eller mørk tekst for hver linje fra Markens egen palett. Dermed holder ordene på en myk Mark i pastell seg mørke nok til å leses uten at du må sjekke hvert par.

## FAQ

### Hvilke farger finnes i en pastellpalett?

Bleke, mykt mettede varianter av alle kulører. Fersken, smørgul, salvie, mint, pudderblå, lavendel og blek rosa er de vanligste.

### Hva er hex-koden for pastellrosa?

Det finnes ingen enkelt kode, men #f6cfdc er en balansert pastellrosa. Kombiner den med en mørk tekstfarge som #4a2e37.

### Hvilken tekstfarge passer til pasteller?

En mørk, lett tonet farge som kakao #3a2e2a, skifer #2f3a4a eller plomme #3b2f48, som gir rundt 8:1 til 10:1 på vanlige pasteller.

### Er pastellfarger tilgjengelige?

Som bakgrunner, ja. Som tekst eller knappfarge bak hvit tekst, nei: Pasteller er for lyse. Bruk en mørk tekstfarge til ordene og en dypere ankerfarge til knappene.

### Hvordan gjør jeg en farge til pastell?

Øk lysheten til omtrent 85 % til 92 % og hold metningen moderat. I CSS gir `oklch(90% 0.06 H)` en jevn pastell for enhver kulør H.