Monokrome gradienter: én fargetone, mange nyanser

En monokrom gradient blander én fargetone gjennom dens egne nyanser, fra dyp til lys, uten å hente inn en annen farge. Svart til hvitt gjennom grått er den reneste versjonen. Marineblått som stiger mot lyseblått, eller aubergine som lysner mot syrin, er også monokrome gradienter. De virker rolige og eksklusive fordi ingenting konkurrerer, og av samme grunn viser de alle feil: bånding, grumsete midtpartier og en fargetone som sklir underveis. Kodene og CSS-en under unngår alle tre.

Monokrom gradient eller monokromatisk fargeskjema

Begrepene er beslektet og blir ofte forvekslet. Et monokromatisk fargeskjema er en palett: flere lyse, dempede og mørke varianter av én fargetone brukt i et helt design. En monokrom gradient er én blanding innenfor denne ideen. Du kan bruke en monokrom gradient i et design der paletten slett ikke er monokromatisk, som en dypblå bakgrunn under oransje tekst.

Monokrome gradientkoder du kan kopiere

Hver av disse holder én fargetone og endrer bare lysheten og litt av metningen. De mørkere stoppene er litt mer mettede enn de lysere. Slik oppfører ekte farge seg i skygge, og derfor ser disse naturlige ut.

For den mørke enden av denne familien alene, se svarte gradienter og grå gradienter. Lyse, dempede og mørke nyanser er bakgrunnsstoff om hvordan trinnene henger sammen.

Slik lager du en monokrom gradient i CSS

Den enkleste måten å holde én fargetone på er å skrive stoppene i oklch og bare endre det første tallet, lysheten. Fargetonevinkelen står fast, så fargen kan ikke vandre. oklch fordeler lysheten jevnt, så blandingen stiger i et stabilt tempo. OKLCH forklart dekker formatet.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Velg fargetonen

   Velg én farge og finn fargetonevinkelen. Blått ligger rundt 260, grønt rundt 145 og rødt rundt 25.

2. 2

   Sett mørkeste og lyseste stopp

   Hold den mørke enden over rent svart og den lyse enden under rent hvitt hvis du ikke ønsker en hard kant. Lyshet fra 0,15 til 0,9 er et behagelig spenn.

3. 3

   Plasser midtstoppet bevisst

   Flytt det mot enden du vil skal dominere. Et midtstopp ved 30 prosent gir en hovedsakelig lys ramme; ved 70 prosent blir den hovedsakelig mørk. Fargestopp i gradienter viser mer.

4. 4

   Legg til korn

   Et svakt støylag over gradienten skjuler bånding og gir materialfølelse.

Hvorfor mørke monokrome gradienter får bånding

De fleste skjermer viser 256 nivåer per kanal. En gradient fra svart #000000 til mørkegrått #282828 har bare 40 tydelige trinn å bruke. Strekk den over et toppbilde som er 1920 piksler bredt, så blir hvert trinn en stripe på 48 piksler, som øyet lett ser i mørket. Flerfargede gradienter skjuler dette fordi kanalene endres på ulike tidspunkt. En monokrom gradient endrer alle tre samtidig, så båndene sammenfaller.

Bånding i gradienter og kornete gradienter forklarer løsningen i detalj, med kode for et SVG-støylag.

Hvor monokrome gradienter fungerer

Fordi de bruker én farge, lar monokrome gradienter typografi og foto lede. De passer lanseringer av luksusprodukter, arkitektstudioer, musikkutgivelser og alle merkevarer med én farge som identitet. Sett ordene i den lyseste eller mørkeste enden av samme fargetone, eller i hvitt eller svart, så designet fremstår som ett sikkert valg.

Hvis du trenger en aksent, hent den utenfor fargetonen og bruk den én gang: en enkelt oransje dato på en marineblå gradient eller en rød pris på grafitt. Gradienten forblir monokrom, og aksenten får all oppmerksomheten fordi ingenting annet konkurrerer.

En monokrom bakgrunn i Gradiently kan også bevege seg: en Mark gjengir lyset direkte, så en gradient med én farge kan gli langsomt bak ordene. Med Pro eksporteres den som en sømløs sløyfe i alle størrelser du designer.