# Dégradés noir et or : codes de luxe avec goût

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

Le noir et or est le raccourci du luxe, et la palette la plus facile à rendre bon marché. La différence tient presque toujours à la façon dont l’or est construit et au peu qu’on en utilise.

## The short version

- Un dégradé noir et or associe un fond quasi noir à un or construit en plusieurs arrêts, typiquement un bronze sombre, un or chaud comme #d4af37 et un reflet pâle comme #f3e5ab.
- L’or uni ressemble à de la moutarde à l’écran, car l’or véritable ne se lit comme du métal que lorsque lumière et ombre le parcourent.
- Le noir et or paraît le plus cher quand l’or couvre une petite partie du design, comme une lumière sur un bord, un filet ou la typographie.
- Un texte doré comme #d4af37 sur quasi noir atteint environ 9:1 de contraste : il est donc lisible pour les titres et les lignes courtes.
- L’or imprimé avec des encres ordinaires n’a jamais l’air métallique : utilisez une dorure ou une encre métallique quand le vrai rendu compte.

Un **dégradé noir et or** oppose un fond quasi noir à un or construit en plusieurs arrêts plutôt qu’en une couleur unie : un bronze sombre comme `#8a6d1f`, un or chaud comme `#d4af37` et un reflet pâle comme `#f3e5ab`. C’est cette variation qui fait lire l’or comme du métal. Les versions de bon goût utilisent aussi beaucoup moins d’or qu’on ne le croit, souvent juste un halo sur un bord ou la typographie elle-même. Voici les codes, le CSS du texte en or métallique et les règles qui gardent ce duo chic.

## Pourquoi l’or uni fait bon marché

L’or n’est pas vraiment une couleur ; c’est une matière. Ce que vous reconnaissez comme de l’or est un motif de reflets : brun olive sombre dans les ombres, jaune chaud dans les tons moyens, presque blanc là où la lumière frappe. Une seule valeur hex n’en capture qu’un : un `#ffd700` uni se lit donc comme du jaune ou de la moutarde plutôt que comme du métal. Un dégradé d’au moins trois arrêts fait le travail que ferait la lumière.

- Noir de jais: #0a0a0a
- Noir chaud: #1a1408
- Ombre de bronze: #5c4813
- Or ancien: #8a6d1f
- Jaune d’or sombre: #b8860b
- Or métallique: #d4af37
- Miel: #e6c76a
- Champagne: #f3e5ab

Deux noirs et six ors. Un métal convaincant utilise au moins trois ors de cette rampe, jamais un seul.

## Codes de dégradé or métallique

Voici les remplissages d’or eux-mêmes : pour un filet, un badge, un monogramme ou un texte en dégradé. Chacun va du sombre au clair puis au sombre, ce qui donne l’impression d’une surface polie et courbe qui capte la lumière.

- Or poli: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`
- Or éclairé par le haut: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)`
- Barre ancienne: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)`
- Champagne brossé: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)`

Remplissages d’or métallique. La symétrie, sombre aux deux bouts et clair au milieu, est ce qui se lit comme une surface courbe.

## Fonds de dégradé noir et or

Pour un fond, inversez les proportions : le noir fait presque tout le travail et l’or arrive comme un halo, un horizon ou une chaleur discrète dans un coin. Un noir chaud, avec une pointe de brun, s’accorde mieux à l’or qu’un noir pur ou bleuté.

- Lumière dorée dans le coin: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)`
- Horizon doré: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)`
- Rampe de scène: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)`
- Bord doré: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)`

Fonds noir et or. Dans chacun, l’or couvre bien moins d’un quart du cadre.

