L’essentiel en bref
- 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.
Sur cette page
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
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.
Correction
Pourquoi
Correction
Pourquoi
Correction
Correction
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 et le dégradé orange 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 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 explique comment un grain fin l’évite.
Texte or en 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);
}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é 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 propose des associations pour la combinaison la plus classique, et le design de marque de luxe montre comment l’or s’intègre à une identité retenue.
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 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.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil