# Livfulla gradienter: mättade koder som inte vibrerar

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

Mättad färg är det snabbaste sättet att bli sedd och det snabbaste sättet att få ögonen att värka. De här koderna är starka med flit och byggda så att kanterna aldrig flimrar, med skälen, så att du kan göra dina egna.

## The short version

- En livfull gradient använder starkt mättade färger, men den förblir behaglig att titta på bara när grannfärger ligger nära i kulör och skiljer sig tydligt i ljushet.
- Färger med motsatt kulör och liknande ljushet som läggs kant mot kant verkar flimra, en effekt som ofta kallas kromatisk vibration.
- Mättade motsatser som blandas direkt i sRGB går genom en gråaktig mitt, vilket interpolering i oklch till stor del undviker.
- En mörk eller neutral botten ger ögat någonstans att vila och får livfull färg att se starkare ut än på vitt.
- Text över en livfull gradient läses bäst i nästan svart eller vitt, aldrig i en annan mättad färg med liknande ljushet.

En **livfull gradient** är stark och mättad utan att vibrera när två regler håller: varje färg ligger nära sin granne på färghjulet, och varje steg ändras tydligt i ljushet. Bryt den första och mitten blir lerig; bryt den andra, genom att lägga motsatta kulörer med lika ljushet sida vid sida, och kanten verkar flimra. De tolv koderna nedan följer båda reglerna, så de är högljudda som en affisch är högljudd, inte som en migrän.

## Tolv koder för livfulla gradienter

- Mango: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Elektrisk violett: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagun: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamingo: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Limeläsk: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Körsbärspop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Glaciär: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rosa på natt: `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%)`
- Koboltstigning: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Korall till guld, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Varje blandning rör sig genom grannkulörer medan den blir ljusare eller mörkare, vilket är det som håller den ren. Den sista är skriven i oklch och kräver en aktuell webbläsare.

## Därför vibrerar vissa starka gradienter

Lägg ett mättat rött direkt mot ett mättat blått med liknande ljushet och gränsen verkar flimra, som om de två färgerna inte kan bestämma vilken som är främst. Formgivare kallar det kromatisk vibration. Den är starkast vid hårda kanter, i fina linjer och i färgad text, och det är därför röd text på blå bakgrund är så tröttande att läsa. Färgerna i sig är fina; det är kombinationen av motsatt kulör och lika ljushet, i kontakt, som orsakar det.

- Vibrerar: hård kant, lika ljushet: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Lugn: ett mörkt steg emellan: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Samma röda och blå. Till vänster möts de med samma ljushet och kanten flimrar; till höger skiljer ett djupt steg dem åt och båda färgerna ser starkare ut.

Det finns två lösningar. Antingen håller du färgerna isär med ett mörkare eller ljusare steg mellan dem, som till höger, eller så väljer du grannar i stället för motsatser. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar när motsatser är värda besväret.

## Regler för att göra din egen livfulla gradient

| Regel | Varför | Exempel |
| --- | --- | --- |
| Håll dig inom en tredjedel av hjulet | Grannar blandas utan att gå genom grått | Indigo, violett, magenta |
| Stega ljusheten | Ger djup och hindrar kanter från att surra | Djup `#1d4ed8` upp till klar `#38bdf8` |
| Använd en hjältefärg | Tre lika högljudda färger bråkar | Magenta toppar; resten stödjer den |
| Lägg till en botten | En mörk eller neutral yta låter ögat vila | Rosa på natt, glöd |
| Blanda i oklch | Håller mittpunkten mättad, inte matt | Korall till guld, oklch |

Fem regler bakom varje kod ovan. Bryt en med avsikt, aldrig av misstag.

