# Dégradé orange : 25 codes chauds, de la pêche au brûlé

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

L’orange est l’une des couleurs les plus chaudes de l’écran, et l’une des plus faciles à rater. Voici 25 fondus à copier, rangés par ambiance, avec les associations et les règles de typographie qui les font marcher.

## The short version

- Un dégradé orange se lit chaleureux, amical et énergique, et son ambiance change nettement selon que les oranges sont clairs ou foncés.
- L’orange se fond proprement vers ses voisines : jaune, ambre, rouge, rose et brun.
- Fondre l’orange directement dans du bleu ou du turquoise donne généralement un milieu gris ou boueux : gardez plutôt les couleurs complémentaires comme accent séparé.
- Le texte blanc échoue au contraste sur un orange vif comme #f97316 ; utilisez-y un texte presque noir ou brun profond, ou déplacez le texte blanc sur un orange brûlé ou plus foncé.
- Les fonds sombres avec une seule lumière orange paraissent haut de gamme, tandis que les fondus pêche pâle conviennent aux marques douces et quotidiennes.

Un **dégradé orange** fond deux oranges ou plus, souvent avec un jaune, un rouge ou un rose voisin, et peu de fondus paraissent aussi chauds. Les versions pêche clair et abricot sont douces et accueillantes, la mandarine vive est bruyante et joueuse, et l’orange brûlé ou la rouille est terreux et adulte. Voici 25 codes rangés selon ces ambiances, puis ce qu’on peut leur associer et comment composer du texte dessus sans perdre vos mots.

## Dégradés orange doux : pêche et abricot

