# Fargesterke gradienter: mettede farger uten flimring

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

Mettede farger er den raskeste veien til oppmerksomhet, og til slitne øyne. Disse fargekodene er lyse med vilje og laget slik at kantene aldri flimrer. Her er også grunnene, så du kan lage dine egne.

## The short version

- En fargesterk gradient bruker svært mettede farger, men er bare behagelig å se på når nabofargene ligger nær i fargetone og skiller seg tydelig i lyshet.
- Motsatte fargetoner med lik lyshet som møtes langs en kant, ser ut til å flimre. Effekten kalles ofte kromatisk vibrasjon.
- Mettede motsetninger som blandes direkte i sRGB, går gjennom et grålig midtparti. Interpolering i oklch unngår i stor grad dette.
- En mørk eller nøytral grunn gir øyet et sted å hvile og får sterke farger til å virke lysere enn på hvitt.
- Tekst over en fargesterk gradient er mest lesbar i nesten svart eller hvitt, aldri i en annen mettet farge med lik lyshet.

En **fargesterk gradient** er lys og mettet uten flimring når to regler følges: Hver farge ligger nær naboen på fargesirkelen, og hvert steg gir en tydelig endring i lyshet. Bryt den første, og midten blir grumsete. Bryt den andre ved å sette motsatte fargetoner med lik lyshet ved siden av hverandre, og kanten ser ut til å flimre. De tolv fargekodene nedenfor følger begge reglene, så de roper høyt slik en plakat gjør, ikke slik en migrene gjør.

## Tolv fargekoder for fargesterke gradienter

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Elektrisk fiolett: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagune: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Limebrus: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Kirsebærpopp: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Isbre: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa mot natt: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Glør: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Koboltoppgang: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Korall til gull, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Alle blandingene går gjennom nærliggende fargetoner mens de blir lysere eller mørkere. Det holder dem rene. Den siste er skrevet i oklch og krever en oppdatert nettleser.

## Hvorfor noen lyse gradienter flimrer

Sett en mettet rødfarge rett mot en mettet blåfarge med lik lyshet, og grensen ser ut til å flimre, som om fargene ikke kan bestemme seg for hvilken som ligger foran. Designere kaller det kromatisk vibrasjon. Effekten er sterkest ved skarpe kanter, i tynne linjer og i farget tekst. Derfor er rød tekst på blå bakgrunn så slitsom å lese. Fargene i seg selv er fine. Det er kombinasjonen av motsatte fargetoner med lik lyshet som berører hverandre, som skaper effekten.

- Flimrer: skarp kant, lik lyshet: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Rolig: et mørkt steg imellom: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Samme rødt og blått. Til venstre møtes de med lik lyshet, og kanten flimrer. Til høyre skiller et dypt steg dem, og begge fargene virker sterkere.

