# Så bygger du en gradientpalett för ett varumärke

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

En bra gradient är lätt. Sex som tydligt hör ihop, täcker varje uppgift ett varumärke har och ändå ser rätt ut bredvid varandra är ett system. Så bygger du det.

## The short version

- En gradientpalett är en liten, namngiven familj av gradienter gjorda av en baspalett och några gemensamma regler.
- De flesta varumärken behöver fyra till sex gradienter: en hero, en djup version, en stilla ljus version, ett radiellt sken, en accent och en lugn för text.
- Gradienter läses som en familj när de delar en grundfärg, en riktning, konsekventa stopppositioner och samma steg i ljushet.
- Att lagra gradienter som namngivna CSS-variabler håller dem identiska över en webbplats, en app och designfiler.
- En gradientpalett bör testas på riktiga format med riktiga ord innan den skrivs in i varumärkesriktlinjer.

En **gradientpalett** är en liten, namngiven familj av gradienter byggd av en färgpalett och en handfull gemensamma regler, så att varje gradient ett varumärke använder ser släkt ut. Börja med fem eller sex basfärger, ge varje gradient en uppgift (hero, djup, stilla, sken, accent, text) och fixera sedan det som gör dem till syskon: samma grundfärg, samma vinkel, matchande stopppositioner och jämna steg i ljushet. Skriv ner dem som variabler och testa dem på riktiga designer innan någon annan använder dem.

## Varför ett varumärke behöver mer än en gradient

En enda gradient sträcks över uppgifter den inte klarar. Den klara hero-blandningen som ser fantastisk ut på ett lanseringsinlägg är för högljudd bakom ett stycke, för mörk för en ljus webbsektion och för stökig för en bild full av siffror. Team improviserar då, någon väljer ett blått i närheten, och inom ett år har varumärket femton gradienter som nästan matchar. En palett förhindrar det genom att bestämma variationerna i förväg.

### En hög gradienter

- Var och en gjord för sig, för en design
- Olika vinklar på varje sida
- Färger som nästan matchar varumärket
- Inget namn, så ingen kan be om en
- Kopierade på känn från gamla filer

### En gradientpalett

- Byggd av en baspalett
- En riktning, använd överallt
- Exakta hexkoder och stopppositioner
- Namngivna efter uppgift: hero, djup, stilla
- Lagrade som variabler i kod och filer

## Börja från en baspalett

Varje gradient i familjen ska bara göras av de här färgerna, eller av nyanser och toner av dem. Om dina varumärkesfärger inte är klara än, ordna det först med [hur du väljer varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors). En användbar bas har en mörk grund, två eller tre steg av huvudnyansen, ett nästan vitt och en accent från någon annan del av hjulet.

- Bläck: #14112b
- Nattplommon: #2e1065
- Plommon: #4c1d95
- Violett: #7c3aed
- Orkidé: #c084fc
- Snäcka: #faf5ff
- Glöd: #f97316

En bas som exempel: en mörk grund, fyra steg av violett, ett nästan vitt och en enda varm accent. Varje gradient nedan är byggd av de här sju koderna.

## Ge varje gradient en uppgift

Namnge gradienter efter vad de gör, inte efter hur de ser ut. ”Hero” överlever en färgförnyelse, ”lila solnedgång” gör det inte. Sex roller täcker nästan alla varumärken.

| Roll | Vad den är till för | Hur den skiljer sig |
| --- | --- | --- |
| Hero | Lanseringar, omslag, ögonblicket som folk minns | Hela spannet, mörkt till ljust |
| Djup | Mörka sektioner, bildspel, kvällskampanjer | Bara de två eller tre mörkaste färgerna |
| Stilla | Ljusa sidor, dokument, långläsning | Snäcka och den blekaste tonen, rör sig knappt |
| Sken | Produktbilder och enstaka ord | Radiell, ljus i ett hörn |
| Accent | Knappar, märken, en markering per design | Huvudnyansen över i accentfärgen |
| Text | Bakom stycken och bildtexter | Låg kontrast i sig själv, hög mot text |

