# Slik bygger du en gradientpalett for en merkevare

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

Én god gradient er enkelt. Seks som tydelig hører sammen, dekker alle merkevarens oppgaver og fungerer ved siden av hverandre, er et system. Slik bygger du det.

## The short version

- En gradientpalett er en liten, navngitt familie av gradienter laget fra én grunnpalett og noen få felles regler.
- De fleste merkevarer trenger fire til seks gradienter: en hovedvariant, en dyp variant, en rolig lys variant, radiell glød, en aksent og en rolig tekstvariant.
- Gradienter oppfattes som én familie når de deler grunnfarge, retning, faste stopp-posisjoner og like trinn i lyshet.
- Navngitte egendefinerte CSS-egenskaper holder gradientene identiske på nettstedet, i appen og i designfiler.
- En gradientpalett bør testes i faktiske formater med ekte ord før den tas inn i merkevareretningslinjene.

En **gradientpalett** er en liten, navngitt familie av gradienter bygget fra én fargepalett og noen få felles regler, så alle gradientene merkevaren bruker, virker beslektet. Begynn med fem eller seks grunnfarger, gi hver gradient en oppgave (hovedvariant, dyp, rolig, glød, aksent, tekst) og fastsett det som gjør dem til søsken: samme grunnfarge, samme vinkel, samsvarende stopp-posisjoner og jevne trinn i lyshet. Lagre dem som designvariabler og test dem i ekte design før andre bruker dem.

## Hvorfor en merkevare trenger mer enn én gradient

Én gradient blir strukket til oppgaver den ikke kan løse. Den klare hovedblandingen som ser flott ut i et lanseringsinnlegg, er for kraftig bak et avsnitt, for mørk i en lys nettseksjon og for travel på et lysbilde fullt av tall. Teamet improviserer, noen velger en lignende blåfarge, og innen et år har merkevaren femten gradienter som nesten passer sammen. En palett hindrer det ved å bestemme variasjonene på forhånd.

### En haug med gradienter

- Hver laget separat til ett design
- Ulike vinkler på hver side
- Farger som nesten treffer merkevaren
- Ingen navn, så ingen kan be om en bestemt
- Kopiert på øyemål fra gamle filer

### En gradientpalett

- Bygget fra én grunnpalett
- Én retning brukt overalt
- Nøyaktige hex-koder og stopp-posisjoner
- Navn etter oppgave: hoved, dyp, rolig
- Lagret som designvariabler i kode og filer

## Begynn med en grunnpalett

Hver gradient i familien bør lages bare av disse fargene eller lysere og mørkere varianter av dem. Hvis merkevarefargene ikke er fastlagt ennå, start med [slik velger du merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors). En nyttig grunnpalett har mørk bunn, to eller tre trinn av hovedtonen, nesten hvitt og én aksent fra et annet sted i fargesirkelen.

- Blekk: #14112b
- Nattplomme: #2e1065
- Plomme: #4c1d95
- Fiolett: #7c3aed
- Orkidé: #c084fc
- Skjell: #faf5ff
- Glør: #f97316

Et konkret grunnlag: én mørk bunn, fire trinn med fiolett, nesten hvitt og én varm aksent. Alle gradientene nedenfor bygger på disse sju kodene.

## Gi hver gradient en oppgave

Gi gradientene navn etter det de gjør, ikke hvordan de ser ut. «Hoved» overlever en fargefornyelse; «lilla solnedgang» gjør ikke det. Seks roller dekker nesten alle merkevarer.

| Rolle | Hva den brukes til | Hva som skiller den |
| --- | --- | --- |
| Hoved | Lanseringer, omslag, øyeblikket folk husker | Hele spennet, mørkt til lyst |
| Dyp | Mørke seksjoner, lysbilder, kveldskampanjer | Bare de to eller tre mørkeste fargene |
| Rolig | Lyse sider, dokumenter, lang lesing | Skjell og den lyseste tonen, knapt noen endring |
| Glød | Produktbilder og enkeltord | Radiell, lys i ett hjørne |
| Aksent | Knapper, merker, én utheving per design | Hovedtone til aksentfargen |
| Tekst | Bak avsnitt og bildetekster | Lav kontrast internt, høy mot skriften |

