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

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.

Samme problem med en grå midte rammer alle modsatte farver, og mudrede gradienter 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.

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.

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, hvordan du snyder glansen frem.

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.

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.

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

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 har tærsklerne.

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, hvad den signalerer, og orange gradienter er dens naturlige nabo.