60 fargekombinasjoner for gradienter som fungerer, med koder

De beste fargekombinasjonene for gradienter følger én av to regler: de bruker fargetoner som ligger ved siden av hverandre på fargesirkelen, så overgangen holder seg ren, eller de slår bro mellom fjerne fargetoner med en valgt mellomfarge, så den aldri blir grå. Nedenfor er 60 kombinasjoner som følger de reglene, gruppert etter stemning: rolig, dristig, varm, kjølig, mørk og pastell. Kopier en hvilken som helst prøve som CSS, og les notatet under hver gruppe for å se hvorfor de fungerer, så du kan lage dine egne.

Alt her er ren CSS med hex-farger, så det fungerer i enhver nettleser, og de samme kodene kan skrives inn i ethvert designverktøy. Er et begrep nytt, forklarer hva en gradient er stopp og vinkler.

Rolige gradientkombinasjoner

Rolige gradienter holder fargene tett sammen i både fargetone og lyshet. Ingenting hopper, så øyet hviler. De gir gode bakgrunner for lesing, velværemerker, porteføljer og alt som skal føles stille. Salvie og stein, for eksempel, flytter seg bare et lite stykke rundt sirkelen og mister litt lyshet underveis, noe som leses som skygge på en vegg og ikke som en fargeeffekt.

Dristige gradientkombinasjoner

Dristige gradienter bruker mettede farger og større avstand rundt sirkelen. De fanger oppmerksomheten i en full feed, på et salgsbanner eller en lanseringsside. Trikset er å velge par der den rette overgangen holder seg lysende. Magenta til rav går gjennom korall; kobolt til korall går gjennom lilla. Ingen av dem kommer i nærheten av grått, og derfor ser de livlige ut hele veien.

Varme gradientkombinasjoner

Varme gradienter lever mellom rødt og gult og føles solfylte, appetittvekkende og menneskelige. De passer til mat, servering, livsstil og alt som er personlig. De fleste av disse har en mørkere, rødere ende så overgangen får tyngde: Gyllen time går fra blek honning til brent rav slik sent lys beveger seg nedover en vegg. Temperaturens psykologi finner du i varme og kalde farger.

Kjølige gradientkombinasjoner

Kjølige gradienter ligger mellom grønt og fiolett og føles rene, rolige og presise. De er det naturlige hjemmet for teknologi, helse, finans og vann. Blått er ankeret i de fleste av dem, og derfor virker de tillitvekkende, og derfor trenger en kjølig gradient en særpreget detalj, som en fiolett ende eller et skifte mot blågrønt, for ikke å ligne enhver bank. Flere blåtoner er samlet i blå gradienter.

Mørke gradientkombinasjoner

Mørke gradienter er nesten svarte bunner med én opplyst farge som stiger opp av dem. De føles eksklusive, nattlige og filmatiske, og de får hvit skrift til å se skarp ut. Hold den mørke enden litt farget i stedet for ren svart, så overgangen har noe å bevege seg gjennom. Mørke overganger får lett banding, så legg til korn før du publiserer; se mørke gradientbakgrunner.

Pastellgradienter i kombinasjon

Pasteller er bleke farger med høy lyshet og litt metning. De føles friske, myke og vennlige, og de passer til skjønnhet, baby, papirvarer og vårkampanjer. Fordi alle er så lyse, kan selv fjerne pastelltoner blande seg til en hvitaktig grå, så de to siste her går via en blek lilla. Sett tekst på pasteller i mørkt blekk, ikke i hvitt. Mer finner du i pastellgradienter.

Slik bruker du disse gradientkodene

Hver kode er en komplett CSS-verdi for background. Lim den inn på et hvilket som helst element, eller les hex-fargene og stopposisjonene inn i et designverktøy. På nettet setter du først en ensfarget reservefarge, hentet fra det mørkeste eller viktigste stoppet.

.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}

Slik lager du din egen kombinasjon

1. 1

   Velg stemningen først

   Bestem rolig eller dristig, varm eller kjølig, mørk eller lys før noen farge. Det snevrer valgene inn til én av gruppene over.

2. 2

   Velg en ankerfarge

   Som regel merkevarefargen din eller fargen på det du selger. Se hvordan du velger merkevarefarger.

3. 3

   Legg til en nabo

   Flytt deg 30 til 60 grader rundt fargesirkelen for en ren andrefarge. Endre lysheten litt også, for dybde.

4. 4

   Slå bro over alt som er fjernt

   Vil du ha en fjern fargetone, legger du en lysende mellomfarge mellom dem, så overgangen ikke blir grå. Se grumsete gradienter.

5. 5

   Gjør den til din

   Endre vinkelen, flytt et stopp bort fra 50 %, legg til en tredje farge eller et lag med korn. Små endringer er det som hindrer en kombinasjon i å se ut som en forhåndsinnstilling.

En populær kode er en god start, men tusenvis av andre design starter også der. Vil du ha en gradientidentitet ingen andre har, kan du matche et bilde du elsker med paletten og de nærmeste Marks, eller lage nye som ligner.