# Svart og gull gradient: luksuriøse fargekoder med smak

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

Svart og gull er kortversjonen av luksus, og den paletten som lettest ser billig ut. Forskjellen ligger nesten alltid i hvordan gullet er bygget opp, og hvor lite av det du bruker.

## The short version

- En svart og gull gradient kombinerer en nesten svart bunn med gull bygget av flere stopp, typisk en mørk bronse, et varmt gull som #d4af37 og et blekt høylys som #f3e5ab.
- Flatt gull ser ut som sennep på skjerm, fordi ekte gull bare leses som metall når lys og skygge beveger seg over det.
- Svart og gull ser dyrest ut når gullet dekker en liten del av designet, som et lys i én kant, en strek eller teksten.
- Gulltekst som #d4af37 på nesten svart når omtrent 9:1 i kontrast, så den er lesbar i overskrifter og korte linjer.
- Trykt gull laget av vanlige trykkfarger ser aldri metallisk ut, så bruk folie eller metallisk trykkfarge når det ekte er viktig.

En **svart og gull gradient** setter en nesten svart bunn mot gull som er bygget av flere stopp i stedet for én flat farge: en mørk bronse som `#8a6d1f`, et varmt gull som `#d4af37` og et blekt høylys som `#f3e5ab`. Den variasjonen er det som får gull til å leses som metall. Smakfulle versjoner bruker også langt mindre gull enn du kanskje tror, ofte bare en glød i én kant eller selve teksten. Her er kodene, CSS for metallisk gulltekst og reglene som får kombinasjonen til å føles eksklusiv.

## Hvorfor flatt gull ser billig ut

Gull er egentlig ikke en farge; det er et materiale. Det du kjenner igjen som gull, er et mønster av refleksjoner: mørk olivenbrun i skyggene, varm gul i mellomtonene, nesten hvit der lyset treffer. Én enkelt hex-verdi fanger bare én av dem, så en flat `#ffd700` leses som gul eller sennep, ikke metall. En gradient med minst tre stopp gjør jobben lyset ellers ville gjort.

- Gagat: #0a0a0a
- Varm svart: #1a1408
- Bronseskygge: #5c4813
- Antikkgull: #8a6d1f
- Mørk gullris: #b8860b
- Metallisk gull: #d4af37
- Honning: #e6c76a
- Champagne: #f3e5ab

To svarttoner og seks gulltoner. Et overbevisende metall bruker minst tre gulltoner fra denne skalaen, aldri bare én.

## Koder for metallisk gull gradient

Dette er selve gullfyllene: til en strek, et merke, et monogram eller gradienttekst. Hver går fra mørk til lys til mørk, og det er det som gir inntrykk av en buet, polert flate som fanger lyset.

- Polert gull: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Gull med lys ovenfra: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Antikk 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 gullfyll. Symmetrien, mørk i begge ender og lys i midten, er det som leses som en buet flate.

## Bakgrunner med svart og gull gradient

Til en bakgrunn snur du proporsjonene: det svarte gjør nesten hele jobben, og gullet kommer som en glød, en horisont eller en svak varme i ett hjørne. En varm svart, med et snev av brunt, passer bedre med gull enn en ren eller blåaktig svart.

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

Bakgrunner i svart og gull. I hver av dem dekker gullet godt under en fjerdedel av flaten.

