# Grijs verloop: neutrale codes die niet saai zijn

[Canonical HTML page](https://gradiently.design/nl/guide/grey-gradient)

Grijs is de kleur die mensen kiezen als ze niet willen kiezen. Getint, belicht en met één accent gecombineerd wordt het een van de zelfverzekerdste achtergronden die je kunt gebruiken.

## The short version

- Een grijs verloop ziet er doordacht uit als de grijzen een lichte tint dragen, koel richting blauw of warm richting bruin.
- Warme en koele grijzen in één verloop mengen laat het vuil ogen, dus kies één temperatuur en houd je eraan.
- Metallic grijzen komen van een scherpe, heldere band tussen donkerdere stops, die licht nabootst dat een oppervlak vangt.
- Grijze verlopen vertonen zichtbaarder banding dan kleurrijke en een fijne korrellaag is de gebruikelijke oplossing.
- Eén verzadigde accentkleur tegen een grijs verloop laat het hele ontwerp bewust ogen.

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.

- Mist: #f4f6f8
- Koele nevel: #aeb6be
- Leisteen: #4a535d
- Storm: #22272c
- Krijt: #f3f1ee
- Beton: #b5b1ab
- Tin: #5f5b56
- Grafiet: #1c1c1e

Vier koele grijzen en vier warme. Grafiet zit dicht bij neutraal, daarom past het bij bijna alles.

## 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.

- Mist: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Leisteen: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Storm: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Warme steen: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Beton: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafiet: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Zes grijzen met een temperatuur. Storm en grafiet dragen witte letters; mist, steen en beton willen donkere letters.

Ga je nog donkerder, dan gaan de codes van [zwart verloop](https://gradiently.design/nl/guide/black-gradient) verder vanaf grafiet. Voor ontwerpen uit één tint in veel lichtheidsniveaus zie je [monochroom verloop](https://gradiently.design/nl/guide/monochrome-gradient).

## 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.

- Gepolijst zilver: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Gunmetal: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Tin: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Lijnen van geborsteld staal: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metallic grijzen. Hoe strakker de heldere band, hoe glanzender het metaal eruitziet; spreid hem breed en het wordt satijn.

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

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

Fijne witte lijnen om de drie pixels over een belicht zilvermengsel. Verander de hoek van de tweede laag om te verschuiven waar het licht valt.

## 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.

| Accent | Hex | Leest als | Goed voor |
| --- | --- | --- | --- |
| Elektrisch blauw | `#3b82f6` | Technisch, betrouwbaar | Software, fintech, data |
| Signaaloranje | `#f97316` | Industrieel, energiek | Bouw, gereedschap, logistiek |
| Limoen | `#a3e635` | Sportief, fris | Fitness, hardlopen, outdoorspullen |
| Blush | `#f2c6c2` | Zacht, modieus | Mode, beauty, lifestyle |
| Messing | `#c9a24a` | Premium, klassiek | Architectuur, horloges, hotels |

Gebruik koele grijzen met blauw en limoen, warme grijzen met oranje, blush en messing.

Volledige schema’s op deze manier staan in [techkleurenpaletten](https://gradiently.design/nl/guide/tech-color-palettes) en [neutrale kleurenpaletten](https://gradiently.design/nl/guide/neutral-color-palettes).

## Grijs dat bewust oogt

### Ziet er onaf uit

- Zuiver neutrale grijzen zonder tint
- Warme en koele grijzen in één mengsel
- Zichtbare banden over een glad oppervlak
- Drie of vier accentkleuren
- Middengrijze tekst op middengrijze achtergrond

### Ziet er bewust uit

- Een lichte blauwe of bruine tint overal
- Eén temperatuur van begin tot eind
- Een fijne korrel over het hele verloop
- Eén accent, spaarzaam gebruikt
- Bijna witte of bijna zwarte letters, nooit middengrijs

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](https://gradiently.design/nl/guide/css-noise-texture) heeft een snippet en [gradient banding](https://gradiently.design/nl/guide/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](https://gradiently.design/nl/guide/dark-mode-design) 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](https://gradiently.design/nl/guide/architecture-firm-branding) toont hoe ver een ingetogen palet kan komen.

Een brede LinkedIn-afbeelding met een koele leisteengrijze verloopachtergrond en de woorden Gebouwd om te blijven in wit

Een LinkedIn-linkafbeelding op een leisteen-Mark. Witte letters aan de donkere kant; het verlichte gebied blijft vrij van de woorden.

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.

## FAQ

### Hoe laat ik een grijs verloop minder saai ogen?

Tint de grijzen licht koel of warm, belicht het verloop van één kant, voeg fijne korrel toe en gebruik één verzadigde accentkleur.

### Wat is de CSS voor een zilververloop?

Gebruik een heldere band tussen donkerdere stops, bijvoorbeeld `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Heet het grey gradient of gray gradient?

Beide zijn juist. Gray is de Amerikaanse spelling en grey de Britse; ze betekenen exact dezelfde kleur.

### Welke kleur past het best bij een grijs verloop?

Eén sterk accent: elektrisch blauw of limoen met koele grijzen, signaaloranje, blush of messing met warme grijzen.

### Waarom heeft mijn grijze verloop strepen?

Gladde grijze mengsels tonen elke kleurstap, vooral na compressie. Voeg een lichte ruislaag toe en exporteer als PNG.