Fargesterke gradienter: mettede farger uten flimring

En fargesterk gradient er lys og mettet uten flimring når to regler følges: Hver farge ligger nær naboen på fargesirkelen, og hvert steg gir en tydelig endring i lyshet. Bryt den første, og midten blir grumsete. Bryt den andre ved å sette motsatte fargetoner med lik lyshet ved siden av hverandre, og kanten ser ut til å flimre. De tolv fargekodene nedenfor følger begge reglene, så de roper høyt slik en plakat gjør, ikke slik en migrene gjør.

Tolv fargekoder for fargesterke gradienter

Hvorfor noen lyse gradienter flimrer

Sett en mettet rødfarge rett mot en mettet blåfarge med lik lyshet, og grensen ser ut til å flimre, som om fargene ikke kan bestemme seg for hvilken som ligger foran. Designere kaller det kromatisk vibrasjon. Effekten er sterkest ved skarpe kanter, i tynne linjer og i farget tekst. Derfor er rød tekst på blå bakgrunn så slitsom å lese. Fargene i seg selv er fine. Det er kombinasjonen av motsatte fargetoner med lik lyshet som berører hverandre, som skaper effekten.

Det finnes to løsninger. Hold enten fargene fra hverandre med et mørkere eller lysere steg mellom dem, som til høyre, eller velg nabofarger fremfor motsetninger. Komplementærfarger forklarer når motsetningene er verdt bryet.

Regler for din egen fargesterke gradient

Grumsete farger er den andre måten lyse gradienter kan mislykkes på. Bland to mettede motsetninger i vanlig sRGB, og fargen halvveis går mot grått. Det forklares i grumsete gradienter og mer teknisk i gradientinterpolering. Metning er en glidende skala, ikke en bryter. Metning i design viser hvordan du justerer den.

Fargesterke gradienter i CSS

Moderne nettlesere kan blande i et perseptuelt fargerom ved å legge til in oklch i gradienten. Det holder midten av en bred blanding like levende som endene. Gi eldre nettlesere en hex-versjon først.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Hvor fargesterke gradienter fungerer best

Sterke farger får oppmerksomhet, så bruk dem der oppmerksomhet er hele poenget: i en strøm man blar gjennom, et miniatyrbilde blant tjue andre eller en plakat på andre siden av gata. De fungerer dårligere der folk skal lese lenge, som i dokumenter, dashbord og lange artikler, der en mettet flate sliter ut øyet etter noen avsnitt. Hold da den fargesterke gradienten til en toppseksjon eller én knapp, og la en rolig flate bære resten.

Trykk er stedet der du må regne med en overraskelse. De lyseste skjermfargene, særlig elektrisk blått, knallrosa og syregrønt, ligger utenfor det CMYK-blekk kan gjengi og blir merkbart blassere på papir. RGB mot CMYK forklarer hvorfor. Velg litt dypere versjoner selv, og bestill et prøvetrykk før hele opplaget.

Ord på en fargesterk gradient

Mettede bakgrunner varierer i lyshet fra den ene enden til den andre. En tekstfarge som er lesbar i den mørke enden, kan derfor forsvinne i den lyse. Bruk bare hvitt eller nesten svart, sett overskriften der gradienten er dypest eller lysest, og sjekk kontrasten på det svakeste punktet, ikke gjennomsnittet. Fargekontrast og tilgjengelighet har tallene du bør sikte mot.

Her hjelper en Gradiently Mark med sterke farger: Den vet hvor ordene er, gjør fargen nær bokstavene mørkere eller lysere, og Auto-tekstfarge velger lys eller mørk skrift for hver linje fra Markens egen palett. En mettet stil forblir lesbar i alle størrelser uten en boks eller skygge bak overskriften. Se neongradienter for neonstiler, og diskrete gradienter for den andre enden av skalaen.