# Tofargede gradienter: 30 par som alltid fungerer

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

To farger, én retning, ingenting som kan gå galt. Nesten. Her er de to reglene som avgjør om et par fungerer, og tretti par som består begge, klare til å kopieres.

## The short version

- En tofarget gradient blander én farge over i en annen, og det er den enkleste gradienten å designe, omfarge og holde enhetlig.
- Om et par fungerer, avhenger mest av avstanden mellom fargetonene: nabotoner blander seg alltid rent, og motsatte fargetoner blir grå i midten.
- En forskjell i lyshet mellom de to fargene gir en gradient retning og dybde.
- To farger fra samme fargefamilie, én lys og én mørk, gir den mest anvendelige gradienten fordi tekst fungerer i den ene enden.
- Fordi tofargede gradienter er så vanlige, er det en liten endring, som en uvanlig vinkel, et forskjøvet midtpunkt eller et lag med korn, som gjør en av dem gjenkjennelig.

En **tofarget gradient** er en overgang fra én farge til en annen, og det er den tryggeste gradienten du kan lage: to farger er lette å velge, lette å omfarge og lette å holde enhetlige. Om et par fungerer, koker ned til to ting: hvor langt fra hverandre fargetonene ligger på fargehjulet, og hvor ulike de er i lyshet. Får du til de to, gir nesten hvilke som helst to farger en god gradient. Under kommer reglene, og så tretti par som følger dem.

## Regel 1: følg med på avstanden mellom fargetonene

Fargetoneavstand er hvor langt fra hverandre to farger ligger på fargehjulet, målt i grader. Den forutsier hva som skjer i midten av overgangen, og det er der tofargede gradienter lykkes eller mislykkes.

| Fargetoneavstand | Hva som skjer i midten | Dom |
| --- | --- | --- |
| 0 til 60 grader | En ren mellomfarge, som fiolett mellom blått og rosa | Alltid trygt |
| 60 til 120 grader | Som regel en tydelig ny farge, noen ganger litt matt | Trygt, men sjekk midten |
| 120 til 150 grader | Ofte en mykere, gråere midte | Test nøye |
| 150 til 180 grader | Grått eller brunt i midten når det blandes på standardmåten | Trenger en brofarge eller OKLCH |

Jo større avstand, desto mer sannsynlig er det at midtpunktet mister farge. Hele forklaringen står i [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

Avstandene i første rad er [analoge farger](https://gradiently.design/nb/guide/analogous-colors). Avstandene i siste rad er [komplementærfarger](https://gradiently.design/nb/guide/complementary-colors), som ser slående ut side om side, men trenger hjelp når de blandes.

## Regel 2: gi den en forskjell i lyshet

To farger med samme lyshet gir en gradient som føles flat, som om den ikke er på vei noe sted. En tydelig forskjell i lyshet gir overgangen retning, som lys som faller inn fra den ene siden. Det gir også en praktisk fordel: teksten kan stå i den mørke enden i hvitt, eller i den lyse enden i en mørk tekstfarge.

### Føles flat

- To mellomtoner med samme lyshet
- To fullt mettede farger uten noen mørk ende
- Ingen opplagt plass til tekst

### Føles belyst

- Én lysere og én mørkere farge
- En mettet farge sammen med en dypere nabo
- En tydelig lys ende og mørk ende for tekst

## Par med nære fargetoner

Disse parene ligger innenfor omtrent 60 grader fra hverandre. De er umulige å gjøre grumsete og ser bra ut på nesten alt, fra knapper til bakgrunner i fullskjerm. Blåbær og Tidevann er for eksempel begge blått på vei mot fiolett, noe som leses som én farge som fanger lyset.

- Blåbær: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)`
- Flamingo: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)`
- Lagune: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)`
- Ringblomst: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)`
- Orkidé: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)`
- Nyklipt: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)`
- Rosentre: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)`
- Tidevann: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)`
- Klementin: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)`
- Mose og blågrønn: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)`

Par med nære fargetoner: naboer på hjulet, så midten alltid er en ren farge.

## Par fra lyst til mørkt

Disse parene holder seg til én fargefamilie og endrer lysheten fra blek til dyp. De er de mest anvendelige tofargede gradientene: rolige nok til en hel side, og med en mørk ende som er klar for hvit tekst. De er også utmerkede merkevaregradienter, fordi de utvider én merkevarefarge i stedet for å legge til en ny. Se [monokromatiske fargeskjemaer](https://gradiently.design/nb/guide/monochromatic-color-scheme) for teorien.

- Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)`
- Plomme: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)`
- Skog: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)`
- Rust: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)`
- Koks: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)`
- Vin: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)`
- Dyp blågrønn: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)`
- Indigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)`
- Kakao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)`
- Rav: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)`

