# Farvestærke gradienter: mættede koder, der ikke flimrer

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

Mættede farver er den hurtigste vej til at blive set og den hurtigste vej til ømme øjne. Disse koder er lyse med vilje og bygget, så deres kanter aldrig flimrer, med forklaringerne, så du kan lave dine egne.

## The short version

- En farvestærk gradient bruger stærkt mættede farver, men den er kun behagelig at se på, når nabofarver ligger tæt i farvetone og adskiller sig tydeligt i lyshed.
- Farver med modsat farvetone og samme lyshed lagt kant mod kant ser ud til at flimre, en effekt, der ofte kaldes kromatisk vibration.
- Mættede modsætninger blandet direkte i sRGB passerer gennem en grålig midte, hvilket interpolation i oklch stort set undgår.
- En mørk eller neutral bund giver øjet et sted at hvile og får farvestærke farver til at se lysere ud end på hvidt.
- Tekst oven på en farvestærk gradient læses bedst i næsten sort eller hvid, aldrig i en anden mættet farve med samme lyshed.

En **farvestærk gradient** er lys og mættet uden at summe, når to regler holder: hver farve ligger tæt på sin nabo på farvecirklen, og hvert trin skifter tydeligt i lyshed. Bryd den første, og midten bliver mudret; bryd den anden ved at placere modsatte farvetoner med samme lysstyrke side om side, og kanten ser ud til at flimre. De tolv koder nedenfor følger begge regler, så de er højlydte på den måde, en plakat er højlydt, ikke på den måde, en migræne er.

## Tolv koder til farvestærke gradienter

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Elektrisk violet: `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%)`
- Limesodavand: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Kirsebærpop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Gletsjer: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Lyserød på nat: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Glød: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Stigende kobolt: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Koral til guld, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Hver blanding bevæger sig gennem nabofarvetoner og bliver samtidig lysere eller mørkere, og det er det, der holder den ren. Den sidste er skrevet i oklch og kræver en nyere browser.

## Hvorfor nogle lyse gradienter flimrer

Sæt en mættet rød lige op ad en mættet blå med samme lysstyrke, og grænsen ser ud til at flakke, som om de to farver ikke kan bestemme sig for, hvem der står forrest. Designere kalder det kromatisk vibration. Det er stærkest ved hårde kanter, i tynde linjer og i farvet tekst, og det er grunden til, at rød skrift på blå baggrund er så trættende at læse. Farverne i sig selv er fine; det er kombinationen af modsat farvetone og samme lyshed, der rører hinanden, der skaber det.

- Flimrer: hård kant, samme lysstyrke: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Roligt: et mørkt trin imellem: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Samme rød og blå. Til venstre rører de hinanden med samme lysstyrke, og kanten flimrer; til højre adskiller et dybt trin dem, og begge farver ser stærkere ud.