Seks roller i en merkevares gradientpalett. Små merkevarer kan begynne med hoved, dyp og rolig.

- Hoved: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Dyp: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Rolig: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Glød: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Aksent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Tekst: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

Familien bygget fra grunnlaget over. Samme bunn, samme vinkel på 135 grader, samme farger: de kan stå side om side på én side uten å krangle.

## Reglene som gjør gradienter til en familie

- **Én grunnfarge.** Alle mørke gradienter ender i samme blekkfarge, alle lyse i samme skjellfarge. Øyet bruker grunnfargen til å gruppere dem.
- **Én retning.** Velg en vinkel, 135 eller 160 grader, og behold den. Blandede vinkler gjør siden tilfeldig. [Gradientvinkel](https://gradiently.design/nb/guide/gradient-angle) forklarer valget.
- **Samsvarende stopp.** Gjenbruk samme posisjoner, for eksempel 0, 45, 75 og 100 prosent, så overgangene har samme rytme. [Gradientstopp](https://gradiently.design/nb/guide/gradient-stops) dekker avstand.
- **Jevne lyshetstrinn.** Hver farge i blandingen bør være et tydelig trinn lysere eller mørkere enn naboen. Ujevne trinn gir en lys stripe i midten.
- **Én sparsom aksent.** Aksentfargen vises bare i én gradient. Fordelt over alle slutter den å være en aksent.
- **Fast interpolasjon i kode.** Hvis nettstedet blander i oklch, bør alle gradienter gjøre det, ellers ser de samme kodene ulike ut mellom seksjonene.

## Gjør gradientpaletten til designvariabler

En palett som bare finnes i en PDF, tastes inn igjen og spriker. Lagre hver gradient én gang som en navngitt egendefinert egenskap og referer til den overalt. Designere kan lime de samme verdiene inn i filene sine, og en senere fornyelse endrer én linje per gradient. [Designvariabler](https://gradiently.design/nb/guide/design-tokens) dekker den bredere praksisen.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

Hele familien som egendefinerte CSS-egenskaper. Fargene defineres én gang, og hver gradient bygges av dem.

## Test i faktiske formater

Fargeprøver lyver. En gradient som virker balansert som lite kvadrat, kan legge det lyseste båndet rett bak overskriften når den fyller en Story på 1080×1920. Før du publiserer paletten, lag tre ekte design med ekte ord: et stående innlegg, en Story og et toppbilde til et nettsted. Sjekk at tekstgradienten holder avsnittene lesbare med testene i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility), og at hoved og dyp virker beslektet side om side.

Et stående lanseringsinnlegg på en rik gradientbakgrunn med fullt fargespenn

Hovedrollen på et stående innlegg på 1080×1350.

En stående Story med samme overskrift på en beslektet gradientbakgrunn fra samme familie

Samme familie på en Story på 1080×1920. Sjekk at det lyseste båndet fortsatt holder seg unna overskriften i det høyere formatet.

Med Gradiently Pro holder merkevaresettet fargepalettene sammen med logo og skrifter, og Designer bruker dem når den setter opp nye design. Hvis hovedgradienten skal være det folk kjenner igjen, dekker [merkevaregradienter](https://gradiently.design/nb/guide/brand-gradient-system) hvordan én gradient blir en signatur.

## FAQ

### Hva er en gradientpalett?

Et lite, navngitt sett med gradienter laget av én fargepalett med felles regler, så de virker som én familie uansett hvor de vises.

### Hvor mange gradienter bør en merkevare ha?

Fire til seks dekker de fleste behov: en hovedvariant, en dyp og en rolig variant, radiell glød, en aksent og én rolig nok til tekst. Små merkevarer kan begynne med tre.

### Hvordan får jeg gradienter til å høre sammen?

Bruk samme grunnfarge, samme vinkel, samme stopp-posisjoner og jevne lyshetstrinn i alle gradientene.

### Hvordan bør jeg lagre merkevaregradienter til et nettsted?

Definer fargene og hver gradient én gang som egendefinerte CSS-egenskaper, og referer deretter til navnene i alle komponenter.