# Svart och guld gradient: lyxkoder med god smak

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

Svart och guld är kortformen för lyx och den lättaste paletten att göra billig. Skillnaden ligger nästan alltid i hur guldet är byggt och hur lite av det du använder.

## The short version

- En gradient i svart och guld parar en nästan svart botten med guld byggt av flera stopp, vanligen ett mörkt brons, ett varmt guld som #d4af37 och en blek högdager som #f3e5ab.
- Platt guld ser ut som senap på skärmen, eftersom riktigt guld läses som metall först när ljus och skugga rör sig över det.
- Svart och guld ser dyrast ut när guldet täcker en liten del av designen, som ett ljus i ena kanten, en linje eller texten.
- Guldtext som #d4af37 på nästan svart når ungefär 9:1 i kontrast, så den är läsbar för rubriker och korta rader.
- Tryckt guld av vanliga färger blir aldrig metalliskt, så använd folie eller metallfärg när det äkta spelar roll.

En **gradient i svart och guld** ställer en nästan svart botten mot guld som är byggt av flera stopp i stället för en platt färg: ett mörkt brons som `#8a6d1f`, ett varmt guld som `#d4af37` och en blek högdager som `#f3e5ab`. Den variationen får guld att läsas som metall. Smakfulla versioner använder också mycket mindre guld än du kanske tror, ofta bara en glöd i ena kanten eller själva texten. Här är koderna, CSS för metallisk guldtext och reglerna som får paret att kännas dyrt.

## Varför platt guld ser billigt ut

Guld är egentligen ingen färg, det är ett material. Det du känner igen som guld är ett mönster av reflexer: mörkt olivbrunt i skuggorna, varmt gult i mellantonerna, nästan vitt där ljuset träffar. Ett enda hexvärde fångar bara en av dem, så ett platt `#ffd700` läses som gult eller senap snarare än metall. En gradient med minst tre stopp gör det jobb som ljuset skulle göra.

- Kolsvart: #0a0a0a
- Varmt svart: #1a1408
- Bronsskugga: #5c4813
- Antikt guld: #8a6d1f
- Mörk guldvippa: #b8860b
- Metalliskt guld: #d4af37
- Honung: #e6c76a
- Champagne: #f3e5ab

Två svarta och sex guld. En övertygande metall använder minst tre guld från den här skalan, aldrig bara ett.

## Koder för metalliska guldgradienter

Det här är själva guldfyllningarna: för en linje, ett märke, ett monogram eller gradienttext. Var och en går från mörkt till ljust till mörkt, vilket ger intrycket av en böjd, polerad yta som fångar ljus.

- Polerat guld: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Guld med ljus ovanifrån: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Antik list: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Borstad champagne: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Metalliska guldfyllningar. Symmetrin, mörkt i båda ändar och ljust i mitten, är det som läses som en böjd yta.

## Bakgrunder i svart och guld

För en bakgrund vänder du på proportionerna: det svarta gör nästan hela jobbet och guldet kommer som en glöd, en horisont eller en svag värme i ett hörn. Ett varmt svart, med en ton av brunt, sitter bättre ihop med guld än ett rent eller blåsvart.

- Guldljus i hö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%)`
- Rampljus på scen: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Guldkant: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Bakgrunder i svart och guld. I alla täcker guldet långt under en fjärdedel av ramen.

Mörka gradienter får fler ränder än någon annan sort, och en guldglöd på svart är nästan värsta fallet. Ett fint kornlager löser det och får dessutom ytan att kännas som papper eller sammet. Fler bottnar finns i [svarta gradienter](https://gradiently.design/sv/guide/black-gradient).

## Så håller du svart och guld smakfullt

### Ser billigt ut

- Platt gult guld som `#ffd700`
- Guld som täcker halva designen
- Guldglorior bakom varje ord
- Guld på rent blåsvart
- Snirklig skriftstil, guld och fasningar på en gång

### Ser dyrt ut

- Guld byggt av tre eller fler stopp
- Guld på ett enda ställe: ett ljus, en linje eller namnet
- Enkel, väl avvägd text utan effekter
- Guld på varmt svart
- Ett elegant teckensnitt, generösa marginaler

