# Gradienti nero e oro: codici di lusso fatti con gusto

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

Nero e oro è la scorciatoia del lusso, e la palette più facile da rendere dozzinale. La differenza sta quasi sempre in come è costruito l’oro e in quanto poco ne usi.

## The short version

- Un gradiente nero e oro abbina un fondo quasi nero a un oro costruito con più punti, di solito un bronzo scuro, un oro caldo come #d4af37 e un riflesso pallido come #f3e5ab.
- L’oro piatto sullo schermo sembra senape, perché l’oro vero appare come metallo solo quando luce e ombra si muovono su di esso.
- Il nero e oro sembra più costoso quando l’oro copre una piccola parte del design, come una luce su un bordo, un filetto o il testo.
- Un testo oro come #d4af37 su quasi nero raggiunge un contrasto di circa 9:1, quindi è leggibile per titoli e righe brevi.
- L’oro stampato con inchiostri ordinari non appare mai metallico, quindi usa lamina o inchiostro metallico quando conta l’effetto vero.

Un **gradiente nero e oro** contrappone un fondo quasi nero a un oro costruito con più punti invece che con un solo colore piatto: un bronzo scuro come `#8a6d1f`, un oro caldo come `#d4af37` e un riflesso pallido come `#f3e5ab`. Quella variazione è ciò che fa leggere l’oro come metallo. Le versioni di buon gusto usano anche molto meno oro di quanto ci si aspetti, spesso solo un bagliore su un bordo o il testo stesso. Ecco i codici, il CSS per il testo oro metallico e le regole che mantengono l’abbinamento prezioso.

## Perché l’oro piatto sembra dozzinale

L’oro non è davvero un colore; è un materiale. Ciò che riconosci come oro è uno schema di riflessi: marrone oliva scuro nelle ombre, giallo caldo nei mezzitoni, quasi bianco dove la luce colpisce. Un solo valore esadecimale ne cattura uno solo, quindi un `#ffd700` piatto sembra giallo o senape più che metallo. Un gradiente con almeno tre punti fa il lavoro che farebbe la luce.

- Nero corvino: #0a0a0a
- Nero caldo: #1a1408
- Ombra di bronzo: #5c4813
- Oro antico: #8a6d1f
- Verga d’oro scuro: #b8860b
- Oro metallico: #d4af37
- Miele: #e6c76a
- Champagne: #f3e5ab

Due neri e sei ori. Un metallo convincente usa almeno tre ori di questa scala, mai uno solo.

## Codici del gradiente oro metallico

Questi sono i riempimenti d’oro veri e propri: per un filetto, un badge, un monogramma o un testo con gradiente. Ognuno va da scuro a chiaro a scuro, ed è ciò che dà l’impressione di una superficie curva e lucida che cattura la luce.

- Oro lucido: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Oro illuminato dall’alto: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Barra antica: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Champagne spazzolato: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Riempimenti d’oro metallico. La simmetria, scuro alle due estremità e chiaro al centro, è ciò che si legge come superficie curva.

## Sfondi con gradiente nero e oro

Per uno sfondo, inverti le proporzioni: il nero fa quasi tutto il lavoro e l’oro arriva come un bagliore, un orizzonte o un tenue calore in un angolo. Un nero caldo, con un accenno di marrone, sta meglio con l’oro di un nero puro o bluastro.

- Luce dorata nell’angolo: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Orizzonte d’oro: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Luci della ribalta: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Bordo dorato: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Sfondi nero e oro. In ognuno l’oro copre ben meno di un quarto dell’inquadratura.

