Monokrome gradienter: én nuance, mange toner

En monokrom gradient blander én nuance gennem dens egne toner, fra dyb til lys, uden at hente en anden farve ind. Sort til hvid gennem grå er den reneste version; en marineblå, der stiger op i lyseblå, eller en aubergine, der løfter sig til syren, er også monokrome gradienter. De ser rolige og dyre ud, fordi intet konkurrerer, og af samme grund viser de hver eneste fejl: banding, mudrede midtpunkter og en nuance, der glider halvvejs. Koderne og CSS’en nedenfor undgår alle tre.

Monokrom gradient vs. monokromt farveskema

De to begreber hænger sammen og forveksles ofte. Et monokromt farveskema er en palet: flere lyse, dæmpede og mørke toner af én nuance brugt i et helt design. En monokrom gradient er én enkelt blanding inden for den idé. Du kan bruge en monokrom gradient i et design, hvis palet slet ikke er monokrom, for eksempel en dyb blå baggrund under orange tekst.

Monokrome gradientkoder til at kopiere

Hver af disse holder sig til én nuance og ændrer kun lysheden og en smule af mætningen. Mørkere farvestop er lidt mere mættede end lysere, sådan som rigtig farve opfører sig i skygge, og derfor ser de naturlige ud.

Den mørke ende af familien for sig selv finder du i sorte gradienter og grå gradienter. Hvordan trinene hænger sammen, kan du læse om i lyse, dæmpede og mørke toner.

Sådan laver du en monokrom gradient i CSS

Den enkleste måde at holde én nuance på er at skrive farvestoppene i oklch og kun ændre det første tal, lysheden. Nuancevinklen ligger fast, så farven kan ikke vandre, og oklch fordeler lysheden jævnt, så blandingen stiger i et roligt tempo. OKLCH forklaret gennemgår 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

   Vælg nuancen

   Vælg én farve, og find dens nuancevinkel. En blå ligger omkring 260, en grøn omkring 145, en rød omkring 25.

2. 2

   Sæt det mørkeste og lyseste farvestop

   Hold den mørke ende over ren sort og den lyse ende under ren hvid, medmindre du vil have en skarp kant. En lyshed fra 0,15 til 0,9 er et behageligt spænd.

3. 3

   Placér det midterste farvestop med vilje

   Flyt det mod den ende, der skal dominere. Et midterstop ved 30 procent giver et overvejende lyst billede; ved 70 procent et overvejende mørkt. Farvestop i gradienter viser mere.

4. 4

   Tilføj korn

   Et svagt lag støj over gradienten skjuler banding og giver et præg af materiale.

Hvorfor mørke monokrome gradienter får banding

De fleste skærme viser 256 niveauer pr. kanal. En gradient fra sort #000000 til mørkegrå #282828 har kun 40 forskellige trin at arbejde med. Stræk den over en hero på 1920 pixels i bredden, og hvert trin bliver en stribe på 48 pixels, som øjet let opfanger i mørket. Flerfarvede gradienter skjuler det, fordi kanalerne skifter på forskellige tidspunkter; en monokrom gradient ændrer alle tre på én gang, så striberne flugter.

Banding i gradienter og kornede gradienter går i dybden med løsningen, med kode til et SVG-lag med støj.

Hvor monokrome gradienter virker

Fordi de kun bærer én farve, lader monokrome gradienter skrift og fotografi føre an. De passer til lanceringer af luksusprodukter, arkitektstudier, musikudgivelser og ethvert brand, hvis identitet er én farve. Sæt ordene i den lyseste eller mørkeste ende af samme nuance eller i hvid eller sort, så læses designet som én selvsikker beslutning.

Har du brug for en accent, så tag den uden for nuancen, og brug den én gang: en enkelt orange dato på en marineblå gradient eller en rød pris på grafit. Gradienten forbliver monokrom, og accenten får al opmærksomheden, fordi intet andet konkurrerer om den.

En monokrom baggrund i Gradiently kan også bevæge sig: En Mark gengiver sit lys live, så en gradient i én farve kan drive langsomt bag ordene, og med Pro eksporteres den som et sømløst loop i alle de størrelser, du designer.