# Gradient eller flat farge? Når hver av dem vinner

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

Flat farge er tydelig, billig og nøyaktig. Gradienter er levende, særpregede og vanskeligere å styre. De fleste gode merkevarer bruker begge. Slik avgjør du hvilken hver flate trenger.

## The short version

- Flat farge vinner der klarhet, nøyaktig gjengivelse og små størrelser betyr noe, som ikoner, kontroller i grensesnitt, bakgrunner for brødtekst og enfarget trykk.
- Gradienter vinner der en flate trenger stemning, dybde eller særpreg, som bakgrunner, forsider, heroer, innlegg i sosiale medier og merkevareflater.
- Kontrasten i en gradient endrer seg over flaten, så tekst på den må sjekkes på det verste punktet, ikke på gjennomsnittet.
- De fleste sterke visuelle identiteter bruker en gradient som signatur og en flat farge hentet fra den som hverdagens reserveløsning.
- Skjermene svingte fra blanke, teksturerte stiler til flatt design tidlig på 2010-tallet og tilbake mot mykere gradienter senere, så ingen av dem er ganske enkelt moderne eller utdatert.

I spørsmålet om **gradient eller flatt design** vinner ingen av sidene overalt. Flat farge er tydeligere, gjengis nøyaktig og overlever bittesmå størrelser og enfarget trykk. Gradienter bærer stemning, antyder lys og dybde og gir en merkevare mye mer rom til å være særpreget. Det praktiske svaret for de fleste merkevarer er begge deler: en gradient der flaten er stor og uttrykksfull, og en flat farge, hentet fra gradienten, der jobben er liten, funksjonell eller trykkes i én farge.

- Flat fiolett: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)`
- Fiolett gradient: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)`

Den samme fioletten som flatt fyll og som en gradient bygget rundt den. Den ene er en farge; den andre er en flate med lys på.

## Der flat farge vinner

- **Små størrelser:** favikoner, appmerker og ikoner mister detaljene i en gradient, mens en flat farge holder seg skarp
- **Kontroller i grensesnitt:** knapper, brytere og tilstander leses tydeligere når hver tilstand er én farge
- **Bak lang tekst:** konstant kontrast betyr at hver linje er like leselig
- **Enfarget trykk:** broderi, silketrykk, gravering, stempler og jobber med én trykkfarge kan ikke gjengi en overgang
- **Nøyaktig matching:** én enkelt spotfarge kan matches på tvers av materialer langt mer pålitelig enn en overgang
- **Diagrammer og data:** flate farger holder kategorier adskilte og sammenlignbare

## Der gradienter vinner

- **Store flater:** bakgrunner, forsider, heroer og plakater der flat farge føles tom
- **Stemning og lys:** en overgang antyder en tid på døgnet, et materiale eller en glød som én farge ikke kan
- **Særpreg:** det finnes bare så mange enkeltfargetoner som lar seg skille, og de fleste er opptatt i enhver kategori
- **Sosiale feeder:** et godt bygget gradientfelt skiller seg ut i en strøm av bilder og flate maler
- **Dybde i grensesnitt:** en diskret gradient på en hero eller et hovedkort skiller lag uten skygger
- **Bevegelse:** gradienter kan drive og puste; se [animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background)

## Gradient mot flat, faktor for faktor

| Faktor | Flat farge | Gradient |
| --- | --- | --- |
| Lesbarhet | Konstant kontrast overalt | Kontrasten varierer; sjekk det verste punktet |
| Gjenkjennelse | Sterk hvis du eier en sjelden fargetone | Sterk hvis oppskriften holdes konsekvent |
| Særpreg | Begrenset av antall fargetoner | Enormt rom av kombinasjoner |
| Små størrelser | Utmerket | Ofte grumsete eller borte |
| Trykk | Nøyaktig, også i én farge | Krever fullfarge; kan få bånd eller forskyves |
| Tilstander i grensesnitt | Tydelige og forutsigbare | Best begrenset til ett eller to områder med vekt |
| Stemning og dybde | Begrenset | Utmerket |
| Filstørrelse og innsats | Ubetydelig | Liten i CSS, større som bilder og video |

Flat farge er den tryggeste standarden for funksjon. Gradienter er det sterkeste valget for uttrykk.

## Spørsmålet om lesbarhet