I gradienti scuri fanno più banding di ogni altro tipo, e un bagliore dorato sul nero è quasi il caso peggiore. Uno strato di grana fine lo risolve e, per di più, fa sembrare la superficie carta o velluto. Altri fondi sono nei [gradienti neri](https://gradiently.design/it/guide/black-gradient).

## Come mantenere di buon gusto il nero e oro

### Sembra dozzinale

- Oro giallo piatto come `#ffd700`
- Oro che copre metà del design
- Aloni dorati dietro ogni parola
- Oro su nero bluastro puro
- Corsivo ornato, oro e smussature tutti insieme

### Sembra costoso

- Oro costruito con tre o più punti
- Oro in un solo punto: una luce, un filetto o il nome
- Testo semplice e ben spaziato, senza effetti
- Oro su nero caldo
- Un solo carattere elegante, margini generosi

La sobrietà è tutto il trucco. Le confezioni di lusso tendono a mostrare molto spazio scuro vuoto e una piccola quantità di metallo, così il metallo appare prezioso. Lo stesso vale sullo schermo. [Le palette di colori di lusso](https://gradiently.design/it/guide/luxury-color-palettes) e [il design di lusso](https://gradiently.design/it/guide/luxury-design) trattano il linguaggio più ampio.

## Testo oro su un gradiente nero

L’oro si legge bene sul nero. I valori qui sotto usano la formula di contrasto WCAG; 4,5:1 è il minimo abituale per il testo piccolo e 3:1 per i titoli grandi. Tieni gli ori antichi più scuri per filetti e bordi, non per le parole.

| Sfondo | Testo | Contrasto | Usalo per |
| --- | --- | --- | --- |
| Nero corvino `#0a0a0a` | Oro metallico `#d4af37` | 9,4:1 | Titoli e righe brevi |
| Nero corvino `#0a0a0a` | Verga d’oro scuro `#b8860b` | 6,1:1 | Sottotitoli, etichette |
| Nero caldo `#14110a` | Oro `#c9a227` | 7,8:1 | Titoli |
| Nero caldo `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Testo del corpo |
| Nero corvino `#0a0a0a` | Oro antico `#8a6d1f` | 4,0:1 | Solo testo grande o filetti |

Per i testi lunghi, lo champagne si legge più comodamente dell’oro saturo.

Il testo con gradiente metallico funziona per una sola parola o un nome breve. Il CSS qui sotto ritaglia il gradiente d’oro lucido sulle lettere e mantiene un oro pieno di riserva. [Il testo con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text) tratta l’aspetto dell’accessibilità.

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

Una sezione nero caldo con una tenue luce dorata, testo champagne e un titolo in oro lucido.

Un post verticale di gioielleria con lettere oro pallido su sfondo nero caldo e un tenue bagliore dorato in un angolo

Il post di un gioielliere: nero caldo, una luce dorata, testo semplice.

Una storia verticale di Capodanno con lettere champagne su nero che sfuma in un orizzonte d’oro in basso

Una storia di Capodanno con un orizzonte d’oro in basso.

## Nero e oro in stampa

La normale stampa a quattro colori non può riprodurre il metallo. Un gradiente d’oro stampato in CMYK esce come un giallo brunastro, per quanto con cura lo costruisci. Per inviti, biglietti da visita e confezioni dove l’oro conta, usa la stampa a caldo con lamina o un inchiostro metallico per le parti in oro e tieni il gradiente per lo schermo. [I gradienti in stampa](https://gradiently.design/it/guide/print-gradients) spiega le opzioni, e [RGB e CMYK](https://gradiently.design/it/guide/rgb-vs-cmyk) spiega perché schermi e carta differiscono.

## Dove usare il nero e oro

Il nero e oro si adatta a gioielli, orologi, profumi, distillati, hotel, barbieri, eventi in cravatta nera e Capodanno. Sta bene anche con i rossi vino profondi; vedi i [gradienti bordeaux](https://gradiently.design/it/guide/maroon-gradient). Se vuoi un look scuro e caldo solo tuo, un Mark di Gradiently è una ricetta di colori, materiali, luce e grana più che un riempimento piatto. Ogni Mark ha un solo proprietario alla volta, e una volta che ne riservi uno, un concorrente non può esportarlo.

## FAQ

### Qual è il codice esadecimale dell’oro metallico?

Un oro metallico molto usato è `#d4af37`. Per un metallo convincente, abbinalo in un gradiente a un bronzo scuro come `#8a6d1f` e a un riflesso pallido come `#f3e5ab`.

### Come faccio un gradiente oro in CSS?

Usa un gradiente lineare simmetrico che va da scuro a chiaro, riflesso, chiaro, scuro, per esempio `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Il testo oro su nero è leggibile?

Sì. L’oro metallico `#d4af37` su quasi nero raggiunge un contrasto di circa 9:1. Per i brani lunghi, un oro champagne più pallido si legge più comodamente.

### Perché il mio design nero e oro sembra dozzinale?

Di solito perché l’oro è un solo giallo piatto, ce n’è troppo, oppure ha bagliori e smussature. Costruisci l’oro con più punti e usalo in un solo posto.

### Posso stampare un gradiente nero e oro?

Puoi, ma l’oro in CMYK appare giallo brunastro, non metallico. Usa lamina o inchiostro metallico per l’oro che deve brillare.