# Gule gradienter: klare farger som ikke blir grønne

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

Gult er fargen som oftest skaper problemer i en gradient. Ett feil fargestopp gjør solskinn til lime eller gull til khaki. Her er forklaringen og et utvalg koder som holder seg varme hele veien.

## The short version

- En gul gradient blir grønn når den går mot cyan, blågrønt eller blått, fordi fargene mellom gult og blått går gjennom grønt.
- Mørke gulfarger trekker mot oliven og khaki. Gi derfor gult dybde med rav, oransje eller brunt i stedet for grått eller svart.
- Gult holder seg mest solfylt når de andre fargestoppene er varme: kremfarge, fersken, oransje, rosa eller gull.
- Hvit tekst fungerer nesten aldri på gult. Nesten svart eller dypbrunt er langt lettere å lese.
- For å kombinere gult og blått i én overgang legger du hvitt, rosa eller fiolett mellom dem, så midtpunktet aldri blir grønt.

En **gul gradient** virker lys og glad når alle fargestoppene er varme: kremfarge, smørgult, sitrongult, gull og oransje. Den kan gå galt på to forutsigbare måter. Lar du den gå mot blått eller blågrønt, blir midten grønn. Mørkner du den med grått, blir den olivenfarget. Hold fargetonen på den varme siden av gult og gi den dybde med rav i stedet for svart, så holder den seg solfylt hele veien. Kodene nedenfor bygger på denne regelen.

## Hvorfor gule gradienter blir grønne eller grumsete

Gult ligger rett ved siden av grønt i fargesirkelen, mye nærmere enn de fleste forventer. Det gjør fargen sårbar i tre situasjoner.

- **Overganger mot kalde farger.** Mellom gult og cyan, blågrønt eller blått må nettleseren gå gjennom grønt. En overgang fra solgult til himmelblått får en limegrønn eller salviegrønn stripe i midten.
- **Mørkning med svart eller grått.** Øynene våre oppfatter mørkt, lite mettet gult som oliven eller khaki. Det finnes ingen dyp gulfarge som fortsatt ser gul ut.
- **En sitrongul startfarge som allerede trekker mot grønt.** Syrlige sitronfarger som `#e4f04a` ser friske ut alene, men trekker alle nabostopp mot lime.

### Blir grønt eller olivenfarget

- Gult rett over i himmelblått eller blågrønt
- Gult mørknet med grått eller svart
- En kald sitrongul som det lyseste stoppet
- Gult til grønt uten et varmt stopp

### Holder seg solfylt

- Gult til kremfarge, fersken, oransje eller rosa
- Gult med dybde fra rav og brunt
- En varm gulfarge som `#facc15` som det lyseste stoppet
- Hvitt eller rosa mellom gult og blått

Det samme problemet med en grå midtdel rammer alle motstående farger. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer det generelt. Gult viser det bare først, fordi grønt ligger så nær.

## Koder for klare gule gradienter

Dette er de sterke variantene: sommer, salgsbannere, barnemerker, festivaler og pent utformede varselskilt. Alle kombinerer gult med en varmere farge, så det blir bevegelse uten grønnskjær.

- Sitronsorbet: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Solsikke: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Gult til mandarin: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Rosa limonade: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Middagssol: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Hetebølge: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Seks klare gule gradienter. Alle følgefargene er varmere enn gulfargen, og det holder overgangene rene.

Sterkt gult blir slitsomt i store mengder, så bruk disse på innlegg og bannere fremfor på et helt nettsted. I en Story på 1080×1920 gir en gul overgang som blir oransje nederst, øyet et sted å lande. Samtidig holdes det lyseste partiet nær overskriften øverst.

## Lysegule gradienter: smørgult og kremfarge

Bleke gulfarger oppfører seg som varmt papir. De er gode bakgrunner for menyer, invitasjoner, nyhetsbrev og annet med mye tekst, fordi mørk skrift er behagelig å lese på dem. Hold minst ett stopp nær hvitt, så gulfargen virker lys og ikke som et fargeslør over alt.

- Kremfarget papir: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Smørgul: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Vaniljekrem og fersken: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Lys fra vinduet: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Myke gulfarger for lange tekster og milde merkevareuttrykk. De passer godt med koksgrå, brun og dypgrønn skrift.

## Gylne og mørkegule gradienter uten olivenfarge

