Grå gradient: nøytrale koder som ikke er kjedelige

En grå gradient slutter å være kjedelig så snart gråtonene får en undertone. Rene, nøytrale gråtoner med like mye rødt, grønt og blått virker flate og digitale. Skyv dem svakt mot kjølig blått, og du får tåke, skifer og stål. Skyv dem mot varmt brunt, og du får stein, betong og tinn. Legg til lys som kommer fra et bestemt sted og én aksentfarge, så blir grått rolig, moderne og stillferdig sikkert. Koder til hvert uttrykk følger under.

Varmgrått eller kaldgrått: velg én

Kjølige gråtoner virker tekniske, rene og presise. Varme gråtoner virker arkitektoniske, naturlige og myke. Begge fungerer vakkert alene. Sammen i én gradient kjemper de, og resultatet ligner en flekk. Se på fargeprøvene under i par. Øverste rad heller mot blått, nederste mot brunt. Forskjellen er liten, men tydelig når du først har sett den.

Koder til kjølige og varme grå gradienter

Tåke og skifer er det kjølige paret: tåke til lyse, luftige layouter og skifer til seriøse, mørke. Storm legger til en belyst sky som gir mørkegrått ekte dybde. Stein og betong er det varme paret, nærmere byggematerialer. Grafitt er nesten svart og kan brukes i stedet for rent svart.

Vil du gå enda mørkere, fortsetter kodene i svart gradient fra grafitt. For design bygget av én fargetone i mange lyshetsnivåer, se monokrom gradient.

Sølv, stål og andre metalliske grå gradienter

Metall er ikke en farge, men en refleksjon. En sølvgradient fungerer takket være et skarpt, lyst bånd klemt mellom mørkere stopp, slik lys treffer en krum overflate. Våpenmetall bruker samme grep på et mørkere nivå, mens børstet stål legger til fine, parallelle linjer. Disse er kraftige, så bruk dem til et merke, en overskriftsplate eller ett panel fremfor en hel side.

Børstet stål ser best ut når linjene ligger over en mykt belyst gradient fremfor alene. To lag gjør jobben:

.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}

Grått pluss én farge

Få bakgrunner fremhever én sterk farge like godt som grått. Aksenten virker klarere mot en nøytral flate enn mot andre farger, så litt rekker langt: ett ord, én knapp eller én linje. Velg aksenten etter bransje og stemning.

Hele fargeoppsett bygget slik finnes i teknologipaletter og nøytrale fargepaletter.

Grått som virker bevisst

Synlige bånd fortjener en egen advarsel. Grått har ingen fargetone som avleder øyet, så hvert trinn i en glatt gradient vises, særlig på store skjermer og etter komprimering. Et svakt støylag skjuler det. Støytekstur i CSS har en kodebit, og bånd i gradienter forklarer årsaken.

Grå gradienter på nettsteder og i mørkt tema

På nett gjør grå gradienter sin beste jobb i det stille. En tåkegradient bak en funksjonsseksjon skiller den fra en hvit side uten en hard kant. I mørkt tema gir en grafittgradient som lysner svakt mot toppen av et kort, dybde der flatt grått ville lignet et hull. Hold forskjellen mellom stoppene liten, noen få prosent lyshet, slik at gradienten virker som lys fremfor pynt. Design i mørkt tema dekker reglene for mørke grensesnitt, fra flatefarger til kontrast.

Grå gradientbakgrunner i praksis

Arkitekter, ingeniørfirmaer og programvareselskaper bruker grått fordi det lar arbeidet tale. En skifergradient med hvit tekst og én blå aksent gir en presis prosjektkunngjøring. En varm steingradient med grafittfarget tekst gjør en porteføljeforside taktil. Merkevarebygging for arkitektfirmaer viser hvor langt en behersket palett kan nå.

Diskrete bakgrunner er der et designsystem lønner seg. I Gradiently har en grå Mark egne korn som holder synlige bånd unna. Auto-tekstfarge velger lys eller mørk tekst linje for linje mens gråtonen endres over flaten.