# Sort og guld gradient: luksuskoder med smag

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

Sort og guld er stenografien for luksus og den palet, der er lettest at gøre billig. Forskellen ligger næsten altid i, hvordan guldet er bygget, og hvor lidt af det du bruger.

## The short version

- En sort og guld gradient parrer en næsten sort bund med guld bygget af flere stop, typisk en mørk bronze, et varmt guld som #d4af37 og en lys højlysfarve som #f3e5ab.
- Fladt guld ligner sennep på en skærm, fordi ægte guld først læses som metal, når lys og skygge bevæger sig henover det.
- Sort og guld ser dyrest ud, når guldet dækker en lille del af designet, for eksempel et lys i den ene kant, en streg eller selve skriften.
- Guldtekst som #d4af37 på næsten sort når omkring 9:1 i kontrast, så den kan læses til overskrifter og korte linjer.
- Trykt guld lavet af almindeligt blæk ser aldrig metallisk ud, så brug folie eller metallisk farve, når det ægte skal til.

En **sort og guld gradient** stiller en næsten sort bund over for guld, der er bygget af flere stop frem for én flad farve: en mørk bronze som `#8a6d1f`, et varmt guld som `#d4af37` og et lyst højlys som `#f3e5ab`. Netop den variation får guld til at læses som metal. Smagfulde versioner bruger også langt mindre guld, end du måske venter, ofte kun et skær i den ene kant eller selve skriften. Her er koderne, CSS til metallisk guldtekst og reglerne, der får parret til at føles dyrt.

## Hvorfor fladt guld ser billigt ud

Guld er egentlig ikke en farve; det er et materiale. Det, du genkender som guld, er et mønster af refleksioner: mørk olivenbrun i skyggerne, varm gul i mellemtonerne og næsten hvid, hvor lyset rammer. Én hex-værdi fanger kun en af dem, så et fladt `#ffd700` læses som gult eller sennep frem for metal. En gradient med mindst tre stop gør det arbejde, lyset ellers ville gøre.

- Jetsort: #0a0a0a
- Varm sort: #1a1408
- Bronzeskygge: #5c4813
- Antikt guld: #8a6d1f
- Mørk gyldenris: #b8860b
- Metallisk guld: #d4af37
- Honning: #e6c76a
- Champagne: #f3e5ab

To sorte og seks guldtoner. Et overbevisende metal bruger mindst tre guldtoner fra denne række, aldrig bare én.

## Koder til metalliske guldgradienter

Det er selve guldfyldene: til en streg, et mærke, et monogram eller gradienttekst. Hver løber mørk, lys, mørk, og det giver indtrykket af en buet, poleret flade, der fanger lyset.

- Poleret guld: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Guld med overlys: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Antik barre: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Børstet champagne: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Metalliske guldfyld. Symmetrien, mørk i begge ender og lys i midten, er det, der læses som en buet flade.

## Sort og guld gradient som baggrund

Til en baggrund vender du forholdet om: det sorte gør næsten hele arbejdet, og guldet kommer som et skær, en horisont eller en svag varme i et hjørne. En varm sort med et strejf af brun klæder guld bedre end en ren eller blålig sort.

- Guldlys i hjørnet: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Guldhorisont: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Scenelys forfra: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Guldkant: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Sorte og gyldne baggrunde. I alle dækker guldet langt under en fjerdedel af billedet.

