Diskrete gradienter: stille farveskift til rene brugerflader

En diskret gradient bevæger sig mellem to farver, der ligger så tæt, at du mærker skiftet mere, end du ser det: hvid til en kølig råhvid, næsten sort til en lidt blødere næsten sort. Det lille skift får en flade til at se belyst ud, og derfor bruger rene brugerflader dem på sidebaggrunde, kort og paneler i mørk tilstand. Koderne nedenfor holder forskellen i lyshed på få procent; bliver den større, begynder gradienten at blive et element frem for en flade.

Koder til lyse diskrete gradienter

Hver af disse starter tæt på hvid og driver mod en svag nuance. Vælg nuancen ud fra din brandfarve, så selv baggrunden bærer et spor af identitet. Overgange fra top til bund føles mest naturlige, fordi lyset som regel kommer oppefra.

Koder til mørke diskrete gradienter

Mørke flader har endnu mere gavn af dem, fordi helt flad sort ligner et hul i skærmen. Løft toppen en anelse, og lad bunden falde til ro. Gradienter til mørk tilstand dækker hele temaer; disse er byggestenene.

Hvor diskrete gradienter virker i en brugerflade

Tommelfingerreglen: en diskret gradient må aldrig være det, du kigger på. Hvis en anmelder kommenterer gradienten, er den for kraftig til en baggrund. Flere afdæmpede udtryk til tryk og sociale medier såvel som skærme finder du i minimalistiske baggrunde.

Sådan toner du en diskret gradient med din brandfarve

En neutral grå gradient er sikker, men anonym. Når du toner den lyse eller mørke ende med et strejf af din brandfarvetone, føles hele brugerfladen beslægtet med logoet, uden at nogen kan pege på hvorfor. Tricket er at beholde farvetonen og smide næsten al mætningen væk.

1. 1

   Tag brandets farvetone

   Konvertér din primære brandfarve til oklch eller HSL, og notér kun farvetonen: omkring 265 for en violet, 160 for en grøn, 30 for en varm orange.

2. 2

   Hold den næsten grå

   Sæt chroma meget lavt, omkring 0,005 til 0,015 i oklch, eller mætning under cirka 30 % i HSL ved meget høj lyshed. Du vil have en hvisken af farve, ikke en pastel.

3. 3

   Fastlæg to lyshedsværdier

   Til lyse temaer kan du prøve 99 % og 96 %; til mørke temaer omkring 20 % og 15 %. Hold begge ender på samme farvetone, så overgangen aldrig driver mod grå eller en anden farve.

4. 4

   Tjek den ved siden af ren hvid eller sort

   Placer gradienten ved siden af en ren hvid eller sort blok. Kan du slet ikke se forskellen, så skub den nederste ende en smule; er nuancen tydelig fra den anden ende af lokalet, så sænk chroma.

Samme nuance kan derefter føres videre til kanter, skillelinjer og hover-tilstande, så gradienten er en del af et stille system frem for en enlig effekt. Knapper er det ene sted, hvor du kan tillade et lidt kraftigere skift, et par procent mørkere i bunden, fordi en antydning af volumen får dem til at se trykbare ud.

Sådan skriver du en diskret gradient i CSS

Hexkoder virker overalt. Vil du have finere kontrol, så skriv farverne i oklch, hvor det første tal er den opfattede lyshed, så du kan fastlægge skiftet præcist: fra 99 % til 96 %, for eksempel. Blanding i oklch holder også ændringen jævn i hele længden. CSS-gradienter i oklch forklarer syntaksen, og CSS linear-gradient dækker det grundlæggende.

: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;
}

Hvorfor diskrete gradienter får banding, og løsningen

To tætliggende farver har meget få trin imellem sig i et 8-bit-billede. Stræk dem ud over en hero på 1920 pixels, og hvert trin bliver en synlig stribe, især på mørke gradienter og billigere skærme. Den fulde forklaring står i banding i gradienter.

På nettet fjerner en lillebitte SVG-støjtekstur lagt over gradienten med lav opacitet de synlige trin, uden at nogen bemærker kornet; støjtekstur i CSS har koden. Til opslag på sociale medier og slides har en Gradiently Mark sit eget korn og tegnes i alle størrelser, så en stille baggrund forbliver glat, uanset om det er en story eller et banner. Når du vil have det modsatte af stille, har livlige gradienter de mættede koder.