# 60 fargekombinasjoner for gradienter som fungerer, med koder

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

Seksti gradienter, sortert etter følelsen du vil ha og ikke etter fargetone. Hver av dem er en levende CSS-kode du kan kopiere, og hver gruppe forklarer regelen som får overgangene til å fungere.

## The short version

- De beste fargekombinasjonene for gradienter bruker enten nabofargetoner, som blander seg rent, eller slår bro mellom fjerne fargetoner med en valgt mellomfarge.
- Rolige gradienter holder lyshet og fargetone tett sammen; dristige gradienter presser metning og avstand mellom fargetonene.
- Mørke gradienter fungerer best som en nesten svart bunn med én opplyst farge, og pastellgradienter fungerer best som bleke naboer med mørkt blekk til teksten.
- Å velge en gradient etter stemning først og fargetone etterpå gir mer konsekvente resultater enn å plukke farger du liker én om gangen.
- Enhver kombinasjon her kan gjøres mer særpreget med en tredje farge, en annen vinkel eller et lag med korn.

De beste **fargekombinasjonene for gradienter** følger én av to regler: de bruker fargetoner som ligger ved siden av hverandre på fargesirkelen, så overgangen holder seg ren, eller de slår bro mellom fjerne fargetoner med en valgt mellomfarge, så den aldri blir grå. Nedenfor er 60 kombinasjoner som følger de reglene, gruppert etter stemning: rolig, dristig, varm, kjølig, mørk og pastell. Kopier en hvilken som helst prøve som CSS, og les notatet under hver gruppe for å se hvorfor de fungerer, så du kan lage dine egne.