Mørke gradienter får flere striber end nogen anden slags, og et guldskær på sort er omtrent det værste tilfælde. Et fint kornlag løser det og får som bonus overfladen til at føles som papir eller fløjl. Flere bunde finder du i [sorte gradienter](https://gradiently.design/da/guide/black-gradient).

## Sådan holder du sort og guld smagfuldt

### Ser billigt ud

- Fladt gult guld som `#ffd700`
- Guld, der dækker halvdelen af designet
- Guldskær som glorier bag hvert ord
- Guld på ren blåsort
- Sirlig skønskrift, guld og skråkanter på én gang

### Ser dyrt ud

- Guld bygget af tre eller flere stop
- Guld ét sted: et lys, en streg eller navnet
- Enkel skrift med god afstand og ingen effekter
- Guld på varm sort
- Én elegant skrifttype, rigelige marginer

Tilbageholdenhed er hele tricket. Luksusemballage viser typisk meget tom, mørk plads og en lille mængde metal, så metallet føles kostbart. Det samme gælder på skærmen. [Luksuriøse farvepaletter](https://gradiently.design/da/guide/luxury-color-palettes) og [luksusdesign](https://gradiently.design/da/guide/luxury-design) dækker det bredere formsprog.

## Guldtekst på en sort gradient

Guld læses godt på sort. Tallene nedenfor bruger WCAG-kontrastformlen; 4,5:1 er det sædvanlige minimum til lille tekst og 3:1 til store overskrifter. Spar de mørkere antikke guldtoner til streger og kanter, ikke ord.

| Baggrund | Tekst | Kontrast | Bruges til |
| --- | --- | --- | --- |
| Jetsort `#0a0a0a` | Metallisk guld `#d4af37` | 9,4:1 | Overskrifter og korte linjer |
| Jetsort `#0a0a0a` | Mørk gyldenris `#b8860b` | 6,1:1 | Underoverskrifter, etiketter |
| Varm sort `#14110a` | Guld `#c9a227` | 7,8:1 | Overskrifter |
| Varm sort `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Brødtekst |
| Jetsort `#0a0a0a` | Antikt guld `#8a6d1f` | 4,0:1 | Kun stor tekst eller streger |

Til lang tekst læses champagne mere behageligt end mættet guld.

Metallisk gradienttekst virker til ét ord eller et kort navn. CSS'en nedenfor beskærer den polerede guldgradient til bogstaverne og beholder en ensfarvet guldreserve. [CSS-gradienttekst](https://gradiently.design/da/guide/css-gradient-text) dækker tilgængelighedssiden.

```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;
}
```

En varm sort sektion med et svagt guldlys, champagnefarvet brødtekst og en poleret guldoverskrift.

Et juvelopslag i højformat med blegt guld bogstaver på varm sort baggrund med et svagt guldskær i det ene hjørne

Et opslag fra en juveler: varm sort, ét guldlys, enkel skrift.

En lodret nytårsaftensstory med champagnefarvede bogstaver på sort, der toner ud i en guldhorisont i bunden

En nytårsaftensstory med en guldhorisont i bunden.

## Sort og guld på tryk

Almindeligt firefarvetryk kan ikke gengive metal. En guldgradient trykt i CMYK ender som en brunlig gul, uanset hvor omhyggeligt du bygger den. Til invitationer, visitkort og emballage, hvor guldet betyder noget, bruger du varmfolie eller metallisk farve til guldet og beholder gradienten til skærmen. [Gradienter på tryk](https://gradiently.design/da/guide/print-gradients) forklarer mulighederne, og [RGB vs CMYK](https://gradiently.design/da/guide/rgb-vs-cmyk) forklarer, hvorfor skærm og papir er forskellige.

## Hvor du bruger sort og guld

Sort og guld passer til smykker, ure, parfume, spiritus, hoteller, barberer, fester med sort slips og nytår. Det klæder også dybe vinrøde toner; se [bordeaux gradienter](https://gradiently.design/da/guide/maroon-gradient). Vil du have et mørkt, varmt udtryk, der er dit alene, er en Gradiently Mark en opskrift af farver, materialer, lys og korn frem for et fladt fyld. Hver Mark har én ejer ad gangen, og når du har sikret dig en, kan en konkurrent ikke eksportere den.

## FAQ

### Hvad er hex-koden for metallisk guld?

Et udbredt metallisk guld er `#d4af37`. For et overbevisende metal kombinerer du det med en mørk bronze som `#8a6d1f` og et lyst højlys som `#f3e5ab` i en gradient.

### Hvordan laver jeg en guldgradient i CSS?

Brug en symmetrisk lineær gradient, der løber mørk, lys, højlys, lys, mørk, for eksempel `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Kan guldtekst på sort læses?

Ja. Metallisk guld `#d4af37` på næsten sort når omkring 9:1 i kontrast. Til lange tekster læses et blegere champagneguld mere behageligt.

### Hvorfor ser mit sort og guld design billigt ud?

Som regel fordi guldet er ét fladt gult, der er for meget af det, eller det har glorier og skråkanter. Byg guld af flere stop, og brug det ét sted.

### Kan jeg trykke en sort og guld gradient?

Det kan du, men CMYK-guld ser brunligt gult ud og ikke metallisk. Brug folie eller metallisk farve til guld, der skal skinne.