# Dégradé or : codes pour un or métallique réaliste

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

La plupart des ors numériques ressemblent à du jus d’orange ou à de la moutarde. Le vrai or est surtout une ombre brune, un peu d’ocre et un éclair de lumière pâle. Voici des codes qui y parviennent, et pourquoi ils marchent.

## The short version

- Un dégradé or réaliste va d’une ombre brun profond à un ton moyen ocre atténué puis à un reflet crème pâle, avant de retomber dans l’ombre.
- L’or paraît orange quand ses couleurs sont trop saturées et trop rouges, et paraît d’un jaune plat quand il manque d’ombre sombre et de reflet presque blanc.
- L’or métallique repose sur le contraste : les arrêts les plus sombre et le plus clair doivent être très éloignés en luminosité, avec un reflet étroit.
- En CSS, le texte or est un dégradé linéaire or découpé aux lettres avec background-clip: text.
- L’or paraît le plus précieux employé avec parcimonie, sur un fond sombre comme le noir, le bleu marine ou le vert profond.

Un **dégradé or** ressemble à du vrai métal quand il couvre une large plage de luminosité : une ombre brun profond, un milieu ocre atténué, un étroit reflet crème pâle, puis retour au brun. Le code classique pour partir : `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. La plupart des dégradés or échouent parce qu’ils emploient deux jaunes et orange vifs sans vraie ombre ni vrai reflet, et se lisent comme de la peinture orange plutôt que du métal.

## Des codes de dégradé or à copier

- Or classique: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)`
- Or champagne: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)`
- Or rose: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)`
- Or antique: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)`
- Feuille d’or éclatante: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)`
- Lumière dorée sur noir: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)`

Six ors, chacun avec une ombre sombre et un étroit reflet clair. Les cinq premiers servent aux textes, bordures et formes ; le dernier est un fond.

- Bronze d’ombre: #5c3d12
- Ocre profond: #7a5418
- Vieil or: #b8862b
- Or métallique: #c79a3c
- Reflet pâle: #f3dc9a
- Crème spéculaire: #fff6dc

Les codes couleur de l’or derrière Or classique, de l’ombre au reflet, plus une crème spéculaire à n’employer qu’en filet, voire pas du tout.

## Pourquoi votre dégradé or paraît orange

À l’écran, l’or est une illusion faite de contraste. Il n’y a aucun pixel d’or, seulement des bruns et des jaunes disposés pour que l’œil lise une surface réfléchissante. Quand quelque chose cloche, c’est généralement de l’une de ces quatre façons.

| Il paraît | Pourquoi | Correction |
| --- | --- | --- |
| Orange | Tons moyens trop rouges et trop saturés | Décalez les teintes vers le jaune ocre et baissez la saturation |
| Jaune plat | Ni ombre sombre, ni reflet pâle | Ajoutez un arrêt brun près des extrémités et un arrêt crème au milieu |
| Brun ou boueux | Reflet trop sombre, trop d’arrêts ternes | Éclaircissez le reflet près de la crème et resserrez les zones sombres |
| Verdâtre | Jaunes trop froids, ombres trop grises | Réchauffez les ombres vers le brun plutôt que l’olive ou le gris |

Les quatre échecs classiques de l’or et comment corriger chacun.

Le problème de l’orange est le plus courant, car le jaune choisi dans un sélecteur de couleur paraît souvent trop pâle, si bien qu’on le réchauffe. Résistez : gardez la teinte du ton moyen autour de l’ocre, à peu près là où le jaune rencontre le brun, et laissez le contraste fournir l’éclat. Si c’est un simple fondu chaud que vous voulez vraiment, [le dégradé jaune](https://gradiently.design/fr/guide/yellow-gradient) et [le dégradé orange](https://gradiently.design/fr/guide/orange-gradient) les traitent directement.

## Comment éclairer l’or pour qu’il paraisse réel

1. **Partez de l’ombre** Choisissez un brun chaud et profond. Il doit être assez sombre pour qu’un texte blanc s’y lise.
2. **Ajoutez un seul ton moyen atténué** Un or ocre, légèrement désaturé. C’est la couleur dont on se souviendra : l’essentiel de la surface se tient ici.
3. **Placez un reflet étroit** Une crème pâle en bande fine, décentrée. Plus il est étroit, plus le métal paraît brillant.
4. **Revenez à l’ombre** Retombez sur un ocre plus sombre après le reflet, pour que la lumière se lise comme un reflet sur une surface courbe.
5. **Ajoutez un second reflet, plus faible** Facultatif : un éclaircissement plus doux vers l’autre extrémité, comme si une seconde lumière accrochait le bord. Il arrondit les formes plates.

L’or reflète comme tout métal poli : la même logique que [l’effet texte chrome](https://gradiently.design/fr/guide/chrome-effect) s’applique, en plus chaud et avec des transitions plus douces. Les dégradés or aux longues transitions subtiles peuvent montrer du banding après compression ; [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) explique comment un grain fin l’évite.

## Texte or en CSS

```css
.gold {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #c79a3c; /* fallback */
  background: linear-gradient(
    135deg,
    #5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
    #c79a3c 58%, #7a5418 80%, #d6b062 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-rule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}
```

Un titre en or et un fin séparateur doré. La couleur de repli s’affiche partout où le découpage par dégradé n’est pas pris en charge.

Les dégradés or vont bien aux serif et aux polices à fort contraste en grande taille. En dessous d’environ 24 pixels, l’ombre et le reflet se fondent en un brun uniforme : composez donc le petit texte dans un ton or uni comme `#c79a3c`, et vérifiez son contraste avec le fond. [Le texte en dégradé](https://gradiently.design/fr/guide/css-gradient-text) détaille la prise en charge de la technique de découpage par les navigateurs.

## Les dégradés or à l’impression

Un dégradé or est une image de métal, pas du métal. Imprimé en quadrichromie ordinaire, il donne des bruns et des jaunes qui suggèrent l’éclat, très bien pour des flyers et des affiches mais jamais vraiment réfléchissant. Pour les invitations, cartes de visite et emballages où le vrai éclat compte, les imprimeurs emploient des encres métalliques ou la dorure à chaud, et vous fournissez la zone dorée comme une forme plate séparée dans le fichier.

Si vous imprimez un dégradé, attendez-vous à un résultat un peu plus sombre et moins vif qu’à l’écran. Éclaircissez un peu le reflet, évitez les très longues transitions subtiles qui peuvent former des bandes, et demandez une épreuve avant un gros tirage.

## Créer avec l’or

L’or paraît précieux quand il est rare. Une fine bordure, un monogramme, un mot dans un titre, un filet de séparation : sur un fond sombre de noir, de bleu marine, de sang de bœuf ou de vert profond. Couvrez toute une affiche d’or et elle vire au cuivré. [Le dégradé noir et or](https://gradiently.design/fr/guide/black-and-gold-gradient) propose des associations pour la combinaison la plus classique, et [le design de marque de luxe](https://gradiently.design/fr/guide/luxury-design) montre comment l’or s’intègre à une identité retenue.

Une invitation de gala portrait sur un fond sombre avec une lumière dorée chaude et du texte crème

Une invitation de 5×7 pouces : un fond sombre à la lumière métallique chaude, et des mots composés en crème apaisée.

Une publication de bijoux portrait avec une courte ligne sur une surface profonde touchée de lumière dorée

Une publication de bijoux où l’or n’apparaît que comme lumière sur la surface, jamais comme un grand aplat.

Pour un style chaud qui vit derrière chaque création au lieu d’être refait à chaque fois, cherchez dans le Marché de Gradiently avec des mots de couleur comme « or chaud » ou « bronze ». Chaque Mark est un arrière-plan vivant avec lumière et grain, qui ne peut avoir qu’un propriétaire à la fois et garde sa zone la plus calme derrière vos mots à chaque taille.

## FAQ

### Quel est le meilleur code de dégradé or ?

Un bon point de départ est `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)` : ombre brune, ton moyen ocre, reflet pâle et retour à l’ombre.

### Quels codes hex donnent un or métallique ?

Combinez un bronze sombre comme #5c3d12, un vieil or comme #b8862b, un or métallique comme #c79a3c et un reflet pâle comme #f3dc9a.

### Pourquoi mon dégradé or paraît-il orange ?

Les tons moyens sont trop rouges et saturés. Décalez-les vers le jaune ocre, baissez la saturation et ajoutez une ombre brun foncé et un reflet crème pâle pour le contraste.

### Comment faire du texte or en CSS ?

Appliquez un dégradé linéaire or en fond, puis utilisez `background-clip: text` et `-webkit-text-fill-color: transparent`, avec une `color` or unie en repli.

### Quelle couleur va le mieux avec l’or ?

Le noir, le bleu marine, le vert profond, le sang de bœuf et la crème chaude. Les fonds sombres font paraître l’or plus brillant et plus précieux.