# Zwart-gouden verlopen: luxe codes met smaak

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

Zwart en goud is de steno voor luxe, en het palet dat het makkelijkst goedkoop oogt. Het verschil zit bijna altijd in hoe het goud is opgebouwd en hoe weinig je ervan gebruikt.

## The short version

- Een zwart-goud verloop combineert een bijna zwarte ondergrond met goud dat uit meerdere stops is opgebouwd, doorgaans een donker brons, een warm goud zoals #d4af37 en een bleke highlight zoals #f3e5ab.
- Egaal goud oogt op een scherm als mosterd, omdat echt goud pas als metaal leest als licht en schaduw erover bewegen.
- Zwart en goud oogt het duurst als goud een klein deel van het ontwerp beslaat, zoals een lichtbron aan één rand, een lijn of de letters.
- Gouden tekst zoals #d4af37 op bijna zwart haalt ongeveer 9:1 contrast, dus is leesbaar voor koppen en korte regels.
- Gedrukt goud van gewone inkten oogt nooit metallic, dus gebruik folie of metallic inkt als het echte werk telt.

Een **zwart-goud verloop** zet een bijna zwarte ondergrond tegenover goud dat uit meerdere stops is opgebouwd in plaats van één egale kleur: een donker brons zoals `#8a6d1f`, een warm goud zoals `#d4af37` en een bleke highlight zoals `#f3e5ab`. Die variatie laat goud als metaal lezen. Smaakvolle versies gebruiken ook veel minder goud dan je zou denken, vaak alleen een gloed aan één rand of de letters zelf. Hier staan de codes, de CSS voor metallic gouden tekst en de regels die de combinatie duur laten aanvoelen.

## Waarom egaal goud goedkoop oogt

Goud is eigenlijk geen kleur; het is een materiaal. Wat je als goud herkent is een patroon van reflecties: donker olijfbruin in de schaduwen, warm geel in de middentonen, bijna wit waar het licht valt. Eén hexwaarde vangt er maar één van, dus een egaal `#ffd700` leest als geel of mosterd in plaats van metaal. Een verloop met minstens drie stops doet het werk dat het licht zou doen.

- Gitzwart: #0a0a0a
- Warm zwart: #1a1408
- Bronsschaduw: #5c4813
- Antiek goud: #8a6d1f
- Donker goudgeel: #b8860b
- Metallic goud: #d4af37
- Honing: #e6c76a
- Champagne: #f3e5ab

Twee zwarttinten en zes goudtinten. Een overtuigend metaal gebruikt minstens drie goudtinten uit deze reeks, nooit maar één.

## Codes voor metallic gouden verlopen

Dit zijn de gouden vullingen zelf: voor een lijn, een badge, een monogram of verloopletters. Elk loopt donker naar licht naar donker, wat de indruk wekt van een gebogen, gepolijst oppervlak dat licht vangt.

- Gepolijst goud: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Goud met licht van boven: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Antieke balk: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Geborsteld champagne: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Metallic gouden vullingen. De symmetrie, donker aan beide uiteinden en helder in het midden, is wat als gebogen oppervlak leest.

## Zwart-gouden verloopachtergronden

Draai voor een achtergrond de verhoudingen om: het zwart doet bijna al het werk en goud komt als gloed, als horizon of als vage warmte in één hoek. Een warm zwart, met een vleugje bruin, past beter bij goud dan een puur of blauwachtig zwart.

- Gouden licht in de hoek: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Gouden horizon: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Voetlicht op het podium: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Gouden rand: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Zwart-gouden achtergronden. In elk ervan beslaat goud ruim minder dan een kwart van het kader.