Les oranges pâles sont la porte d’entrée la plus amicale dans cette couleur. Ils évoquent la peau, le pain et la lumière de fin d’après-midi, d’où leur usage par les boulangeries, les soins de la peau et les marques pour enfants. Gardez l’arrêt le plus clair presque crème, pour que le fondu ait un endroit calme où se poser. Pour un article entier sur l’extrémité la plus pâle, voyez [les dégradés pêche](https://gradiently.design/fr/guide/peach-gradient).

- De la crème à l’abricot: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Abricot doux: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Peau de pêche: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Lueur du matin: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Du beurre au melon: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Cinq dégradés orange pâles. Chacun part près de la crème, si bien qu’il reste toujours une zone calme pour du texte sombre.

## Dégradés orange vifs : mandarine et agrumes

L’orange saturé est de l’énergie pure. Il convient aux soldes, à la livraison de repas, au sport, aux festivals et à tout ce qui doit se remarquer à la taille d’une miniature. Le risque, c’est qu’un orange vif s’aplatisse en un bloc criard : donnez-lui un arrêt plus clair vers le jaune ou plus profond vers le rouge. Ce petit décalage fait paraître de la lumière plutôt que de la peinture.

- Mandarine: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Éclat d’agrumes: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- De l’orange à la pastèque: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Point chaud: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- De l’orange au citron: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Les oranges vifs marchent mieux avec un arrêt qui penche vers le jaune ou le rose. Le fondu se lit alors comme de la lumière, pas comme un aplat.

## Dégradés orange coucher de soleil et ambre

Faire courir l’orange à la verticale, de l’or en haut au rouge ou à la prune en bas, donne un coucher de soleil, probablement le dégradé le plus familier qui soit. Les fondus ambrés sont leur cousin plus discret : miel, marmelade et whisky, riches sans crier. Pour le traitement complet du ciel, [les dégradés de coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient) va plus loin.

- Coucher de soleil classique: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Crépuscule: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Ambre miel: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Marmelade: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Dernière lumière: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

Les fondus verticaux se lisent comme un ciel. Mettez la couleur la plus claire en haut et celle de l’horizon plus bas.

## Dégradés orange brûlé et rouille

Poussez l’orange vers le brun et il devient terracotta, rouille et cuivre : les couleurs des pots d’argile, des feuilles d’automne et du vieux cuir. Elles paraissent travaillées et réfléchies, et conviennent à la décoration, au café, à la céramique, aux marques d’outdoor et à tout ce qui a une histoire faite main. Elles portent aussi bien mieux le texte blanc que l’orange vif.

- Orange brûlé: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terracotta: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Cuivre: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Rouille: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- De l’argile à l’écorce: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Les oranges brûlés sont proches du brun. Ils sont plus calmes, plus chauds et meilleurs derrière du texte blanc.

## Lumière orange sur fond sombre

La façon la plus haut de gamme d’employer l’orange est d’en user avec parcimonie. Partez d’un quasi-noir, d’un brun profond ou d’un bleu marine, et laissez un orange rayonner d’un coin comme une braise ou un réverbère. C’est le traitement pour les événements de nuit, les restaurants, la musique et tout ce qui doit paraître chaleureux après la tombée de la nuit. Les fondus sombres forment facilement des bandes : lisez [les arrière-plans en dégradé sombre](https://gradiently.design/fr/guide/dark-gradient-backgrounds) avant d’exporter.

- Braise: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Au coin du feu: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Réverbère sur marine: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Charbon et cuivre: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Lueur d’horizon: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Une lumière orange, beaucoup de sombre. Le fond fait l’ambiance ; l’orange n’a qu’à rayonner.

## Les couleurs qui s’accordent à un dégradé orange

L’orange a deux sortes de bons partenaires. Les voisines comme le jaune, le rose et le rouge s’y fondent directement. Les opposées comme le bleu profond et le turquoise le font vibrer, mais elles doivent se placer à côté de l’orange comme accent, pas dans le même fondu, car le point médian entre elles vire au gris. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) explique pourquoi, et [les couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) montre comment employer cette attraction sans risque.

- Crème: #fff7ed
- Abricot: #fdba74
- Mandarine: #f97316
- Rouille: #9a3412
- Encre écorce: #431407
- Accent bleu profond: #1e3a8a
- Accent turquoise: #0f766e

Une palette orange qui marche : un fond crème, trois oranges, un brun foncé pour le texte et deux accents froids tenus à l’écart du fondu.

## Le texte sur les dégradés orange

C’est là que la plupart des designs orange échouent. Le blanc sur la mandarine vive paraît audacieux mais offre un rapport de contraste d’environ 2,8 pour 1, bien en dessous des 4,5 pour 1 que demande WCAG pour le texte courant. Un texte presque noir sur le même orange dépasse 6 pour 1. La règle est simple : texte sombre sur les oranges clairs et vifs, texte blanc seulement à partir de l’orange brûlé. La méthode complète figure dans [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

| Fond | Texte blanc | Texte sombre #1c1917 |
| --- | --- | --- |
| Abricot `#fdba74` | Échoue | Passe sans peine |
| Mandarine `#f97316` | Environ 2,8:1, échoue | Environ 6,2:1, passe |
| Orange profond `#ea580c` | Environ 3,6:1, grand texte seulement | Passe |
| Orange brûlé `#c2410c` | Environ 5,2:1, passe | Faible |
| Rouille `#9a3412` | Environ 7,3:1, passe | Échoue |

Contraste mesuré sur une couleur plate. Sur un dégradé, testez le point le plus clair derrière vos mots.

Une publication de soldes de boulangerie avec un dégradé orange chaud directement derrière le titre, difficile à lire

Quand l’orange le plus vif passe juste derrière le titre, les mots se mettent à lutter contre la couleur.

La même publication de soldes de boulangerie avec une zone plus calme et plus profonde du dégradé derrière un titre net

La même publication avec une zone plus calme derrière les mots et la couleur du texte choisie pour elle.

Gradiently s’occupe de cette partie pour vous. Un Mark sait où sont les mots : il place sa zone la plus calme derrière eux et l’encre automatique choisit un texte clair ou foncé ligne par ligne à partir de la palette du Mark, si bien qu’un design orange reste lisible à chaque taille, sans cadres ni ombres.

## Dégradé orange en CSS

Chaque code ci-dessus est une seule valeur CSS que vous pouvez coller dans `background`. Pour une section qui demande à la fois chaleur et profondeur, superposez une lumière radiale à une base linéaire, et définissez toujours une couleur de repli unie. Lisez [les dégradés linéaires CSS](https://gradiently.design/fr/guide/css-linear-gradient) pour la syntaxe complète.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Une lumière abricot vive sur une base de mandarine à rouille. Placez le titre en bas à gauche, là où la couleur est la plus profonde.

Si vous voulez un style orange que personne d’autre ne publie, parcourez le Marché à la recherche de Marks chauds : cherchez des mots comme « orange brûlé » ou « abricot », créez gratuitement avec n’importe lequel non réservé, et réservez-le s’il devient votre marque.

## FAQ

### Quelles couleurs vont bien avec un dégradé orange ?

Le jaune, le rose, le rouge et le brun se fondent directement dans l’orange. Le bleu profond et le turquoise font de forts accents, mais gardez-les à côté de l’orange plutôt que dans le même fondu.

### Quel est le code hex de l’orange brûlé ?

Il n’existe pas de code officiel unique, mais `#c2410c` et `#cc5500` sont tous deux très employés. Un dégradé orange brûlé comme `linear-gradient(135deg, #ea580c, #9a3412)` lui donne de la profondeur.

### Puis-je mettre du texte blanc sur un dégradé orange ?

Seulement sur les oranges plus foncés. Le blanc sur la mandarine vive échoue au contraste : utilisez-y du presque noir et gardez le texte blanc pour l’orange brûlé, la rouille et plus foncé.

### Pourquoi mon dégradé orange et bleu paraît-il gris au milieu ?

L’orange et le bleu sont opposés sur le cercle chromatique, si bien que les couleurs entre eux perdent leur saturation. Ajoutez un arrêt rose ou violet entre les deux, ou gardez-les en zones séparées.

### Que dit un dégradé orange d’une marque ?

L’orange se lit généralement chaleureux, amical, joueur et abordable. Les versions plus sombres, brûlées, tirent cela vers l’artisanat et l’assurance.