# Gul gradient: klare koder, der ikke bliver grønne

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

Gul er den farve, der oftest forråder en gradient: ét forkert stop, og solskin bliver limegrønt, eller guld bliver kaki. Her er hvorfor, og et sæt koder, der forbliver varme hele vejen igennem.

## The short version

- En gul gradient bliver grøn, når den blandes mod cyan, petrol eller blå, fordi farverne mellem gul og blå går gennem grøn.
- Mørke gule glider mod oliven og kaki, så gør gul dybere med rav, orange eller brun i stedet for grå eller sort.
- Gul forbliver mest solrig, når dens andre stop læner sig varmt: creme, fersken, orange, pink eller guld.
- Hvid tekst virker næsten aldrig på gul; næsten sort eller en dyb brun læses langt bedre.
- For at forene gul og blå i én blanding sætter du hvid, pink eller violet imellem, så midten aldrig lander på grøn.

En **gul gradient** ser klar og glad ud, når hvert stop læner sig varmt: creme, smør, citron, guld, orange. Den går galt på to forudsigelige måder. Blandes den mod blå eller petrol, bliver midten grøn; gøres den mørkere med grå, bliver den oliven. Hold farvetonen på den varme side af gul, gør den dybere med rav frem for sort, så forbliver den solskin hele vejen. Koderne herunder er bygget på den regel.

## Hvorfor gule gradienter bliver grønne eller mudrede

Gul ligger lige ved siden af grøn i farvecirklen, langt tættere end de fleste forventer. Det gør den skrøbelig i tre situationer.

- **Blanding mod kølige farver.** Mellem gul og cyan, petrol eller blå må browseren gå gennem grøn. En blanding fra solrig gul til himmelblå får en limegrøn eller salviegrøn stribe i midten.
- **Mørkere med sort eller grå.** Vores øjne læser en mørk gul med lav mætning som oliven eller kaki frem for »mørkegul«. Der findes ingen dyb gul, der stadig ser gul ud.
- **Start fra en citron, der allerede læner sig mod grøn.** Syrlige citrongule som `#e4f04a` ser friske ud alene, men trækker hvert nabostop mod limegrøn.

### Bliver grøn eller oliven

- Gul direkte over i himmelblå eller petrol
- Gul gjort mørkere med grå eller sort
- En kølig citron som det lyseste stop
- Gul til grøn uden et varmt stop

### Forbliver solrig

- Gul over i creme, fersken, orange eller pink
- Gul gjort dybere med rav og brun
- En varm gul som `#facc15` som det lyseste stop
- Hvid eller pink placeret mellem gul og blå

Samme problem med en grå midte rammer alle modsatte farver, og [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) gennemgår det generelt. Gul viser det bare først, fordi grøn er så tæt på.

## Koder til klare gule gradienter

Det er de højlydte: sommer, udsalgsbannere, børnebrands, festivaler, advarselsskilte gjort pænt. Hver parrer gul med en varmere partner, så der er bevægelse uden at glide mod grøn.

- Citronsorbet: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Solsikke: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Gul til mandarin: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Pink lemonade: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Middagssol: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Hedebølge: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Seks klare gule gradienter. Hver partnerfarve er varmere end den gule, og det er det, der holder dem rene.

Klar gul er trættende i store mængder, så brug disse på opslag og bannere frem for en hel hjemmeside. På en story i 1080×1920 giver en gul blanding, der toner over i orange forneden, øjet et sted at lande og holder den klareste del tæt på overskriftsområdet øverst.

## Lysegule gradienter: smør og creme

Blege gule opfører sig som varmt papir. De er fremragende baggrunde til menukort, invitationer, nyhedsbreve og alt med meget læsning, fordi mørk tekst står behageligt på dem. Hold mindst ét stop tæt på hvid, så den gule læses som lys og ikke som en tone over det hele.

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

Bløde gule til lang læsning og milde brands. De passer godt til koksgrå, brun og dybgrøn tekst.

## Gyldne og mørkegule gradienter uden oliven

For at få gul til at føles fyldig skal du ikke gøre den mørkere. Flyt den. Ryk de dybere stop mod rav, okker og brun, så bliver gul til guld, honning og sennep i stedet for kaki. Specifikt til metalliske finish viser [guldgradienter](https://gradiently.design/da/guide/gold-gradient-design), hvordan du snyder glansen frem.

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

Hvert dybt stop bevæger sig mod rav eller brun. Resultatet læses som guld frem for oliven.

> **Hold øje med skyggefarven** Skygger du et gult objekt i et design med et gråt eller sort overlay, ser det oliven ud. Skyg i stedet gul med en gennemsigtig rav eller brun.

## Gule og blå gradienter uden den grønne midte

Gul og blå er en klassisk kombination, men en direkte blanding mellem dem giver et grønt bånd. Du har tre gode muligheder: sæt et lyst stop imellem, led blandingen gennem pink og violet, eller hold de to farver adskilt som flader frem for en blanding.

- Undgå: limegrøn midte: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Gennem creme: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Gennem pink: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Gult lys på marineblå: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Den første blanding viser problemet. De tre andre forener gul og blå uden nogensinde at gå gennem grøn.

I moderne CSS kan du også bede browseren tage den lange vej rundt om farvecirklen. Interpolerer du i OKLCH med `longer hue`, sendes gul til blå gennem orange, pink og violet i stedet for grøn. Understøttelse og syntaks gennemgås i [CSS-gradienter i OKLCH](https://gradiently.design/da/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 vej rundt om farvecirklen undgår grøn. Behold den håndlavede reserve til browsere uden interpolation i farverum.

## Tekst på en gul gradient

Gul er den lyseste mættede farve, der findes, så hvid tekst forsvinder på den. Hvid på `#facc15` måler omkring 1,5 til 1, mens en dyb brun som `#422006` måler over 9 til 1 på samme gul. Brug mørk tekst næsten overalt, og gem hvid til de dybeste guldtoner. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har tærsklerne.

| Baggrund | Hvid tekst | Brun tekst #422006 |
| --- | --- | --- |
| Citron `#fde047` | Dumper slemt | Omkring 11:1 |
| Solsikke `#facc15` | Omkring 1,5:1, dumper | Omkring 9,5:1 |
| Mørk guld `#ca8a04` | Omkring 2,9:1, dumper | Består |
| Okker `#a16207` | Omkring 4,9:1, består | Svag |
| Bronze `#854d0e` | Omkring 6,9:1, består | Dumper |

Målinger på ensfarvede flader. På en gradient tjekker du den lyseste del bag hver tekstlinje.

Et opslag fra en gårdbutik med mørkebrun overskrift på en varm gul og orange gradientbaggrund

Mørk, varm tekst på en solrig gul. Den læses med det samme og bevarer den muntre stemning.

I Gradiently træffer den automatiske tekstfarve det valg for dig ved at vælge lys eller mørk tekst til hver linje fra Markens egen palet, så et gult design ikke kræver et manuelt kontrasttjek, hver gang du ændrer størrelsen. Er gul en del af din identitet, gennemgår [gul farves betydning](https://gradiently.design/da/guide/yellow-color-meaning), hvad den signalerer, og [orange gradienter](https://gradiently.design/da/guide/orange-gradient) er dens naturlige nabo.

## FAQ

### Hvorfor ser min gule gradient grøn ud?

Enten blandes den mod en kølig farve som blå eller petrol, eller også læner den gule selv sig mod citron. Brug varmere partnerstop som orange, pink eller creme.

### Hvordan laver jeg en mørkegul gradient, der ikke er oliven?

Gør gul dybere med rav, okker og brun i stedet for grå eller sort. Så bliver den til guld eller honning frem for kaki.

### Hvilken tekstfarve passer på en gul baggrund?

Næsten sort, koksgrå eller dyb brun. Hvid tekst dumper i kontrast på næsten alle klare gule.

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

Sæt creme, hvid eller pink imellem, eller interpolér i OKLCH med `longer hue`, så blandingen går gennem varme farver i stedet for grøn.

### Hvad er en god CSS-kode til en gul gradient?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` er en pålidelig varm gul, der aldrig glider mod grøn.