In breve
- 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.
In questa pagina
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.
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.
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.
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.
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 e il design di lusso 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.
#0a0a0aTesto
#d4af37Contrasto
Usalo per
#0a0a0aTesto
#b8860bContrasto
Usalo per
#14110aTesto
#c9a227Contrasto
Usalo per
#1a1408Testo
#f3e5abContrasto
Usalo per
#0a0a0aTesto
#8a6d1fContrasto
Usalo per
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 tratta l’aspetto dell’accessibilità.
.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;
}Il post di un gioielliere: nero caldo, una luce dorata, testo semplice.
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 spiega le opzioni, e RGB e 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. 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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo