# Gul gradient: klara koder som inte blir gröna

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

Gult är den färg som oftast sviker en gradient: ett enda fel stopp och solsken blir lime, eller guld blir kaki. Så här händer det, och en uppsättning koder som förblir varma hela vägen.

## The short version

- En gul gradient blir grön när den blandas mot cyan, blågrönt eller blått, eftersom färgerna mellan gult och blått passerar genom grönt.
- Mörkt gult glider mot oliv och kaki, så fördjupa gult med bärnsten, orange eller brunt i stället för grått eller svart.
- Gult är som soligast när dess andra stopp lutar åt det varma hållet: gräddvitt, persika, orange, rosa eller guld.
- Vit text fungerar nästan aldrig på gult; nästan-svart eller djupbrunt läses mycket bättre.
- För att förena gult och blått i en blandning, lägg vitt, rosa eller violett mellan dem så att mittpunkten aldrig hamnar på grönt.

En **gul gradient** ser ljus och glad ut när varje stopp lutar varmt: gräddvitt, smör, citron, guld, orange. Den går fel på två förutsägbara sätt. Blanda den mot blått eller blågrönt och mitten blir grön; mörka den med grått och den blir olivfärgad. Håll nyansen på gultets varma sida, fördjupa med bärnsten i stället för svart, så förblir den solsken hela vägen. Koderna nedan bygger på den regeln.

## Varför gula gradienter blir gröna eller smutsiga

Gult ligger alldeles intill grönt i färghjulet, mycket närmare än de flesta tror. Det gör det ömtåligt i tre situationer.

- **Blandning mot kalla färger.** Mellan gult och cyan, blågrönt eller blått måste webbläsaren passera genom grönt. En blandning från solgult till himmelsblått får en lime- eller salviagrön rand i mitten.
- **Mörkning med svart eller grått.** Våra ögon läser ett mörkt, svagt mättat gult som oliv eller kaki snarare än ”mörkgult”. Det finns inget djupt gult som fortfarande ser gult ut.
- **Start från en citron som redan lutar åt grönt.** Syrliga citrongula toner som `#e4f04a` ser fräscha ut ensamma men drar varje angränsande stopp mot lime.

### Blir grönt eller olivfärgat

- Gult rakt in i himmelsblått eller blågrönt
- Gult som mörkats med grått eller svart
- En sval citron som ljusaste stopp
- Gult till grönt utan något varmt stopp

### Förblir soligt

- Gult in i gräddvitt, persika, orange eller rosa
- Gult som fördjupats med bärnsten och brunt
- Ett varmt gult som `#facc15` som ljusaste stopp
- Vitt eller rosa mellan gult och blått