Sex roller för en gradientpalett för ett varumärke. Små varumärken kan börja med hero, djup och stilla.

- Hero: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Djup: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Stilla: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Sken: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Accent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Text: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

Familjen byggd av basen ovan. Samma grund, samma vinkel på 135 grader, samma färger: de skulle kunna ligga sida vid sida på en sida utan att tvista.

## Reglerna som gör gradienter till en familj

- **En grund.** Varje mörk gradient slutar i samma bläck, varje ljus i samma snäcka. Grunden är det ögat använder för att gruppera dem.
- **En riktning.** Välj en vinkel, 135 grader eller 160 grader, och behåll den. Blandade vinklar får en sida att kännas slumpmässig. [Gradientvinkel](https://gradiently.design/sv/guide/gradient-angle) förklarar valet.
- **Matchande stopp.** Återanvänd samma positioner (till exempel 0, 45, 75, 100 procent) så att övergångarna får samma rytm. [Gradientstopp](https://gradiently.design/sv/guide/gradient-stops) går igenom avstånden.
- **Jämna steg i ljushet.** Varje färg i en blandning ska vara ett tydligt steg ljusare eller mörkare än sin granne. Ojämna steg ger ett klart streck i mitten.
- **En accent, ransonerad.** Accentfärgen förekommer i bara en gradient. Spridd över alla slutar den vara en accent.
- **En fast interpolering i kod.** Om din sajt blandar i oklch ska alla gradienter göra det, annars ser samma koder olika ut mellan sektioner.

## Gör gradientpaletten till variabler

En palett som bara lever i en PDF skrivs om och glider iväg. Lagra varje gradient en gång som en namngiven variabel och hänvisa till den överallt. Formgivare kan klistra in samma värden i sina filer, och en framtida förnyelse ändrar en rad per gradient. [Designvariabler](https://gradiently.design/sv/guide/design-tokens) tar upp den bredare praktiken.

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

Hela familjen som CSS-variabler. Färgerna definieras en gång och varje gradient byggs av dem.

## Testa den på riktiga format

Färgprover ljuger. En gradient som ser balanserad ut som en liten kvadrat kan lägga sitt klaraste band rakt bakom en rubrik när den fyller en story i 1080×1920. Innan du publicerar paletten, gör tre riktiga designer med riktiga ord: ett stående inlägg, en story och en webbplats-hero. Kontrollera att textgradienten håller styckena läsbara med kontrastkontrollerna i [färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility), och att hero och djup ser släkt ut när de ligger sida vid sida.

Ett stående lanseringsinlägg på en rik gradientbakgrund med hela spannet

Hero-rollen på ett stående inlägg i 1080×1350.

En stående story med samma rubrik på en besläktad gradientbakgrund ur samma familj

Samma familj på en story i 1080×1920. Kontrollera att det klaraste bandet fortfarande håller sig utanför rubriken i den högre bildrutan.

Med Gradiently Pro rymmer varumärkeskitet dina färgpaletter vid sidan av logotyp och typsnitt, och Designer tillämpar dem när den lägger ut nya designer. Om din hero-gradient ska vara det folk känner igen, tar [varumärkesgradienter](https://gradiently.design/sv/guide/brand-gradient-system) upp hur du gör en gradient till en signatur.

## FAQ

### Vad är en gradientpalett?

En liten, namngiven uppsättning gradienter gjorda av en färgpalett med gemensamma regler, så att de ser ut som en familj var de än dyker upp.

### Hur många gradienter bör ett varumärke ha?

Fyra till sex täcker de flesta behov: en hero, en djup och en stilla version, ett radiellt sken, en accent och en som är lugn nog för text. Små varumärken kan börja med tre.

### Hur får jag gradienter att se ut att höra ihop?

Använd samma grundfärg, samma vinkel, samma stopppositioner och jämna steg i ljushet över varje gradient.

### Hur ska jag lagra varumärkesgradienter för en webbplats?

Definiera färgerna och varje gradient en gång som CSS-variabler och hänvisa sedan till de namnen i varje komponent.