Lera är det andra sättet starka gradienter misslyckas. Blanda två mättade motsatser i vanlig sRGB och mittfärgen sjunker mot grått, vilket tas upp i [leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) och, på en mer teknisk nivå, [gradientinterpolering](https://gradiently.design/sv/guide/gradient-interpolation). Mättnad är i sig en ratt, inte en strömbrytare; [mättnad i design](https://gradiently.design/sv/guide/color-saturation) visar hur du ställer in den.

## Livfulla gradienter i CSS

Moderna webbläsare kan blanda i ett perceptuellt färgrum genom att du lägger till `in oklch` i gradienten. Det håller mitten av en bred blandning lika levande som ändarna. Ge äldre webbläsare en hexversion 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 reserv med tre stopp, och en oklch-version med två stopp som förblir levande genom mitten utan ett hjälpstopp.

## Där livfulla gradienter fungerar bäst

Livfull färg förtjänar uppmärksamhet, så lägg den där uppmärksamhet är hela jobbet: ett scrollande flöde, en miniatyr bland tjugo andra, en affisch tvärs över en gata. Den fungerar sämre där folk behöver läsa länge, som dokument, instrumentpaneler och långa artiklar, där en mättad yta tröttar ögat inom några stycken. Där håller du den livfulla gradienten till en rubrik eller en enda knapp och låter en lugn yta bära resten.

| Användning | Prova | Storlek |
| --- | --- | --- |
| Rea- eller lanseringsinlägg | Mango, Flamingo | 1080×1350 |
| YouTube-miniatyr | Elektrisk violett, Glöd | 1280×720 |
| Hero för app eller produkt | Lagun, Glaciär | 1920×1080 |
| Omslag för story eller Reel | Limeläsk, Körsbärspop | 1080×1920 |
| Omslag för spellista | Rosa på natt, Ultra | 1080×1080 |
| A4-affisch för event | Ultra, Koboltstigning | 2480×3508 |

Sex ställen där livfulla gradienter drar sitt strå till stacken, med koder från rutnätet ovan och storleken att designa i.

Tryck är det enda stället att vänta sig en chock. De klaraste skärmfärgerna, särskilt elektriskt blått, knallrosa och syragrönt, ligger utanför vad CMYK-färger kan återge och kommer tillbaka märkbart matta på papper. [RGB eller CMYK](https://gradiently.design/sv/guide/rgb-vs-cmyk) förklarar varför; välj lite djupare varianter själv och beställ ett korrektur före en tryckning.

## Ord på en livfull gradient

Mättade bakgrunder svänger i ljushet från den ena änden till den andra, så en enda textfärg som läses i den mörka änden kan försvinna i den ljusa. Använd bara vitt eller nästan svart, sätt rubriken där gradienten är som djupast eller blekast och kontrollera kontrasten vid den sämsta punkten, inte genomsnittet. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har siffrorna att sikta på.

Ett stående reainlägg med fet text över en klar, mättad bakgrund

En högljudd bakgrund med enkel, tung text. Färgen säljer; orden behöver bara vara läsbara.

Det är här en Mark i Gradiently hjälper till med stark färg: den vet var orden är, fördjupar eller lyfter färgen nära bokstäverna, och Auto-bläck väljer ljus eller mörk text per rad ur sin egen palett. En mättad look förblir läsbar i varje storlek utan ruta eller skugga bakom rubriken. För neonlooks specifikt, se [neongradienter](https://gradiently.design/sv/guide/neon-gradients); för den motsatta änden av ratten, [subtila gradienter](https://gradiently.design/sv/guide/subtle-gradients).

## FAQ

### Vad får en gradient att se livfull ut?

Starkt mättade färger som ligger nära varandra på färghjulet, med en tydlig förändring i ljushet från den ena änden till den andra.

### Varför gör vissa starka färgkombinationer ont att titta på?

Motsatta kulörer med liknande ljushet som läggs kant mot kant verkar flimra. Skilj dem åt med ett mörkare eller ljusare steg, eller välj grannfärger.

### Hur hindrar jag en stark gradient från att bli grå i mitten?

Använd grannkulörer, lägg till ett mittstopp eller blanda i oklch med `linear-gradient(in oklch, ...)` i webbläsare som stöder det.

### Vilken textfärg fungerar på en livfull gradient?

Vitt eller nästan svart. Kontrollera kontrasten vid den ljusaste och mörkaste punkten bakom orden, inte bara i mitten.

### Vilken är en bra livfull gradient för en hero på en webbplats?

Prova `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` med vit text.