Återhållsamhet är hela knepet. Lyxförpackningar visar ofta mycket tom mörk yta och en liten mängd metall, så att metallen känns värdefull. Detsamma gäller på skärmen. [Lyxiga färgpaletter](https://gradiently.design/sv/guide/luxury-color-palettes) och [lyxdesign](https://gradiently.design/sv/guide/luxury-design) går igenom det bredare formspråket.

## Guldtext på en svart gradient

Guld läses bra på svart. Siffrorna nedan använder WCAG:s kontrastformel, där 4,5:1 är det vanliga minimet för liten text och 3:1 för stora rubriker. Spara de mörkare antika gulden till linjer och kantlinjer, inte till ord.

| Bakgrund | Text | Kontrast | Använd till |
| --- | --- | --- | --- |
| Kolsvart `#0a0a0a` | Metalliskt guld `#d4af37` | 9,4:1 | Rubriker och korta rader |
| Kolsvart `#0a0a0a` | Mörk guldvippa `#b8860b` | 6,1:1 | Underrubriker, etiketter |
| Varmt svart `#14110a` | Guld `#c9a227` | 7,8:1 | Rubriker |
| Varmt svart `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Brödtext |
| Kolsvart `#0a0a0a` | Antikt guld `#8a6d1f` | 4,0:1 | Bara stor text eller linjer |

För lång text läses champagne bekvämare än mättat guld.

Metallisk gradienttext fungerar för ett enskilt ord eller ett kort namn. CSS:en nedan klipper den polerade guldgradienten till bokstäverna och behåller en enfärgad guldreserv. [CSS-gradienttext](https://gradiently.design/sv/guide/css-gradient-text) tar upp tillgänglighetssidan.

```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 sektion i varmt svart med ett svagt guldljus, brödtext i champagne och en rubrik i polerat guld.

Ett stående smyckesinlägg med blek guldtext på varm svart bakgrund med en svag guldglöd i ena hörnet

En juvelerares inlägg: varmt svart, ett guldljus, enkel text.

En stående nyårsaftonstory med champagnefärgad text på svart som tonar över i en guldhorisont längst ner

En nyårsaftonstory med en guldhorisont längst ner.

## Svart och guld i tryck

Vanligt fyrfärgstryck kan inte återge metall. En guldgradient tryckt i CMYK blir en brunaktig gul, hur noggrant du än bygger den. För inbjudningar, visitkort och förpackningar där guldet spelar roll, använd varmfolie eller metallfärg till guldpartierna och spara gradienten för skärmen. [Gradienter i tryck](https://gradiently.design/sv/guide/print-gradients) förklarar alternativen, och [RGB mot CMYK](https://gradiently.design/sv/guide/rgb-vs-cmyk) förklarar varför skärmar och papper skiljer sig.

## Var du använder svart och guld

Svart och guld passar smycken, klockor, parfym, sprit, hotell, barberare, kvällar med mörk kostym och nyår. Det fungerar också bra med djupa vinröda toner, se [vinröda gradienter](https://gradiently.design/sv/guide/maroon-gradient). Vill du ha ett mörkt, varmt utseende som bara är ditt är en Gradiently Mark ett recept av färger, material, ljus och korn snarare än en platt fyllning. Varje Mark har en ägare åt gången, och när du har säkrat en kan en konkurrent inte exportera den.

## FAQ

### Vilken hexkod har metalliskt guld?

Ett vanligt metalliskt guld är `#d4af37`. För en övertygande metall, kombinera det med ett mörkt brons som `#8a6d1f` och en blek högdager som `#f3e5ab` i en gradient.

### Hur gör jag en guldgradient i CSS?

Använd en symmetrisk linjär gradient som går mörkt, ljust, högdager, ljust, mörkt, till exempel `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Är guldtext på svart läsbar?

Ja. Metalliskt guld `#d4af37` på nästan svart når ungefär 9:1 i kontrast. För längre stycken läses ett blekare champagneguld bekvämare.

### Varför ser min design i svart och guld billig ut?

Oftast för att guldet är ett enda platt gult, det finns för mycket av det eller det har glorior och fasningar. Bygg guldet av flera stopp och använd det på ett enda ställe.

### Kan jag trycka en gradient i svart och guld?

Det går, men CMYK-guld ser brunaktigt gult ut, inte metalliskt. Använd folie eller metallfärg för guld som ska lysa.