Grå gradient: neutrala koder som inte är tråkiga

En grå gradient slutar vara tråkig i samma ögonblick som gråtonerna får en nyans. Rent neutrala gråtoner, de med lika delar rött, grönt och blått, känns platta och digitala. Putta dem lite åt det kalla, mot blått, och du får dimma, skiffer och stål. Putta dem åt det varma, mot brunt, och du får sten, betong och tenn. Lägg till ljus som kommer från någonstans och en accentfärg, så blir grått lugnt, modernt och stilla självsäkert. Koder för varje följer.

Varmgrått eller kallgrått: välj ett

Kalla gråtoner känns tekniska, rena och exakta. Varma gråtoner känns arkitektoniska, naturliga och mjuka. Båda fungerar vackert var för sig. Tillsammans i en gradient bråkar de, och resultatet ser ut som en smutsfläck. Titta på färgproven nedan i par: den översta raden lutar åt blått, den nedersta åt brunt, och skillnaden är liten men uppenbar när du väl sett den.

Koder för kalla och varma grå gradienter

Dimma och skiffer är det kalla paret: dimma för ljusa, luftiga layouter och skiffer för allvarliga mörka. Storm lägger till ett upplyst moln, vilket ger en mörkgrå verkligt djup. Sten och betong är det varma paret, närmare byggmaterial, och grafit är det nästan svarta du kan använda i stället för rent svart.

Om du går ännu mörkare tar koderna för svart gradient vid där grafit slutar. För designer byggda av en nyans i många ljushetsnivåer, se monokrom gradient.

Silver, stål och andra metalliska grå gradienter

Metall är ingen färg, det är en reflektion. En silvergradient fungerar på grund av ett skarpt, ljust band som är inklämt mellan mörkare stopp, så som ljus fångas av en böjd yta. Gunmetal använder samma trick på en mörkare nivå, och borstat stål lägger till fina parallella linjer. De är kraftfulla, så använd dem till en bricka, en rubrikplatta eller en enda panel snarare än en hel sida.

Borstat stål ser bäst ut när linjerna ligger över en mjuk upplyst gradient i stället för för sig. Två lager räcker:

.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 plus en färg

Få bakgrunder framhäver en enda stark färg så väl som grått. Accenten ser ljusare ut mot neutralt än den någonsin gör mot andra färger, så lite räcker långt: ett ord, en knapp, en rad. Välj accenten efter bransch och stämning.

Det finns kompletta scheman byggda så i tekniska färgpaletter och neutrala färgpaletter.

Grått som ser avsiktligt ut

Färgband förtjänar en egen varning. Gråtoner har ingen nyans som distraherar ögat, så varje steg i en len gradient syns, särskilt på stora skärmar och efter komprimering. Ett lätt brusskikt döljer det. CSS-brustextur har ett kodexempel, och färgband i gradienter förklarar varför det uppstår.

Grå gradienter på webbplatser och i mörkt läge

På webben gör grå gradienter sitt bästa arbete i det tysta. En dimgradient bakom ett funktionsavsnitt skiljer det från en vit sida utan en hård kant. I mörkt läge ger en grafitgradient som ljusnar lite mot toppen av ett kort det djup, där ett platt grått skulle se ut som ett hål. Håll skillnaden mellan stoppen liten, några procent ljushet, så att gradienten läses som ljus snarare än dekoration. Design för mörkt läge går igenom de bredare reglerna för mörka gränssnitt, från ytfärger till kontrast.

Grå gradientbakgrunder i praktiken

Arkitekter, ingenjörsfirmor och programvaruföretag använder grått eftersom det låter arbetet tala. En skiffergradient med vit text och en blå accent får ett projektmeddelande att se exakt ut. En varm stengradient med grafittext får ett portföljomslag att kännas taktilt. Varumärkesbyggande för arkitektbyråer visar hur långt en återhållsam palett kan nå.

Subtila bakgrunder är där ett designsystem lönar sig. I Gradiently bär en grå Mark sitt eget korn, vilket håller färgband borta, och Auto-bläck väljer ljus eller mörk text rad för rad när gråtonen skiftar över bilden.