For å gi gult et rikt uttrykk må du endre fargetonen fremfor å mørkne den. Trekk de dypere stoppene mot rav, oker og brunt, så blir gult til gull, honning og sennep i stedet for khaki. [Gullgradienter](https://gradiently.design/nb/guide/gold-gradient-design) viser hvordan du etterligner glansen i metalliske overflater.

- Honning: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Sennep: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Børstet gull: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Gull på mørkt: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Alle dype stopp trekker mot rav eller brunt. Resultatet oppfattes som gull fremfor oliven.

> **Pass på skyggefargen** Legger du et grått eller svart lag over en gul gjenstand for å lage skygge, vil den se olivenfarget ut. Bruk et gjennomskinnelig ravfarget eller brunt lag i stedet.

## Gule og blå gradienter uten grønt i midten

Gult og blått er en klassisk kombinasjon, men en direkte overgang gir et grønt bånd. Du har tre gode alternativer: legg et lyst stopp mellom dem, la overgangen gå gjennom rosa og fiolett, eller hold de to fargene atskilt i egne områder.

- Unngå: limegrønn midtdel: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Gjennom kremfarge: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Gjennom rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Gult lys på marineblått: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Den første overgangen viser problemet. De tre andre kombinerer gult og blått uten å gå gjennom grønt.

I moderne CSS kan du også be nettleseren ta den lange veien rundt fargesirkelen. Interpolering i OKLCH med `longer hue` sender gult til blått gjennom oransje, rosa og fiolett i stedet for grønt. Støtte og syntaks forklares i [CSS-gradienter i OKLCH](https://gradiently.design/nb/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

Den lange veien rundt fargesirkelen unngår grønt. Behold den manuelt definerte reserveløsningen for nettlesere uten støtte for interpolering i fargerom.

## Tekst på en gul gradient

Gult er den lyseste mettede fargen som finnes, så hvit skrift forsvinner på den. Hvitt på `#facc15` gir omtrent 1,5 til 1, mens en dypbrun farge som `#422006` gir over 9 til 1 på samme gulfarge. Bruk mørk skrift nesten overalt, og spar hvitt til de dypeste gullfargene. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) har grenseverdiene.

| Bakgrunn | Hvit tekst | Brun tekst #422006 |
| --- | --- | --- |
| Sitrongul `#fde047` | Langt under kravet | Omtrent 11:1 |
| Solsikkegul `#facc15` | Omtrent 1,5:1, under kravet | Omtrent 9,5:1 |
| Mørkt gull `#ca8a04` | Omtrent 2,9:1, under kravet | Oppfyller kravet |
| Oker `#a16207` | Omtrent 4,9:1, oppfyller kravet | Svak |
| Bronse `#854d0e` | Omtrent 6,9:1, oppfyller kravet | Under kravet |

Målinger av ensfargede flater. På en gradient må du sjekke den lyseste delen bak hver tekstlinje.

Et gårdsbutikkinnlegg med dypbrun overskrift på en varm gul og oransje gradientbakgrunn

Mørk, varm skrift på solgult. Den er lett å lese med et blikk og beholder den muntre stemningen.

I Gradiently tar Auto-tekstfarge dette valget for deg. Den velger lys eller mørk skrift for hver linje fra Markens egen palett, så et gult design ikke trenger manuell kontrastsjekk hver gang du endrer størrelsen. Er gult en del av identiteten din, forklarer [hva gult betyr](https://gradiently.design/nb/guide/yellow-color-meaning) hva den signaliserer. [Oransje gradienter](https://gradiently.design/nb/guide/orange-gradient) er den naturlige naboen.

## FAQ

### Hvorfor ser den gule gradienten min grønn ut?

Enten går den mot en kald farge som blått eller blågrønt, eller gulfargen selv trekker mot sitrongult. Bruk varmere følgefarger som oransje, rosa eller kremfarge.

### Hvordan lager jeg en mørkegul gradient som ikke blir olivenfarget?

Gi gult dybde med rav, oker og brunt i stedet for grått eller svart. Da blir den gull- eller honningfarget fremfor khaki.

### Hvilken tekstfarge passer på en gul bakgrunn?

Nesten svart, koksgrått eller dypbrunt. Hvit tekst har for dårlig kontrast på nesten alle klare gulfarger.

### Hvordan blander jeg gult og blått i én gradient?

Legg kremfarge, hvitt eller rosa mellom dem, eller interpoler i OKLCH med `longer hue`, så overgangen går gjennom varme farger i stedet for grønt.

### Hva er en god CSS-kode for en gul gradient?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` er en pålitelig varm gulfarge som aldri blir grønnlig.