Par fra lyst til mørkt: én fargefamilie, stor endring i lyshet. Mørk tekst øverst, hvit tekst nederst.

## Kontrastpar som holder seg rene

Disse parene ligger lenger fra hverandre, mellom omtrent 90 og 150 grader, men hvert av dem har et lyst og klart midtpunkt når det blandes på standardmåten. Fersken og fiolett går gjennom lillarosa, cyan og magenta gjennom lavendelblå, oransje og magenta gjennom knallrosa. De har mer energi enn de nære parene og passer til lanseringer, musikk og alt som skal skille seg ut.

- Korall og indigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)`
- Fersken og fiolett: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)`
- Lime og blå: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)`
- Rosa og himmel: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)`
- Gul og rosa: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)`
- Cyan og magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)`
- Rød og fiolett: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)`
- Mynte og fiolett: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)`
- Oransje og magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)`
- Grønn og gull: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)`

Kontrastpar: større avstand mellom fargetonene, fortsatt en klar midte. Sjekk tekstkontrasten i begge ender.

## Flytte midtpunktet

Som standard er en tofarget gradient halvt om halvt. CSS lar deg flytte punktet der de to fargene er jevnt blandet, med et fargehint: en frittstående prosentverdi mellom stoppene. Skyv det mot den ene enden, så tar den andre fargen over mer av flaten, uten at du legger til en tredje farge.

```css
/* Even blend: the mix point sits at 50% */
.even   { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }

/* Colour hint at 75%: blue holds on for most of the box */
.blue   { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }
```

Et fargehint flytter midtpunktet uten å legge til en farge. Det er en av de raskeste måtene å få et vanlig par til å se mindre standard ut.

## Hvor teksten bør stå på en tofarget gradient

En tofarget gradient har et innebygd oppsett: den ene enden er lysere og den andre mørkere. Legg ordene i den enden som gir mest kontrast mot tekstfargen din, og la den andre enden bære fargen. For hvit tekst er det den mørke enden, for mørk tekst den lyse. Midtstill aldri liten tekst over midtpunktet i et par fra lyst til mørkt, for kontrasten endrer seg langs linjen. [Tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) går gjennom kontrollene i detalj.

Et stående innlegg med en kort overskrift plassert i den roligste enden av en gradientbakgrunn

Ord i den rolige enden av overgangen, farge i den andre: det enkleste oppsettet en gradient kan by på.

## Gjør en tofarget gradient til din egen

Tofargede gradienter er populære nettopp fordi de er trygge, så de populære parene er overalt. For å gjøre en gjenkjennelig endrer du noe folk legger merke til uten å tenke over det: en brattere eller uvanlig vinkel (se [gradientvinkler](https://gradiently.design/nb/guide/gradient-angle)), et forskjøvet midtpunkt, et fint korn eller en tredje farge som bare brukes i den ene kanten. Når du er klar til å gå forbi to, er de [60 fargekombinasjonene for gradienter](https://gradiently.design/nb/guide/gradient-color-combinations) gruppert etter stemning.

Vet du allerede hvilke to farger du vil ha, kan du skrive dem inn i søket i Markedet, for eksempel «blå og fiolett», og designe med Marks som er bygget rundt dem.

## FAQ

### Hvilke to farger gir den beste gradienten?

Farger innenfor omtrent 60 grader fra hverandre på fargehjulet, med en tydelig forskjell i lyshet, gir de mest pålitelige tofargede gradientene.

### Hvorfor ser den tofargede gradienten min grå ut i midten?

Fargene ligger nesten rett overfor hverandre på fargehjulet. Legg til en klar brofarge i midten eller bland i OKLCH.

### Er en tofarget gradient bedre enn tre farger?

To farger er enklere og tryggere. Tre gir mer dybde og lar deg styre midtpunktet, men er lettere å gjøre feil med.

### Hvordan endrer jeg hvor to farger møtes i en CSS-gradient?

Legg til et fargehint, en frittstående prosentverdi mellom de to stoppene, for eksempel `linear-gradient(#3b82f6, 25%, #8b5cf6)`.

### Hvor bør teksten stå på en tofarget gradient?

I den enden som gir mest kontrast mot tekstfargen din: hvit i den mørke enden, mørk tekst i den lyse.