Alt her er ren CSS med hex-farger, så det fungerer i enhver nettleser, og de samme kodene kan skrives inn i ethvert designverktøy. Er et begrep nytt, forklarer [hva en gradient er](https://gradiently.design/nb/guide/what-is-a-gradient) stopp og vinkler.

## Rolige gradientkombinasjoner

Rolige gradienter holder fargene tett sammen i både fargetone og lyshet. Ingenting hopper, så øyet hviler. De gir gode bakgrunner for lesing, velværemerker, porteføljer og alt som skal føles stille. Salvie og stein, for eksempel, flytter seg bare et lite stykke rundt sirkelen og mister litt lyshet underveis, noe som leses som skygge på en vegg og ikke som en fargeeffekt.

- Havglass: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Morgentåke: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salvie og stein: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Lavendelskumring: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Stille vann: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Sandbanke: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eukalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Skiferblå: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Havremelk: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Månestein: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Rolig: én fargefamilie, små steg i lyshet. De bærer mørk tekst uten problemer.

## Dristige gradientkombinasjoner

Dristige gradienter bruker mettede farger og større avstand rundt sirkelen. De fanger oppmerksomheten i en full feed, på et salgsbanner eller en lanseringsside. Trikset er å velge par der den rette overgangen holder seg lysende. Magenta til rav går gjennom korall; kobolt til korall går gjennom lilla. Ingen av dem kommer i nærheten av grått, og derfor ser de livlige ut hele veien.

- Elektrisk fiolett: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Het sitrus: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Tropisk punsj: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Ultramarin flamme: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta til rav: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Jungel: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Kobolt og korall: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Druebrus: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lime og blågrønt: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Dristig: høy metning, par valgt slik at midtpunktet holder seg lysende. Bruk hvit tekst på den mørke enden.

## Varme gradientkombinasjoner

Varme gradienter lever mellom rødt og gult og føles solfylte, appetittvekkende og menneskelige. De passer til mat, servering, livsstil og alt som er personlig. De fleste av disse har en mørkere, rødere ende så overgangen får tyngde: Gyllen time går fra blek honning til brent rav slik sent lys beveger seg nedover en vegg. Temperaturens psykologi finner du i [varme og kalde farger](https://gradiently.design/nb/guide/warm-and-cool-colors).

- Gyllen time: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terrakotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Ferskensorbet: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Glør: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Ørkenrose: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Honning: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Kanel: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Solnedgangsstripe: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Aprikos og plomme: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Tegl og gull: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Varm: røde, oransje og gule naboer, som regel med en mørkere ende for dybde. Flere finner du i [solnedgangsgradienter](https://gradiently.design/nb/guide/sunset-gradient).

## Kjølige gradientkombinasjoner

Kjølige gradienter ligger mellom grønt og fiolett og føles rene, rolige og presise. De er det naturlige hjemmet for teknologi, helse, finans og vann. Blått er ankeret i de fleste av dem, og derfor virker de tillitvekkende, og derfor trenger en kjølig gradient en særpreget detalj, som en fiolett ende eller et skifte mot blågrønt, for ikke å ligne enhver bank. Flere blåtoner er samlet i [blå gradienter](https://gradiently.design/nb/guide/blue-gradient).

- Isbre: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Dyp lagune: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordisk: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Indigonatt: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Mynte til himmel: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Gravmyrt: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Arktisk blågrønn: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Blåtimen: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Isfiolett: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Havdyp: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Kjølig: grønne, blågrønne, blå og fiolette naboer. Et lite skifte i fargetone gjør dem mindre bedriftsaktige.

## Mørke gradientkombinasjoner

Mørke gradienter er nesten svarte bunner med én opplyst farge som stiger opp av dem. De føles eksklusive, nattlige og filmatiske, og de får hvit skrift til å se skarp ut. Hold den mørke enden litt farget i stedet for ren svart, så overgangen har noe å bevege seg gjennom. Mørke overganger får lett banding, så legg til korn før du publiserer; se [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds).

- Midnattsfiolett: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Dyphav: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Skogbunn: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Okseblod: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafitt: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Blekk og glør: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petrol: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Nattblågrønn: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Mørk kirsebær: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Mørk: en tonet nesten svart, en dyp midte og én opplyst farge i den andre enden.

## Pastellgradienter i kombinasjon

Pasteller er bleke farger med høy lyshet og litt metning. De føles friske, myke og vennlige, og de passer til skjønnhet, baby, papirvarer og vårkampanjer. Fordi alle er så lyse, kan selv fjerne pastelltoner blande seg til en hvitaktig grå, så de to siste her går via en blek lilla. Sett tekst på pasteller i mørkt blekk, ikke i hvitt. Mer finner du i [pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients).

- Sukkerspinn: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Fersken og lilla: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistasj: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Babyblå: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Sitron og rouge: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Mynte og krem: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Pudderfiolett: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Sjøskum og rose: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Morgenhimmel: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastell: bleke naboer, eller fjerne pasteller med lilla som bro, så midten holder seg tonet.

## Slik bruker du disse gradientkodene

Hver kode er en komplett CSS-verdi for `background`. Lim den inn på et hvilket som helst element, eller les hex-fargene og stopposisjonene inn i et designverktøy. På nettet setter du først en ensfarget reservefarge, hentet fra det mørkeste eller viktigste stoppet.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Midnattsfiolett på et kort, med reservefarge og hvit tekst.

## Slik lager du din egen kombinasjon

1. **Velg stemningen først** Bestem rolig eller dristig, varm eller kjølig, mørk eller lys før noen farge. Det snevrer valgene inn til én av gruppene over.
2. **Velg en ankerfarge** Som regel merkevarefargen din eller fargen på det du selger. Se [hvordan du velger merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors).
3. **Legg til en nabo** Flytt deg 30 til 60 grader rundt fargesirkelen for en ren andrefarge. Endre lysheten litt også, for dybde.
4. **Slå bro over alt som er fjernt** Vil du ha en fjern fargetone, legger du en lysende mellomfarge mellom dem, så overgangen ikke blir grå. Se [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).
5. **Gjør den til din** Endre vinkelen, flytt et stopp bort fra 50 %, legg til en tredje farge eller et lag med korn. Små endringer er det som hindrer en kombinasjon i å se ut som en forhåndsinnstilling.

En populær kode er en god start, men tusenvis av andre design starter også der. Vil du ha en gradientidentitet ingen andre har, kan du matche et bilde du elsker med paletten og de nærmeste Marks, eller lage nye som ligner.

## FAQ

### Hvilke farger passer sammen i en gradient?

Farger ved siden av hverandre på fargesirkelen, som blått og fiolett eller oransje og rosa, blander seg alltid rent. Fjerne farger fungerer når en lysende mellomfarge slår bro mellom dem.

### Hva er den mest populære gradientkombinasjonen?

Fiolett til rosa og blått til cyan er blant de mest brukte. Den populariteten er også grunnen til at de sjelden ser særpregede ut.

### Hvor mange farger bør en gradient ha?

To er enklest, tre gir dybde og kontroll over midtpunktet, og mer enn fem er vanskelig å holde rent.

### Hvilken tekstfarge fungerer på en gradient?

Hvit eller nesten hvit på mørke og dristige gradienter, og mørkt blekk på pastell og rolige. Sjekk kontrasten på det lyseste punktet bak teksten.

### Kan jeg bruke disse gradientkodene i Figma eller Canva?

Ja. Kopier hex-fargene og stopposisjonene inn i verktøyets gradientfyll, og tilpass vinkelen.