Diskrete gradienter: rolige fargeskift i rene grensesnitt

En diskret gradient går mellom to så nærliggende farger at du føler endringen mer enn du ser den: hvitt til kjølig brukket hvitt, nesten svart til litt mykere nesten svart. Dette lille skiftet får flaten til å virke belyst. Derfor brukes de i rene grensesnitt på sidebakgrunner, kort og mørke paneler. Kodene under holder lyshetsforskjellen til noen få prosent. Mer enn det gjør gradienten til et blikkfang fremfor en overflate.

Koder til lyse, diskrete gradienter

Alle begynner nær hvitt og går mot en svak fargetone. Hent tonen fra merkevarefargen så også bakgrunnen har et spor av identitet. Overganger ovenfra og ned virker mest naturlige, siden lys vanligvis kommer ovenfra.

Koder til mørke, diskrete gradienter

Mørke flater har enda større nytte, fordi rent, flatt svart ligner et hull i skjermen. Lysne toppen litt og la bunnen falle til ro. Gradienter i mørkt tema dekker hele temaer. Dette er byggeklossene.

Der diskrete gradienter fungerer i grensesnitt

Tommelfingerregelen: en diskret gradient skal aldri være det du ser på. Kommenterer en vurderer gradienten, er den for sterk som bakgrunn. For beherskede uttrykk på trykk, sosiale medier og skjerm, se minimalistiske bakgrunner.

Gi en diskret gradient merkevarens fargetone

En nøytral grå gradient er trygg, men anonym. Et hint av merkevarens tone i den lyse eller mørke enden knytter hele grensesnittet til logoen uten at noen kan peke på hvorfor. Grepet er å beholde fargetonen og fjerne nesten all metning.

1. 1

   Hent merkevarens fargetone

   Konverter hovedfargen til oklch eller HSL og noter bare fargetonen: rundt 265 til fiolett, 160 til grønt eller 30 til varm oransje.

2. 2

   Hold den nesten grå

   Sett kroma svært lavt, rundt 0,005 til 0,015 i oklch, eller metning under omtrent 30% i HSL med svært høy lyshet. Du vil ha et hvisk av farge, ikke pastell.

3. 3

   Velg to lyshetsverdier

   Til lyse temaer, prøv 99% og 96%. Til mørke, rundt 20% og 15%. Hold begge ender på samme fargetone, så overgangen ikke driver mot grått eller en annen farge.

4. 4

   Sjekk ved siden av rent hvitt eller svart

   Legg gradienten ved en hvit eller svart flate. Ser du ingen forskjell, juster nedre ende litt. Er tonen tydelig fra andre siden av rommet, senk kroma.

Samme tone kan føres videre til kanter, skillelinjer og svevetilstander. Da er gradienten del av et rolig system fremfor en enkeltstående effekt. Knapper er stedet du kan tillate litt sterkere skift, noen prosent mørkere nederst, fordi et hint av volum gjør dem lettere å oppfatte som trykkbare.

Skriv en diskret gradient i CSS

Hekskoder fungerer overalt. For finere kontroll kan du skrive fargene i oklch, der første tall er opplevd lyshet. Da setter du skiftet nøyaktig, for eksempel fra 99% til 96%. Blanding i oklch holder også endringen jevn gjennom hele lengden. CSS-gradient i oklch forklarer syntaksen, og lineær CSS-gradient dekker grunnlaget.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Derfor får diskrete gradienter bånd, og løsningen

To nærliggende farger har svært få trinn mellom seg i et 8-bitsbilde. Strekk dem over en hero på 1920 piksler, så blir hvert trinn en synlig stripe, særlig i mørke gradienter og på rimeligere skjermer. Hele forklaringen finnes i bånd i gradienter.

På nett fjerner en liten SVG-støytekstur over gradienten med lav ugjennomsiktighet synlige trinn uten at kornene merkes. Støytekstur i CSS har koden. Til sosiale innlegg og lysbilder har en Mark fra Gradiently egne korn og gjengis i alle størrelser, så en rolig bakgrunn holder seg jevn som story og banner. Når du vil ha det motsatte av ro, har sterke gradienter de mettede kodene.