Der er to løsninger. Enten holder du farverne adskilt med et mørkere eller lysere trin imellem, som til højre, eller også vælger du naboer i stedet for modsætninger. [Komplementærfarver](https://gradiently.design/da/guide/complementary-colors) forklarer, hvornår modsætninger er besværet værd.

## Regler for at lave din egen farvestærke gradient

| Regel | Hvorfor | Eksempel |
| --- | --- | --- |
| Hold dig inden for en tredjedel af cirklen | Naboer blandes uden at passere gennem gråt | Indigo, violet, magenta |
| Træd lysheden op | Giver dybde og forhindrer kanter i at summe | Dyb `#1d4ed8` op til lys `#38bdf8` |
| Brug én hovedfarve | Tre lige højlydte farver kæmper | Magenta topper; resten støtter den |
| Tilføj en bund | Et mørkt eller neutralt område lader øjet hvile | Lyserød på nat, Glød |
| Bland i oklch | Holder midtpunktet mættet, ikke mat | Koral til guld, oklch |

Fem regler bag hver kode ovenfor. Bryd en med vilje, aldrig ved et uheld.

Mudder er den anden måde, lyse gradienter fejler på. Bland to mættede modsætninger i almindelig sRGB, og farven halvvejs falder mod gråt, hvilket dækkes i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) og, på et mere teknisk plan, [interpolation i gradienter](https://gradiently.design/da/guide/gradient-interpolation). Mætning er i sig selv en drejeknap, ikke en kontakt; [mætning i design](https://gradiently.design/da/guide/color-saturation) viser, hvordan du indstiller den.

## Farvestærke gradienter i CSS

Moderne browsere kan blande i et perceptuelt farverum, når du tilføjer `in oklch` til gradienten. Det holder midten af en bred blanding lige så klar som enderne. Giv ældre browsere en hex-udgave 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 reserveudgave med tre stop og en oklch-udgave med to stop, der forbliver klar gennem midten uden et hjælpestop.

## Hvor farvestærke gradienter virker bedst

Farvestærk farve tjener opmærksomhed, så brug den der, hvor opmærksomhed er hele opgaven: et feed, der scrolles, en thumbnail blandt tyve andre, en plakat på den anden side af gaden. Den virker dårligere der, hvor folk skal læse længe, som dokumenter, dashboards og lange artikler, hvor en mættet flade trætter øjet inden for få afsnit. Der skal du holde den farvestærke gradient til et sidehoved eller en enkelt knap og lade en rolig flade bære resten.

| Brug | Prøv | Størrelse |
| --- | --- | --- |
| Opslag om udsalg eller lancering | Mango, Flamingo | 1080×1350 |
| YouTube-thumbnail | Elektrisk violet, Glød | 1280×720 |
| Hero til app eller produkt | Lagune, Gletsjer | 1920×1080 |
| Cover til story eller Reel | Limesodavand, Kirsebærpop | 1080×1920 |
| Playliste-cover | Lyserød på nat, Ultra | 1080×1080 |
| A4-eventplakat | Ultra, Stigende kobolt | 2480×3508 |

Seks steder, hvor farvestærke gradienter gør nytte, med koder fra oversigten ovenfor og størrelsen, du skal designe i.

Tryk er det ene sted, hvor du skal forvente et chok. De klareste skærmfarver, især elektrisk blå, knaldpink og syregrøn, ligger uden for det, CMYK-farver kan gengive, og kommer tydeligt matte tilbage på papir. [RGB eller CMYK](https://gradiently.design/da/guide/rgb-vs-cmyk) forklarer hvorfor; vælg selv lidt dybere udgaver, og bestil en prøve før et oplag.

## Ord på en farvestærk gradient

Mættede baggrunde svinger i lysstyrke fra den ene ende til den anden, så en enkelt tekstfarve, der kan læses i den mørke ende, kan forsvinde i den lyse. Brug kun hvid eller næsten sort, placer overskriften, hvor gradienten er dybest eller lysest, og tjek kontrasten på det værste punkt, ikke gennemsnittet. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har tallene, du skal sigte efter.

Et stående udsalgsopslag med fed skrift over en lys, mættet baggrund

En højlydt baggrund med enkel, tung skrift. Farven sælger; ordene skal bare kunne læses.

Det er her, en Gradiently Mark hjælper med lyse farver: den ved, hvor ordene er, gør farven dybere eller lysere nær bogstaverne, og Automatisk tekstfarve vælger lys eller mørk skrift per linje ud fra Markens egen palet. Et mættet udtryk forbliver læseligt i alle størrelser uden en boks eller skygge bag overskriften. Til neonlooks specifikt, se [neongradienter](https://gradiently.design/da/guide/neon-gradients); til den modsatte ende af skalaen, [diskrete gradienter](https://gradiently.design/da/guide/subtle-gradients).

## FAQ

### Hvad får en gradient til at se farvestærk ud?

Stærkt mættede farver, der ligger tæt på hinanden på farvecirklen, med en tydelig ændring i lyshed fra den ene ende til den anden.

### Hvorfor gør nogle lyse farvekombinationer ondt at se på?

Modsatte farvetoner med samme lyshed lagt kant mod kant ser ud til at flimre. Adskil dem med et mørkere eller lysere trin, eller vælg nabofarver.

### Hvordan undgår jeg, at en lys gradient bliver grå i midten?

Brug nabofarvetoner, tilføj et midterstop, eller bland i oklch med `linear-gradient(in oklch, ...)` i browsere, der understøtter det.

### Hvilken tekstfarve virker på en farvestærk gradient?

Hvid eller næsten sort. Tjek kontrasten på det lyseste og mørkeste punkt bag ordene, ikke kun i midten.

### Hvad er en god farvestærk gradient til et websites hero?

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