Diskreta gradienter: stilla färgskiften för rena gränssnitt

En diskret gradient rör sig mellan två färger som ligger så nära varandra att du känner förändringen mer än ser den: vitt till ett svalt benvitt, nästan svart till ett något mjukare nästan svart. Det lilla skiftet får en yta att se upplyst ut, vilket är varför rena gränssnitt använder dem på sidbakgrunder, kort och paneler i mörkt läge. Koderna nedan håller skillnaden i ljushet till några procent. Är den större börjar gradienten bli en egenskap i stället för en yta.

Koder för ljusa diskreta gradienter

Var och en av dessa börjar nära vitt och glider mot en svag nyans. Välj nyansen ur din varumärkesfärg så att även bakgrunden bär ett spår av identitet. Blandningar från topp till botten känns mest naturliga, eftersom ljuset oftast kommer ovanifrån.

Koder för mörka diskreta gradienter

Mörka ytor har ännu större nytta, eftersom rent platt svart ser ut som ett hål i skärmen. Lyft toppen en aning och låt botten sjunka. Gradienter för mörkt läge täcker hela teman, och det här är byggstenarna.

Var diskreta gradienter fungerar i ett gränssnitt

Tumregeln: en diskret gradient ska aldrig vara det du tittar på. Om en granskare kommenterar gradienten är den för stark för en bakgrund. För fler återhållsamma looker i tryck och sociala medier såväl som på skärmar, se minimalistiska bakgrunder.

Så tonar du en diskret gradient med din varumärkesfärg

En neutral grå gradient är säker men anonym. Att tona den ljusare eller mörkare änden med ett spår av din varumärkesnyans får hela gränssnittet att kännas släkt med logotypen utan att någon kan peka på varför. Knepet är att behålla nyansen och slänga nästan all mättnad.

1. 1

   Ta varumärkesnyansen

   Konvertera din huvudsakliga varumärkesfärg till oklch eller HSL och notera bara dess nyans: cirka 265 för en violett, 160 för en grön, 30 för en varm orange.

2. 2

   Håll den nästan grå

   Sätt kromat mycket lågt, cirka 0,005 till 0,015 i oklch, eller mättnad under cirka 30 % i HSL vid mycket hög ljushet. Du vill ha en viskning av färg, inte en pastell.

3. 3

   Sätt två ljushetsvärden

   För ljusa teman, prova 99 % och 96 %, för mörka teman cirka 20 % och 15 %. Håll båda ändar på samma nyans så att blandningen aldrig driver mot grått eller en andra färg.

4. 4

   Kontrollera den bredvid rent vitt eller svart

   Placera gradienten bredvid ett enkelt vitt eller svart block. Om du inte ser någon skillnad alls, putta den nedre änden. Är nyansen tydlig från andra sidan rummet, sänk kromat.

Samma nyans kan sedan föras vidare till ramar, avdelare och hovertillstånd, så att gradienten är en del av ett stilla system i stället för en ensam effekt. Knappar är det enda stället där du kan tillåta ett något starkare skifte, några procent mörkare nedtill, eftersom en antydan till volym hjälper dem att se tryckbara ut.

Skriva en diskret gradient i CSS

Hexkoder fungerar överallt. För finare kontroll, skriv färgerna i oklch, där första talet är upplevd ljushet, så att du kan sätta skiftet exakt: från 99 % till 96 %, till exempel. Att blanda i oklch håller också förändringen jämn längs hela längden. CSS-gradient i oklch förklarar syntaxen, och CSS linjär gradient täcker grunderna.

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

Varför diskreta gradienter får band, och lösningen

Två nära färger har mycket få steg emellan i en 8-bitarsbild. Sträck ut dem över en hero på 1920 pixlar och varje steg blir en synlig rand, särskilt på mörka gradienter och billigare skärmar. Hela förklaringen finns i bandning i gradienter.

På webben tar en liten SVG-brustextur lagd över gradienten med låg opacitet bort synliga steg utan att någon märker kornet, och CSS-brustextur har koden. För inlägg och bilder i sociala medier bär en Gradiently-Mark sitt eget korn och renderas i varje storlek, så att en stilla bakgrund förblir len oavsett om den är en story eller en banner. När du vill ha raka motsatsen till stilla har livfulla gradienter de mättade koderna.