Monokroma gradienter: en kulör, många toner

En monokrom gradient blandar en kulör genom sina egna nyanser, från djup till ljus, utan att ta in en andra färg. Svart till vitt genom grått är den renaste versionen; en marinblå som stiger mot blekblått, eller en aubergine som lyfter mot lila, är också monokroma gradienter. De ser lugna och dyra ut eftersom inget konkurrerar, och av samma skäl visar de varje brist: bandning, grumliga mittpunkter och en kulör som glider halvvägs. Koderna och CSS:en nedan undviker alla tre.

Monokrom gradient eller monokromatiskt färgschema

De två begreppen hänger ihop och blandas ofta ihop. Ett monokromatiskt färgschema är en palett: flera nyanser, toner och skuggor av en kulör som används genom hela en design. En monokrom gradient är en enda gradient inom den idén. Du kan använda en monokrom gradient i en design vars palett inte alls är monokromatisk, som en djupblå bakgrund under orange text.

Koder för monokroma gradienter att kopiera

Var och en av dessa behåller en enda kulör och ändrar bara ljusheten och lite av mättnaden. Mörkare stopp är något mer mättade än ljusare, vilket är hur verklig färg beter sig i skugga och därför ser de naturliga ut.

För den mörka änden av den här familjen för sig, se svarta gradienter och grå gradienter. För hur stegen förhåller sig till varandra är nyanser, toner och skuggor bakgrundsläsningen.

Så gör du en monokrom gradient i CSS

Det enklaste sättet att hålla en kulör är att skriva stoppen i oklch och bara ändra det första talet, ljusheten. Kulörvinkeln förblir fast, så färgen kan inte vandra, och oklch fördelar ljusheten jämnt, så gradienten stiger i jämn takt. OKLCH förklarat går igenom 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älj kulören

   Välj en färg och ta reda på dess kulörvinkel. Ett blått ligger runt 260, ett grönt runt 145, ett rött runt 25.

2. 2

   Sätt det mörkaste och ljusaste stoppet

   Håll den mörka änden över rent svart och den ljusa änden under rent vitt om du inte vill ha en hård kant. Ljushet från 0,15 till 0,9 är ett bekvämt spann.

3. 3

   Placera mittstoppet med avsikt

   Flytta det mot den ände du vill ska dominera. Ett mittstopp vid 30 procent ger en mestadels ljus bild; vid 70 procent, mestadels mörk. Färgstopp i gradienter visar mer.

4. 4

   Lägg till korn

   Ett svagt brusskikt över gradienten döljer bandning och ger en materialkänsla.

Därför bandar mörka monokroma gradienter

De flesta skärmar visar 256 nivåer per kanal. En gradient från svart #000000 till mörkgrått #282828 har bara 40 skilda steg att arbeta med. Sträck den över en hero på 1920 pixlars bredd och varje steg blir en rand på 48 pixlar, som ögat lätt urskiljer i mörkret. Flerfärgade gradienter döljer detta eftersom kanalerna ändras vid olika tillfällen; en monokrom gradient ändrar alla tre tillsammans, så banden hamnar på rad.

Bandning i gradienter och korniga gradienter går in på lösningen i detalj, med kod för ett SVG-brusskikt.

Där monokroma gradienter fungerar

Eftersom de bär en färg låter monokroma gradienter text och fotografi leda. De passar lyxiga produktlanseringar, arkitektbyråer, musiksläpp och varje varumärke vars identitet är en enda färg. Sätt orden i den ljusaste eller mörkaste änden av samma kulör, eller i vitt eller svart, så läses designen som ett enda självsäkert beslut.

Behöver du en accent, hämta den utanför kulören och använd den en gång: ett enda orange datum på en marinblå gradient, eller ett rött pris på grafit. Gradienten förblir monokrom, och accenten får all uppmärksamhet eftersom inget annat konkurrerar om den.

En monokrom bakgrund i Gradiently kan också röra sig: en Mark renderar sitt ljus live, så en enfärgad gradient kan driva långsamt bakom orden, och med Pro exporteras den som en sömlös loop i varje storlek du designar.