# Sådan bygger du en gradientpalet til et brand

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

Én god gradient er nem. Seks, der tydeligt hører sammen, dækker alle et brands opgaver og stadig ser rigtige ud ved siden af hinanden, er et system. Sådan bygger du det.

## The short version

- En gradientpalet er en lille, navngivet familie af gradienter lavet af én grundpalet og nogle få fælles regler.
- De fleste brands har brug for fire til seks gradienter: en hero, en dyb udgave, en stille lys udgave, en radial glød, en accent og en rolig til tekst.
- Gradienter læses som én familie, når de deler en bundfarve, en retning, ensartede stoppositioner og de samme trin i lyshed.
- Når gradienter gemmes som navngivne CSS custom properties, forbliver de identiske på tværs af website, app og designfiler.
- En gradientpalet bør testes på rigtige formater med rigtige ord, før den skrives ind i brandets retningslinjer.

En **gradientpalet** er en lille, navngivet familie af gradienter bygget af én farvepalet og en håndfuld fælles regler, så hver gradient, et brand bruger, ser beslægtet ud. Start med fem eller seks grundfarver, giv hver gradient en opgave (hero, dyb, stille, glød, accent, tekst), og lås så de ting, der gør dem til søskende: samme bundfarve, samme vinkel, matchende stoppositioner og jævne trin i lyshed. Skriv dem ned som tokens, og test dem på rigtige designs, før nogen andre bruger dem.

## Hvorfor et brand har brug for mere end én gradient

En enkelt gradient bliver strakt ud over opgaver, den ikke kan klare. Den klare heroblanding, der ser fantastisk ud på et lanceringsopslag, er for højlydt bag et afsnit, for mørk til en lys sektion på et website og for travl til en slide fuld af tal. Så improviserer teamet, nogen vælger en blå, der ligger tæt på, og inden for et år har brandet femten gradienter, der næsten matcher. En palet forhindrer det ved at bestemme variationerne på forhånd.

### En bunke gradienter

- Hver lavet for sig, til ét design
- Forskellige vinkler på hver side
- Farver, der næsten matcher brandet
- Intet navn, så ingen kan bede om en
- Kopieret efter øjemål fra gamle filer

### En gradientpalet

- Bygget af én grundpalet
- Én retning, brugt overalt
- Præcise hexkoder og stoppositioner
- Navngivet efter opgave: hero, dyb, stille
- Gemt som tokens i kode og filer

## Start fra en grundpalet

Hver gradient i familien bør kun laves af disse farver eller af lysere og mørkere udgaver af dem. Ligger dine brandfarver ikke fast endnu, så få styr på det først med [sådan vælger du brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors). En brugbar grundpalet har en mørk bund, to eller tre trin af hovedfarven, en næsten hvid og én accent fra et andet sted på farvecirklen.

- Blæk: #14112b
- Natblomme: #2e1065
- Blomme: #4c1d95
- Violet: #7c3aed
- Orkidé: #c084fc
- Musling: #faf5ff
- Glød: #f97316

Et gennemarbejdet eksempel: én mørk bund, fire trin af violet, en næsten hvid og en enkelt varm accent. Hver gradient nedenfor er bygget af disse syv koder.

## Giv hver gradient en opgave

Navngiv gradienter efter, hvad de gør, ikke hvordan de ser ud. »Hero« overlever en farveopdatering; »lilla solnedgang« gør ikke. Seks roller dækker næsten ethvert brand.

| Rolle | Hvad den bruges til | Hvordan den adskiller sig |
| --- | --- | --- |
| Hero | Lanceringer, covers, det øjeblik folk husker | Hele spændet, mørk til lys |
| Dyb | Mørke sektioner, slides, aftenkampagner | Kun de to eller tre mørkeste farver |
| Stille | Lyse sider, dokumenter, lang læsning | Musling og den blegeste tone, næsten uden bevægelse |
| Glød | Produktbilleder og enkeltord | Radial, lys i ét hjørne |
| Accent | Knapper, badges, ét højdepunkt pr. design | Hovedfarven over i accentfarven |
| Tekst | Bag afsnit og billedtekster | Lav kontrast internt, høj mod skrift |