Mørke gradienter får striper mer enn noen annen type, og en gyllen glød på svart er omtrent det verste tilfellet. Et fint kornlag fikser det og får i tillegg flaten til å føles som papir eller fløyel. Flere bunner finner du i [svarte gradienter](https://gradiently.design/nb/guide/black-gradient).

## Slik holder du svart og gull smakfullt

### Ser billig ut

- Flatt, gult gull som `#ffd700`
- Gull som dekker halve designet
- Gyllen glorie bak hvert ord
- Gull på ren, blåaktig svart
- Snirklete skrift, gull og skråkanter på én gang

### Ser dyrt ut

- Gull bygget av tre eller flere stopp
- Gull på ett sted: et lys, en strek eller navnet
- Enkel, luftig skrift uten effekter
- Gull på varm svart
- Én elegant skrift, romslige marger

Tilbakeholdenhet er hele trikset. Luksusemballasje viser gjerne mye tom, mørk flate og en liten mengde metall, så metallet føles dyrebart. Det samme gjelder på skjerm. [Luksuriøse fargepaletter](https://gradiently.design/nb/guide/luxury-color-palettes) og [luksusdesign](https://gradiently.design/nb/guide/luxury-design) dekker det bredere språket.

## Gulltekst på en svart gradient

Gull leses godt på svart. Tallene nedenfor bruker WCAGs kontrastformel; 4,5:1 er det vanlige minimumet for liten tekst og 3:1 for store overskrifter. Spar de mørkere antikkgulltonene til streker og rammer, ikke ord.

| Bakgrunn | Tekst | Kontrast | Bruk til |
| --- | --- | --- | --- |
| Gagat `#0a0a0a` | Metallisk gull `#d4af37` | 9,4:1 | Overskrifter og korte linjer |
| Gagat `#0a0a0a` | Mørk gullris `#b8860b` | 6,1:1 | Mellomtitler, etiketter |
| Varm svart `#14110a` | Gull `#c9a227` | 7,8:1 | Overskrifter |
| Varm svart `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Brødtekst |
| Gagat `#0a0a0a` | Antikkgull `#8a6d1f` | 4,0:1 | Kun stor tekst eller streker |

Til lang tekst er champagne behageligere å lese enn mettet gull.

Metallisk gradienttekst fungerer til ett ord eller et kort navn. CSS-en nedenfor klipper den polerte gullgradienten til bokstavene og beholder et heldekkende gull som reserve. [Gradienttekst i CSS](https://gradiently.design/nb/guide/css-gradient-text) dekker tilgjengelighetssiden.

```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, svart seksjon med et svakt gyllent lys, brødtekst i champagne og en overskrift i polert gull.

Et stående smykkeinnlegg med blek gullskrift på en varm, svart bakgrunn med en svak gyllen glød i ett hjørne

Et innlegg fra en gullsmed: varm svart, ett gyllent lys, enkel skrift.

En loddrett nyttårsaften-story med champagnefarget skrift på svart som tones over i en gyllen horisont nederst

En nyttårsaften-story med en gyllen horisont nederst.

## Svart og gull på trykk

Vanlig firefargetrykk kan ikke gjengi metall. En gullgradient trykt i CMYK blir brunlig gul, uansett hvor nøye du bygger den. Til invitasjoner, visittkort og emballasje der gullet betyr noe, bruk varmpreget folie eller en metallisk trykkfarge til gulldelene, og behold gradienten til skjerm. [Gradienter på trykk](https://gradiently.design/nb/guide/print-gradients) forklarer alternativene, og [RGB vs CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer hvorfor skjerm og papir er forskjellige.

## Hvor du bør bruke svart og gull

Svart og gull passer smykker, klokker, parfyme, brennevin, hoteller, barberere, gallaarrangementer og nyttår. Det fungerer også godt med dype vinrøde toner; se [burgunder gradienter](https://gradiently.design/nb/guide/maroon-gradient). Vil du ha et mørkt, varmt uttrykk som bare er ditt, er en Gradiently-Mark en oppskrift på farger, materialer, lys og korn i stedet for et flatt fyll. Hver Mark har én eier om gangen, og når du har sikret deg en, kan ikke en konkurrent eksportere den.

## FAQ

### Hva er hex-koden for metallisk gull?

Et mye brukt metallisk gull er `#d4af37`. For et overbevisende metall, kombiner det med en mørk bronse som `#8a6d1f` og et blekt høylys som `#f3e5ab` i en gradient.

### Hvordan lager jeg en gullgradient i CSS?

Bruk en symmetrisk lineær gradient som går mørk, lys, høylys, lys, mørk, for eksempel `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Er gulltekst på svart lesbar?

Ja. Metallisk gull `#d4af37` på nesten svart når omtrent 9:1 i kontrast. Til lange avsnitt er et blekere champagnegull behageligere å lese.

### Hvorfor ser designet mitt i svart og gull billig ut?

Som regel fordi gullet er én flat gul farge, det er for mye av det, eller det har glød og skråkanter. Bygg gullet av flere stopp og bruk det på ett sted.

### Kan jeg trykke en svart og gull gradient?

Det kan du, men gull i CMYK ser brunlig gult ut, ikke metallisk. Bruk folie eller en metallisk trykkfarge til gull som skal skinne.