Tofargede gradienter: 30 par som alltid fungerer

En tofarget gradient er en overgang fra én farge til en annen, og det er den tryggeste gradienten du kan lage: to farger er lette å velge, lette å omfarge og lette å holde enhetlige. Om et par fungerer, koker ned til to ting: hvor langt fra hverandre fargetonene ligger på fargehjulet, og hvor ulike de er i lyshet. Får du til de to, gir nesten hvilke som helst to farger en god gradient. Under kommer reglene, og så tretti par som følger dem.

Regel 1: følg med på avstanden mellom fargetonene

Fargetoneavstand er hvor langt fra hverandre to farger ligger på fargehjulet, målt i grader. Den forutsier hva som skjer i midten av overgangen, og det er der tofargede gradienter lykkes eller mislykkes.

Avstandene i første rad er analoge farger. Avstandene i siste rad er komplementærfarger, som ser slående ut side om side, men trenger hjelp når de blandes.

Regel 2: gi den en forskjell i lyshet

To farger med samme lyshet gir en gradient som føles flat, som om den ikke er på vei noe sted. En tydelig forskjell i lyshet gir overgangen retning, som lys som faller inn fra den ene siden. Det gir også en praktisk fordel: teksten kan stå i den mørke enden i hvitt, eller i den lyse enden i en mørk tekstfarge.

Par med nære fargetoner

Disse parene ligger innenfor omtrent 60 grader fra hverandre. De er umulige å gjøre grumsete og ser bra ut på nesten alt, fra knapper til bakgrunner i fullskjerm. Blåbær og Tidevann er for eksempel begge blått på vei mot fiolett, noe som leses som én farge som fanger lyset.

Par fra lyst til mørkt

Disse parene holder seg til én fargefamilie og endrer lysheten fra blek til dyp. De er de mest anvendelige tofargede gradientene: rolige nok til en hel side, og med en mørk ende som er klar for hvit tekst. De er også utmerkede merkevaregradienter, fordi de utvider én merkevarefarge i stedet for å legge til en ny. Se monokromatiske fargeskjemaer for teorien.

Kontrastpar som holder seg rene

Disse parene ligger lenger fra hverandre, mellom omtrent 90 og 150 grader, men hvert av dem har et lyst og klart midtpunkt når det blandes på standardmåten. Fersken og fiolett går gjennom lillarosa, cyan og magenta gjennom lavendelblå, oransje og magenta gjennom knallrosa. De har mer energi enn de nære parene og passer til lanseringer, musikk og alt som skal skille seg ut.

Flytte midtpunktet

Som standard er en tofarget gradient halvt om halvt. CSS lar deg flytte punktet der de to fargene er jevnt blandet, med et fargehint: en frittstående prosentverdi mellom stoppene. Skyv det mot den ene enden, så tar den andre fargen over mer av flaten, uten at du legger til en tredje farge.

/* Even blend: the mix point sits at 50% */
.even   { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }

/* Colour hint at 75%: blue holds on for most of the box */
.blue   { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }

Hvor teksten bør stå på en tofarget gradient

En tofarget gradient har et innebygd oppsett: den ene enden er lysere og den andre mørkere. Legg ordene i den enden som gir mest kontrast mot tekstfargen din, og la den andre enden bære fargen. For hvit tekst er det den mørke enden, for mørk tekst den lyse. Midtstill aldri liten tekst over midtpunktet i et par fra lyst til mørkt, for kontrasten endrer seg langs linjen. Tekst på gradient går gjennom kontrollene i detalj.

Gjør en tofarget gradient til din egen

Tofargede gradienter er populære nettopp fordi de er trygge, så de populære parene er overalt. For å gjøre en gjenkjennelig endrer du noe folk legger merke til uten å tenke over det: en brattere eller uvanlig vinkel (se gradientvinkler), et forskjøvet midtpunkt, et fint korn eller en tredje farge som bare brukes i den ene kanten. Når du er klar til å gå forbi to, er de 60 fargekombinasjonene for gradienter gruppert etter stemning.

Vet du allerede hvilke to farger du vil ha, kan du skrive dem inn i søket i Markedet, for eksempel «blå og fiolett», og designe med Marks som er bygget rundt dem.