Gule gradienter: klare farger som ikke blir grønne

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.

Det samme problemet med en grå midtdel rammer alle motstående farger. Grumsete gradienter 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.

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.

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 viser hvordan du etterligner glansen i metalliske overflater.

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.

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.

.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

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 har grenseverdiene.

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 hva den signaliserer. Oransje gradienter er den naturlige naboen.