Samma gråa mitt-problem drabbar alla motsatta färger, och [smutsiga gradienter](https://gradiently.design/sv/guide/muddy-gradients) tar upp det i allmänhet. Gult visar det bara först, eftersom grönt ligger så nära.

## Koder för klargul gradient

Det här är de högljudda: sommar, reabanderoller, barnvarumärken, festivaler, varningsskyltning gjord med smak. Varje kod parar gult med en varmare partner så att det finns rörelse utan att glida mot grönt.

- Citronsorbet: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Solros: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Gult till mandarin: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Rosa lemonad: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Middagssol: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Värmebölja: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Sex klargula gradienter. Varje partnerfärg är varmare än gult, och det är det som håller dem rena.

Klargult är tröttande i stora mängder, så använd de här på inlägg och banderoller snarare än på en hel webbplats. På en story i 1080×1920 ger en gul blandning som tonar till orange längst ner ögat en plats att landa på och håller den ljusaste delen nära rubrikytan högst upp.

## Ljusgula gradienter: smör och grädde

Bleka gula toner beter sig som varmt papper. De är utmärkta bakgrunder för menyer, inbjudningar, nyhetsbrev och allt med mycket läsning, eftersom mörk text ligger bekvämt på dem. Låt minst ett stopp ligga nära vitt så att gult läses som ljus, inte som en ton över allt.

- Gräddpapper: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Smör: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Vaniljkräm och persika: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Fönsterljus: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Mjuka gula toner för längre läsning och milda varumärken. De passar bra med text i kolgrått, brunt och djupgrönt.

## Gyllene och mörkgula gradienter utan oliv

För att göra gult rikt, mörka det inte. Skifta det. Flytta de djupare stoppen mot bärnsten, ockra och brunt, så blir gult guld, honung och senap i stället för kaki. För metalliska ytor särskilt visar [guldgradienter](https://gradiently.design/sv/guide/gold-gradient-design) hur du fejkar glansen.

- Honung: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Senap: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Borstat 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%)`

Varje djupt stopp rör sig mot bärnsten eller brunt. Resultatet läses som guld snarare än oliv.

> **Se upp med skuggfärgen** Om du skuggar ett gult föremål i en design med ett grått eller svart överlägg ser det olivfärgat ut. Skugga gult med en genomskinlig bärnsten eller brunt i stället.

## Gula och blå gradienter utan grön mitt

Gult och blått är ett klassiskt par, men en rak blandning mellan dem ger ett grönt band. Du har tre bra alternativ: lägg ett ljust stopp mellan dem, led blandningen genom rosa och violett, eller håll de två färgerna isär som ytor i stället för en blandning.

- Undvik: limegrön mitt: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Genom grädde: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Genom rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Gult ljus på marinblått: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Den första blandningen visar problemet. De andra tre förenar gult och blått utan att någonsin passera grönt.

I modern CSS kan du också be webbläsaren ta den långa vägen runt färghjulet. Att interpolera i OKLCH med `longer hue` skickar gult till blått genom orange, rosa och violett i stället för grönt. Stöd och syntax tas upp i [CSS-gradienter i OKLCH](https://gradiently.design/sv/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 långa vägen runt nyanshjulet undviker grönt. Behåll den handgjorda reservlösningen för webbläsare utan interpolering i färgrymd.

## Text på en gul gradient

Gult är den ljusaste mättade färgen som finns, så vit text försvinner på den. Vitt på `#facc15` mäter ungefär 1,5 till 1, medan ett djupt brunt som `#422006` mäter över 9 till 1 på samma gula. Använd mörk text nästan överallt och spara vitt till de djupaste guldtonerna. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har gränsvärdena.

| Bakgrund | Vit text | Brun text #422006 |
| --- | --- | --- |
| Citron `#fde047` | Misslyckas rejält | Cirka 11:1 |
| Solros `#facc15` | Cirka 1,5:1, misslyckas | Cirka 9,5:1 |
| Mörkt guld `#ca8a04` | Cirka 2,9:1, misslyckas | Godkänt |
| Ockra `#a16207` | Cirka 4,9:1, godkänt | Svagt |
| Brons `#854d0e` | Cirka 6,9:1, godkänt | Misslyckas |

Mätningar på platta färger. På en gradient, kontrollera den ljusaste delen bakom varje textrad.

Ett inlägg för en gårdsbutik med mörkbrun rubriktext på en varm gul och orange gradientbakgrund

Mörk, varm text på ett soligt gult. Den läses direkt och behåller den glada stämningen.

I Gradiently tar Auto-bläck det beslutet åt dig och väljer ljus eller mörk text för varje rad ur Markens egen palett, så en gul design behöver ingen manuell kontrastkontroll varje gång du ändrar storlek. Om gult är en del av din identitet tar [gul färgs betydelse](https://gradiently.design/sv/guide/yellow-color-meaning) upp vad det signalerar, och [orange gradienter](https://gradiently.design/sv/guide/orange-gradient) är dess naturliga granne.

## FAQ

### Varför ser min gula gradient grön ut?

Antingen blandas den mot en kall färg som blått eller blågrönt, eller så lutar själva gulan åt citron. Använd varmare partnerstopp som orange, rosa eller grädde.

### Hur gör jag en mörkgul gradient som inte är olivfärgad?

Fördjupa gult med bärnsten, ockra och brunt i stället för grått eller svart. Då blir det guld eller honung i stället för kaki.

### Vilken textfärg ska man ha på en gul bakgrund?

Nästan-svart, kolgrått eller djupbrunt. Vit text klarar inte kontrasten på nästan någon klargul.

### Hur blandar jag gult och blått i en gradient?

Lägg grädde, vitt eller rosa mellan dem, eller interpolera i OKLCH med `longer hue` så att blandningen går genom varma färger i stället för grönt.

### Vad är en bra CSS-kod för gul gradient?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` är ett pålitligt varmt gult som aldrig glider åt grönt.