Les dégradés sombres montrent plus de banding que tous les autres, et un halo d’or sur noir est à peu près le pire cas. Une couche de grain fin règle le problème et, en prime, donne à la surface l’air du papier ou du velours. D’autres fonds figurent dans les [dégradés noirs](https://gradiently.design/fr/guide/black-gradient).

## Comment garder le noir et or de bon goût

### Fait bon marché

- Or jaune uni comme `#ffd700`
- De l’or sur la moitié du design
- Des halos d’or derrière chaque mot
- De l’or sur un noir bleuté pur
- Écriture ornée, or et biseaux tout à la fois

### Fait cher

- Un or construit en trois arrêts ou plus
- De l’or à un seul endroit : une lumière, un filet ou le nom
- Une typographie simple et bien espacée, sans effets
- De l’or sur noir chaud
- Une seule typographie élégante, des marges généreuses

La retenue est tout le secret. Les emballages de luxe montrent beaucoup d’espace sombre vide et un peu de métal : le métal paraît ainsi précieux. Il en va de même à l’écran. Les [palettes de couleurs luxe](https://gradiently.design/fr/guide/luxury-color-palettes) et le [design de luxe](https://gradiently.design/fr/guide/luxury-design) couvrent le langage plus large.

## Du texte doré sur un dégradé noir

L’or se lit bien sur le noir. Les chiffres ci-dessous utilisent la formule de contraste WCAG ; 4,5:1 est le minimum habituel pour le petit texte et 3:1 pour les grands titres. Gardez les ors anciens plus sombres pour les filets et les bordures, pas pour les mots.

| Fond | Texte | Contraste | À utiliser pour |
| --- | --- | --- | --- |
| Noir de jais `#0a0a0a` | Or métallique `#d4af37` | 9,4:1 | Titres et lignes courtes |
| Noir de jais `#0a0a0a` | Jaune d’or sombre `#b8860b` | 6,1:1 | Sous-titres, étiquettes |
| Noir chaud `#14110a` | Or `#c9a227` | 7,8:1 | Titres |
| Noir chaud `#1a1408` | Champagne `#f3e5ab` | 14,5:1 | Corps du texte |
| Noir de jais `#0a0a0a` | Or ancien `#8a6d1f` | 4,0:1 | Grand texte ou filets seulement |

Pour un texte long, le champagne se lit plus confortablement que l’or saturé.

Le texte en dégradé métallique convient à un mot isolé ou à un nom court. Le CSS ci-dessous découpe le dégradé d’or poli aux lettres et garde un or uni en secours. Le [texte en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-text) couvre l’aspect 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;
}
```

Une section noir chaud avec une faible lumière dorée, un texte courant champagne et un titre en or poli.

Une publication de joaillerie verticale avec un lettrage or pâle sur un fond noir chaud avec une faible lueur dorée dans un coin

Une publication de joaillier : noir chaud, une lumière dorée, une typographie simple.

Une story verticale de réveillon avec un lettrage champagne sur du noir se fondant en horizon doré en bas

Une story de réveillon avec un horizon doré en bas.

## Le noir et or à l’impression

L’impression quadrichromie ordinaire ne peut pas reproduire le métal. Un dégradé d’or imprimé en CMJN donne un jaune brunâtre, aussi soigneusement qu’on le construise. Pour les invitations, cartes de visite et emballages où l’or compte, utilisez une dorure à chaud ou une encre métallique pour les parties dorées et gardez le dégradé pour l’écran. Les [dégradés à l’impression](https://gradiently.design/fr/guide/print-gradients) expliquent les options, et [RVB ou CMJN](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique pourquoi écrans et papier diffèrent.

## Où utiliser le noir et or

Le noir et or convient à la joaillerie, aux montres, aux parfums, aux spiritueux, aux hôtels, aux barbiers, aux soirées de gala et au Nouvel An. Il s’associe aussi bien aux rouges lie-de-vin profonds ; voir les [dégradés bordeaux](https://gradiently.design/fr/guide/maroon-gradient). Si vous voulez un look sombre et chaud qui n’appartienne qu’à vous, un Mark de Gradiently est une recette de couleurs, de matières, de lumière et de grain plutôt qu’un aplat. Chaque Mark a un seul propriétaire à la fois, et une fois que vous en avez réservé un, un concurrent ne peut pas l’exporter.

## FAQ

### Quel est le code hex de l’or métallique ?

Un or métallique très utilisé est `#d4af37`. Pour un métal convaincant, combinez-le dans un dégradé avec un bronze sombre comme `#8a6d1f` et un reflet pâle comme `#f3e5ab`.

### Comment faire un dégradé or en CSS ?

Utilisez un dégradé linéaire symétrique qui va du sombre au clair, au reflet, puis revient au clair et au sombre, par exemple `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`.

### Le texte doré sur noir est-il lisible ?

Oui. L’or métallique `#d4af37` sur quasi noir atteint environ 9:1 de contraste. Pour les longs passages, un or champagne plus pâle se lit plus confortablement.

### Pourquoi mon design noir et or fait-il bon marché ?

Généralement parce que l’or est un simple jaune uni, qu’il y en a trop, ou qu’il porte des halos et des biseaux. Construisez l’or en plusieurs arrêts et utilisez-le à un seul endroit.

### Puis-je imprimer un dégradé noir et or ?

Oui, mais l’or CMJN donne un jaune brunâtre, pas métallique. Utilisez une dorure ou une encre métallique pour un or qui doit briller.