Det finnes to løsninger. Hold enten fargene fra hverandre med et mørkere eller lysere steg mellom dem, som til høyre, eller velg nabofarger fremfor motsetninger. [Komplementærfarger](https://gradiently.design/nb/guide/complementary-colors) forklarer når motsetningene er verdt bryet.

## Regler for din egen fargesterke gradient

| Regel | Hvorfor | Eksempel |
| --- | --- | --- |
| Hold deg innenfor en tredjedel av sirkelen | Nabofarger blandes uten å gå gjennom grått | Indigo, fiolett, magenta |
| Endre lysheten trinnvis | Gir dybde og hindrer flimrende kanter | Dyp `#1d4ed8` opp til lys `#38bdf8` |
| Bruk én hovedfarge | Tre like sterke farger kjemper om plassen | Magenta står sterkest, resten støtter den |
| Legg til en grunn | Et mørkt eller nøytralt område lar øyet hvile | Rosa mot natt, Glør |
| Bland i oklch | Holder midten mettet fremfor blass | Korall til gull, oklch |

Fem regler bak alle fargekodene ovenfor. Bryt en regel med vilje, aldri ved et uhell.

Grumsete farger er den andre måten lyse gradienter kan mislykkes på. Bland to mettede motsetninger i vanlig sRGB, og fargen halvveis går mot grått. Det forklares i [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) og mer teknisk i [gradientinterpolering](https://gradiently.design/nb/guide/gradient-interpolation). Metning er en glidende skala, ikke en bryter. [Metning i design](https://gradiently.design/nb/guide/color-saturation) viser hvordan du justerer den.

## Fargesterke gradienter i CSS

Moderne nettlesere kan blande i et perseptuelt fargerom ved å legge til `in oklch` i gradienten. Det holder midten av en bred blanding like levende som endene. Gi eldre nettlesere en hex-versjon først.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

Ultra-gradienten med en reserveversjon med tre stopp, og en oklch-versjon med to stopp som holder seg levende gjennom midten uten et hjelpestopp.

## Hvor fargesterke gradienter fungerer best

Sterke farger får oppmerksomhet, så bruk dem der oppmerksomhet er hele poenget: i en strøm man blar gjennom, et miniatyrbilde blant tjue andre eller en plakat på andre siden av gata. De fungerer dårligere der folk skal lese lenge, som i dokumenter, dashbord og lange artikler, der en mettet flate sliter ut øyet etter noen avsnitt. Hold da den fargesterke gradienten til en toppseksjon eller én knapp, og la en rolig flate bære resten.

| Bruk | Prøv | Størrelse |
| --- | --- | --- |
| Innlegg om salg eller lansering | Mango, Flamingo | 1080×1350 |
| YouTube-miniatyrbilde | Elektrisk fiolett, Glør | 1280×720 |
| Toppseksjon for app eller produkt | Lagune, Isbre | 1920×1080 |
| Omslag til story eller Reel | Limebrus, Kirsebærpopp | 1080×1920 |
| Spillelisteomslag | Rosa mot natt, Ultra | 1080×1080 |
| A4-arrangementsplakat | Ultra, Koboltoppgang | 2480×3508 |

Seks steder fargesterke gradienter gjør nytte for seg, med fargekoder fra oversikten ovenfor og størrelsen du skal designe i.

Trykk er stedet der du må regne med en overraskelse. De lyseste skjermfargene, særlig elektrisk blått, knallrosa og syregrønt, ligger utenfor det CMYK-blekk kan gjengi og blir merkbart blassere på papir. [RGB mot CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer hvorfor. Velg litt dypere versjoner selv, og bestill et prøvetrykk før hele opplaget.

## Ord på en fargesterk gradient

Mettede bakgrunner varierer i lyshet fra den ene enden til den andre. En tekstfarge som er lesbar i den mørke enden, kan derfor forsvinne i den lyse. Bruk bare hvitt eller nesten svart, sett overskriften der gradienten er dypest eller lysest, og sjekk kontrasten på det svakeste punktet, ikke gjennomsnittet. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) har tallene du bør sikte mot.

Et stående salgsinnlegg med fet skrift over en lys, mettet bakgrunn

En sterk bakgrunn med enkel, tung skrift. Fargen selger, ordene trenger bare å være lesbare.

Her hjelper en Gradiently Mark med sterke farger: Den vet hvor ordene er, gjør fargen nær bokstavene mørkere eller lysere, og Auto-tekstfarge velger lys eller mørk skrift for hver linje fra Markens egen palett. En mettet stil forblir lesbar i alle størrelser uten en boks eller skygge bak overskriften. Se [neongradienter](https://gradiently.design/nb/guide/neon-gradients) for neonstiler, og [diskrete gradienter](https://gradiently.design/nb/guide/subtle-gradients) for den andre enden av skalaen.

## FAQ

### Hva får en gradient til å se fargesterk ut?

Svært mettede farger som ligger nær hverandre på fargesirkelen, med en tydelig endring i lyshet fra den ene enden til den andre.

### Hvorfor er noen lyse fargekombinasjoner vonde å se på?

Motsatte fargetoner med lik lyshet som møtes langs en kant, ser ut til å flimre. Skill dem med et mørkere eller lysere steg, eller velg nabofarger.

### Hvordan hindrer jeg at en lys gradient blir grå i midten?

Bruk nærliggende fargetoner, legg til et stopp i midten, eller bland i oklch med `linear-gradient(in oklch, ...)` i nettlesere som støtter det.

### Hvilken tekstfarge fungerer på en fargesterk gradient?

Hvitt eller nesten svart. Sjekk kontrasten på det lyseste og mørkeste punktet bak ordene, ikke bare i midten.

### Hva er en god fargesterk gradient til toppseksjonen på et nettsted?

Prøv `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` med hvit skrift.