Gul gradient: klara koder som inte blir gröna

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.

Samma gråa mitt-problem drabbar alla motsatta färger, och smutsiga gradienter 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.

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.

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 hur du fejkar glansen.

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.

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.

.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);
  }
}

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 har gränsvärdena.

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 upp vad det signalerar, och orange gradienter är dess naturliga granne.