Seks roller til et brands gradientpalet. Små brands kan starte med hero, dyb og stille.

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

Familien bygget af grundpaletten ovenfor. Samme bund, samme vinkel på 135 grader, samme farver: de kunne stå side om side på én side uden at skændes.

## Reglerne, der gør gradienter til en familie

- **Én bund.** Hver mørk gradient ender i den samme blæk, hver lys i den samme musling. Bunden er det, øjet bruger til at gruppere dem.
- **Én retning.** Vælg en vinkel, 135 grader eller 160 grader, og hold fast i den. Blandede vinkler får en side til at føles tilfældig. [Gradientvinkel](https://gradiently.design/da/guide/gradient-angle) forklarer valget.
- **Matchende stop.** Genbrug de samme positioner (for eksempel 0, 45, 75 og 100 procent), så overgangene har samme rytme. [Farvestop i gradienter](https://gradiently.design/da/guide/gradient-stops) handler om afstande.
- **Jævne trin i lyshed.** Hver farve i en blanding bør være et tydeligt trin lysere eller mørkere end naboen. Ujævne trin giver en lys stribe i midten.
- **Én accent, i små doser.** Accentfarven optræder kun i én gradient. Spredt ud over dem alle holder den op med at være en accent.
- **En fast interpolation i kode.** Blander dit website i oklch, bør alle gradienter gøre det, ellers vil de samme koder se forskellige ud mellem sektionerne.

## Gør gradientpaletten til tokens

En palet, der kun lever i en PDF, bliver tastet ind igen og glider. Gem hver gradient én gang som en navngiven custom property, og henvis til den overalt. Designere kan indsætte de samme værdier i deres filer, og en fremtidig opdatering ændrer én linje pr. gradient. [Design tokens](https://gradiently.design/da/guide/design-tokens) handler om den bredere praksis.

```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 CSS custom properties. Farverne defineres én gang, og hver gradient bygges af dem.

## Test den på rigtige formater

Farveprøver lyver. En gradient, der ser afbalanceret ud som en lille firkant, kan lægge sit klareste bånd lige bag en overskrift, når den fylder en story på 1080×1920. Før du udgiver paletten, så lav tre rigtige designs med rigtige ord: et stående opslag, en story og en hero til et website. Tjek, at tekstgradienten holder afsnit læselige, med kontrasttjekkene i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility), og at hero og dyb ser beslægtede ud, når de står side om side.

Et stående lanceringsopslag på en fyldig gradientbaggrund med hele farvespændet

Hero-rollen på et stående opslag i 1080×1350.

En lodret story med den samme overskrift på en beslægtet gradientbaggrund fra samme familie

Den samme familie på en story i 1080×1920. Tjek, at det klareste bånd stadig går fri af overskriften i det højere format.

Med Gradiently Pro rummer brandkittet dine farvepaletter sammen med dit logo og dine skrifttyper, og Designer anvender dem, når den sætter nye designs op. Er din herogradient tænkt som det, folk genkender, viser [brandgradienter](https://gradiently.design/da/guide/brand-gradient-system), hvordan du gør én gradient til en signatur.

## FAQ

### Hvad er en gradientpalet?

Et lille, navngivet sæt gradienter lavet af én farvepalet med fælles regler, så de ligner én familie, uanset hvor de optræder.

### Hvor mange gradienter bør et brand have?

Fire til seks dækker de fleste behov: en hero, en dyb og en stille udgave, en radial glød, en accent og én, der er rolig nok til tekst. Små brands kan starte med tre.

### Hvordan får jeg gradienter til at se ud, som om de hører sammen?

Brug samme bundfarve, samme vinkel, samme stoppositioner og jævne trin i lyshed på tværs af alle gradienter.

### Hvordan skal jeg gemme brandgradienter til et website?

Definér farverne og hver gradient én gang som CSS custom properties, og henvis så til de navne i hver komponent.