Grå gradient: neutrale koder, der ikke er kedelige

En grå gradient holder op med at se kedelig ud i det øjeblik, de grå toner får et skær. Helt neutrale grå, dem med lige meget rød, grøn og blå, føles flade og digitale. Skub dem en anelse køligt, mod blå, og du får tåge, skifer og stål; skub dem varmt, mod brun, og du får sten, beton og tin. Tilføj lys, der kommer et sted fra, og én accentfarve, og grå bliver rolig, moderne og stille selvsikker. Koder til hver følger her.

Varm grå eller kølig grå: vælg én

Kølige grå føles tekniske, rene og præcise. Varme grå føles arkitektoniske, naturlige og bløde. Begge virker smukt alene. Sammen i én gradient kæmper de, og resultatet ligner en udtværing. Se på farveprøverne nedenfor parvis: den øverste række trækker mod blå, den nederste mod brun, og forskellen er lille, men tydelig, når du først har set den.

Koder til kølige og varme grå gradienter

Tåge og skifer er det kølige par: tåge til lyse, luftige layouts og skifer til seriøse, mørke. Storm tilføjer en oplyst sky, som giver en mørk grå ægte dybde. Sten og beton er det varme par, tættere på byggematerialer, og grafit er den næsten sorte, du kan bruge i stedet for ren sort.

Går du endnu mørkere, fortsætter koderne til sort gradient fra grafit. Til designs bygget af én nuance i mange lysheder, se monokrom gradient.

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

Metal er ikke en farve, det er en refleksion. En sølvgradient virker på grund af et skarpt, lyst bånd klemt inde mellem mørkere stop, sådan som lys rammer en buet overflade. Gunmetal bruger det samme trick på et mørkere niveau, og børstet stål tilføjer fine parallelle linjer. De er markante, så brug dem til et mærke, en overskriftsplade eller et enkelt panel i stedet for en hel side.

Børstet stål ser bedst ud, når linjerne ligger over en blødt oplyst gradient i stedet for alene. To lag klarer det:

.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å plus én farve

Få baggrunde fremhæver en enkelt stærk farve så godt som grå. Accenten ser klarere ud mod neutral, end den nogensinde gør mod andre farver, så lidt rækker langt: ét ord, én knap, én linje. Vælg accenten efter branche og stemning.

Der er hele farveskemaer bygget på den måde i farvepaletter til tech og neutrale farvepaletter.

Grå, der ser bevidst ud

Striber fortjener deres egen advarsel. Grå har ingen nuance, der kan aflede øjet, så hvert trin i en glat gradient ses, især på store skærme og efter komprimering. Et let støjlag skjuler det; CSS-støjtekstur har et kodeudsnit, og striber i gradienter forklarer, hvorfor det sker.

Grå gradienter på hjemmesider og i mørk tilstand

På nettet gør grå gradienter deres bedste arbejde i det stille. En tågegradient bag en featuresektion skiller den fra en hvid side uden en hård kant. I mørk tilstand giver en grafitgradient, der lysner en smule mod toppen af et kort, dybde, hvor en flad grå ville ligne et hul. Hold forskellen mellem stoppene lille, et par procent lyshed, så gradienten læses som lys og ikke som pynt. Design til mørk tilstand dækker de bredere regler for mørke brugerflader, fra fladefarver til kontrast.

Grå gradientbaggrunde i praksis

Arkitekter, ingeniørfirmaer og softwarevirksomheder bruger grå, fordi den lader arbejdet tale. En skifergradient med hvid skrift og én blå accent får en projektannoncering til at virke præcis; en varm stengradient med grafitskrift får et porteføljecover til at føles taktilt. Branding til arkitektfirmaer viser, hvor langt en afdæmpet palet kan nå.

Diskrete baggrunde er dér, hvor et designsystem betaler sig. I Gradiently har en grå Mark sit eget korn, som holder striber på afstand, og Automatisk tekstfarve vælger lys eller mørk skrift linje for linje, mens den grå tone skifter hen over billedet.