Donkere verlopen krijgen meer bandvorming dan welk ander soort ook, en een gouden gloed op zwart is zo ongeveer het slechtste geval. Een fijne korrellaag lost het op en laat het oppervlak als bonus aanvoelen als papier of fluweel. Meer ondergronden staan bij [zwarte verlopen](https://gradiently.design/nl/guide/black-gradient).

## Zo houd je zwart en goud smaakvol

### Oogt goedkoop

- Egaal geel goud zoals `#ffd700`
- Goud dat het halve ontwerp beslaat
- Gouden gloedhalo’s achter elk woord
- Goud op puur blauwachtig zwart
- Sierlijk schrift, goud en afschuiningen tegelijk

### Oogt duur

- Goud opgebouwd uit drie of meer stops
- Goud op één plek: een licht, een lijn of de naam
- Eenvoudige, ruim gespatieerde letters zonder effecten
- Goud op warm zwart
- Eén elegant lettertype, royale marges

Terughoudendheid is de hele truc. Luxe verpakkingen tonen vaak veel lege donkere ruimte en een klein beetje metaal, zodat het metaal kostbaar aanvoelt. Op een scherm geldt hetzelfde. [Luxe kleurenpaletten](https://gradiently.design/nl/guide/luxury-color-palettes) en [luxe ontwerp](https://gradiently.design/nl/guide/luxury-design) behandelen de bredere taal.

## Gouden tekst op een zwart verloop

Goud leest goed op zwart. De cijfers hieronder gebruiken de WCAG-contrastformule; 4,5:1 is het gebruikelijke minimum voor kleine tekst en 3:1 voor grote koppen. Bewaar de donkerdere antieke goudtinten voor lijnen en randen, niet voor woorden.

| Achtergrond | Tekst | Contrast | Gebruik voor |
| --- | --- | --- | --- |
| Gitzwart `#0a0a0a` | Metallic goud `#d4af37` | 9,4:1 | Koppen en korte regels |
| Gitzwart `#0a0a0a` | Donker goudgeel `#b8860b` | 6,1:1 | Subkoppen, labels |
| Warm zwart `#14110a` | Goud `#c9a227` | 7,8:1 | Koppen |
| Warm zwart `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Lopende tekst |
| Gitzwart `#0a0a0a` | Antiek goud `#8a6d1f` | 4,0:1 | Alleen grote tekst of lijnen |

Voor lange tekst leest champagne prettiger dan verzadigd goud.

Metallic verloopletters werken voor één woord of een korte naam. De CSS hieronder knipt het gepolijste goudverloop tot de letters en houdt een egale gouden terugval. [CSS-verloopletters](https://gradiently.design/nl/guide/css-gradient-text) behandelt de toegankelijkheidskant.

```css
.luxe {
  background-color: #0a0a0a;
  background-image: radial-gradient(circle at 80% 15%, #5c4813 0%, #1a1408 35%, #0a0a0a 75%);
  color: #f3e5ab;
}

.luxe h1 {
  color: #d4af37; /* fallback */
  background: linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}
```

Een sectie in warm zwart met een vaag gouden licht, champagnekleurige lopende tekst en een gepolijste gouden kop.

Een staande juwelenpost met bleekgouden letters op een warm zwarte achtergrond met een vage gouden gloed in één hoek

Een post van een juwelier: warm zwart, één gouden licht, eenvoudige letters.

Een verticale oudejaarsstory met champagnekleurige letters op zwart dat onderaan overloopt in een gouden horizon

Een nieuwjaarsstory met onderaan een gouden horizon.

## Zwart en goud in druk

Gewoon vierkleurendruk kan metaal niet weergeven. Een in CMYK gedrukt goudverloop wordt een bruinachtig geel, hoe zorgvuldig je het ook opbouwt. Gebruik voor uitnodigingen, visitekaartjes en verpakkingen waar goud telt hete folie of metallic inkt voor de gouden delen en bewaar het verloop voor het scherm. [Verlopen in druk](https://gradiently.design/nl/guide/print-gradients) legt de opties uit, en [RGB vs CMYK](https://gradiently.design/nl/guide/rgb-vs-cmyk) legt uit waarom schermen en papier verschillen.

## Waar je zwart en goud gebruikt

Zwart en goud past bij juwelen, horloges, parfum, sterke drank, hotels, barbers, black-tie-evenementen en oud en nieuw. Het combineert ook goed met diep wijnrood; zie [bordeauxrode verlopen](https://gradiently.design/nl/guide/maroon-gradient). Wil je een donkere, warme look die alleen van jou is, dan is een Mark van Gradiently een recept van kleuren, materialen, licht en korrel in plaats van een egale vulling. Elke Mark heeft op elk moment één eigenaar, en zodra jij er een claimt, kan een concurrent hem niet exporteren.

## FAQ

### Wat is de hexcode voor metallic goud?

Een veelgebruikt metallic goud is `#d4af37`. Combineer het in een verloop met een donker brons zoals `#8a6d1f` en een bleke highlight zoals `#f3e5ab` voor een overtuigend metaal.

### Hoe maak ik een goudverloop in CSS?

Gebruik een symmetrisch lineair verloop dat loopt van donker, helder, highlight, helder, donker, bijvoorbeeld `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Is gouden tekst op zwart leesbaar?

Ja. Metallic goud `#d4af37` op bijna zwart haalt ongeveer 9:1 contrast. Voor lange passages leest een bleker champagnegoud prettiger.

### Waarom oogt mijn zwart-gouden ontwerp goedkoop?

Meestal omdat het goud één egaal geel is, er te veel van is of het gloed en afschuiningen draagt. Bouw goud op uit meerdere stops en gebruik het op één plek.

### Kan ik een zwart-goud verloop drukken?

Dat kan, maar goud in CMYK oogt bruingeel, niet metallic. Gebruik folie of metallic inkt voor goud dat moet glanzen.