På en flat bakgrunn gjelder det at hvis ett ord består kontrastkravet, gjør alle det. På en gradient endrer kontrasten seg når fargen endrer seg, så en overskrift kan leses perfekt i den ene enden og forsvinne i den andre. Mål alltid kontrasten på det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. Hele metoden står i [tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) og [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et stående innlegg der en overskrift krysser både de lyse og de mørke delene av en gradient

En gradient som går rett gjennom ordene: kontrasten endres bokstav for bokstav.

Det samme innlegget med et roligere, jevnere område av gradienten bak overskriften

Den samme gradienten som gir plass til ordene: uttrykket blir, lesbarheten kommer tilbake.

## En kort historie: flatt, og så gradienter igjen

Gjennom 2000-tallet var skjermene blanke: knapper med skråkanter, glassaktige høylys og teksturer som etterlignet lær og papir. Tidlig på 2010-tallet gikk de store operativsystemene over til flatt design, med ensfargede flater, enkle ikoner og ingen falsk dybde, og mye av nettet fulgte etter. Fra midten av 2010-tallet kom mykere gradienter tilbake, nå som jevne overganger mellom to eller tre farger og ikke som blanke effekter, og noen svært synlige merkevareikoner byttet til gradienter. Mer i [gradientenes historie](https://gradiently.design/nb/guide/history-of-gradients).

Lærdommen er at ingen av stilene er varig moderne. Det som daterer et design, er den konkrete behandlingen: tung glans daterer en gradient, og en standardpalett daterer flat farge.

## Slik avgjør du for hver flate

1. **Spør hva flaten er til for** Hjelper den folk å handle, lese eller sammenligne, heller du mot flatt. Setter den en stemning eller presenterer merkevaren, heller du mot gradient.
2. **Sjekk størrelsen** Under omtrent ikonstørrelse bruker du flatt. Gradienter trenger plass for å vise overgangen.
3. **Sjekk hvordan den skal gjengis** Én trykkfarge, tråd eller gravering betyr flatt. Skjermer og fullfargetrykk kan bære en gradient.
4. **Sjekk ordene** Lang tekst vil ha en flat eller svært rolig bunn. En overskrift kan stå på en gradient hvis kontrasten holder på det verste punktet.
5. **Hold dem beslektet** Hent de flate fargene dine fra gradienten, så de to alltid ser ut som én merkevare.

### Velg flatt til

- Favikoner, appmerker og små ikoner
- Knapper, brytere, faner og skjematilstander
- Sider med brødtekst og datatabeller
- Broderi, stempler og trykk i én farge

### Velg gradient til

- Forsider, plakater og innlegg i sosiale medier
- Nettsted-heroer og lanseringssider
- Merkevareflater bak logoer og overskrifter
- Looper, bakgrunnsbilder og åpningsbilder i presentasjoner

## Bruk begge: en gradient med en flat reservefarge

De sterkeste systemene behandler gradienten som signaturen og velger én eller to flate farger fra den til hverdagsjobber. Den dypeste tonen blir tekst- eller ikonfargen, en mellomtone blir knappefargen, og selve gradienten vises på forsider, heroer og innlegg. Slik får du uttrykk og funksjon uten to paletter som ikke hører sammen. [Gradient i merkevarebygging](https://gradiently.design/nb/guide/gradient-branding) går gjennom det.

- Dyp: tekst og ikoner: #2e1065
- Hoved: knapper, reserve: #6d28d9
- Lys: høylys: #c084fc
- Tone: stille flater: #f5f3ff

Flate farger hentet fra den fiolette gradienten over. Hver har en jobb, og sammen passer de alltid til gradienten.

Hver Mark i Gradiently er en gradient med sin egen innebygde palett, så de flate fargene til tekst, knapper og små størrelser kommer fra samme oppskrift som bakgrunnen.

## FAQ

### Er flatt design bedre enn gradienter?

Ingen av dem er best overalt. Flat farge er best til små størrelser, grensesnitt og enfarget trykk; gradienter er best til store, uttrykksfulle flater og særpreg.

### Er gradienter utdaterte?

Nei. Tunge, blanke gradienter ser utdaterte ut, men myke gradienter med to eller tre farger brukes mye i dagens merkevareidentiteter og grensesnitt.

### Bør logoen min være en gradient eller en flat farge?

Mange logoer har en gradientversjon for stor bruk på skjerm og en flat versjon for små størrelser og enfarget trykk. Den flate versjonen trenger du uansett.

### Er tekst vanskeligere å lese på en gradient?

Det kan den være, fordi kontrasten endrer seg over gradienten. Sjekk kontrasten på det verste punktet bak teksten, eller behold et rolig område til ordene.

### Kan jeg bruke gradienter og flate farger sammen?

Ja, og de fleste sterke merkevarer gjør det. Hent de flate fargene fra gradienten, så alt passer sammen.