Grijs verloop: neutrale codes die niet saai zijn

Een grijs verloop is niet meer saai zodra de grijzen getint zijn. Zuiver neutrale grijzen, met gelijke delen rood, groen en blauw, voelen plat en digitaal. Duw ze licht koel, richting blauw, en je krijgt mist, leisteen en staal; duw ze warm, richting bruin, en je krijgt steen, beton en tin. Voeg licht toe dat ergens vandaan komt en één accentkleur, en grijs wordt rustig, modern en stil zelfverzekerd. Hieronder volgen codes voor elk.

Warm grijs of koel grijs: kies er één

Koele grijzen voelen technisch, schoon en precies. Warme grijzen voelen architectonisch, natuurlijk en zacht. Beide werken prachtig alleen. Samen in één verloop vechten ze en ziet het resultaat eruit als een veeg. Bekijk de swatches hieronder in paren: de bovenste rij helt naar blauw, de onderste naar bruin, en het verschil is klein maar duidelijk zodra je het hebt gezien.

Codes voor koele en warme grijze verlopen

Mist en leisteen zijn het koele paar: mist voor lichte, luchtige lay-outs en leisteen voor serieuze donkere. Storm voegt een verlichte wolk toe, wat een donkergrijs echte diepte geeft. Steen en beton zijn het warme paar, dichter bij bouwmaterialen, en grafiet is het bijna-zwart dat je kunt gebruiken in plaats van gewoon zwart.

Ga je nog donkerder, dan gaan de codes van zwart verloop verder vanaf grafiet. Voor ontwerpen uit één tint in veel lichtheidsniveaus zie je monochroom verloop.

Zilver, staal en andere metallic grijze verlopen

Metaal is geen kleur, het is een weerspiegeling. Een zilververloop werkt dankzij een scherpe, heldere band geklemd tussen donkerdere stops, zoals licht een gebogen oppervlak vangt. Gunmetal gebruikt dezelfde truc op een donkerder niveau en geborsteld staal voegt fijne parallelle lijnen toe. Deze zijn gedurfd, dus gebruik ze voor een badge, een koptegelplaat of één paneel in plaats van een hele pagina.

Geborsteld staal ziet er het best uit als de lijnen over een zacht belicht verloop liggen in plaats van alleen. Twee lagen doen het:

.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%);
}

Grijs plus één kleur

Weinig achtergronden zetten één sterke kleur zo goed af als grijs. Het accent ziet er helderder uit tegen neutraal dan ooit tegen andere kleuren, dus weinig is genoeg: één woord, één knop, één regel. Kies het accent naar branche en sfeer.

Volledige schema’s op deze manier staan in techkleurenpaletten en neutrale kleurenpaletten.

Grijs dat bewust oogt

Banding verdient een eigen waarschuwing. Grijzen hebben geen tint die het oog afleidt, dus elke stap in een glad verloop is zichtbaar, vooral op grote schermen en na compressie. Een lichte ruislaag verbergt het; CSS-ruistextuur heeft een snippet en gradient banding legt uit waarom het gebeurt.

Grijze verlopen op websites en in donkere modus

Op het web doen grijze verlopen hun beste werk stilletjes. Een mistverloop achter een functiesectie scheidt haar van een witte pagina zonder harde rand. In donkere modus geeft een grafietverloop dat naar de bovenkant van een kaart iets oplicht diepte, waar een egaal grijs een gat zou lijken. Houd de verandering tussen stops klein, een paar procent lichtheid, zodat het verloop als licht leest in plaats van als decoratie. Donkere-modusontwerp behandelt de bredere regels voor donkere interfaces, van oppervlaktekleuren tot contrast.

Grijze verloopachtergronden in de praktijk

Architecten, ingenieursbureaus en softwarebedrijven gebruiken grijs omdat het het werk laat spreken. Een leisteenverloop met witte letters en één blauw accent laat een projectaankondiging precies ogen; een warm steenverloop met grafietletters laat de cover van een portfolio tastbaar voelen. Branding voor architectenbureaus toont hoe ver een ingetogen palet kan komen.

Subtiele achtergronden zijn waar een ontwerpsysteem zich uitbetaalt. In Gradiently draagt een grijze Mark zijn eigen korrel, die banding op afstand houdt, en kiest Auto-inkt regel voor regel lichte of donkere letters terwijl het grijs over het kader verschuift.