# Dégradé corail : codes vifs entre rose et orange

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

Le corail vit exactement là où le rose devient orange : la chaleur de l’un, le charme de l’autre. Vif, amical et étonnamment difficile à habiller de texte. Voici les codes et les remèdes.

## The short version

- Un dégradé corail fond des oranges chauds teintés de rose, penchant vers le rose d’un côté et vers la mandarine ou la pêche de l’autre.
- La couleur CSS nommée coral vaut #ff7f50, un corail vif penchant vers l’orange.
- Le corail et la sarcelle sont presque opposés : un fondu direct entre eux vire au gris ; employez plutôt la sarcelle comme zone séparée ou comme accent.
- Le texte blanc échoue sur un corail vif ; prenez un lie-de-vin ou un brun profond comme #3b0d0c, ou placez le texte blanc sur un corail rouge profond.
- Le corail convient aux campagnes d’été, à la restauration, à la beauté, au sport et aux applis grand public conviviales.

Un **dégradé corail** fond des oranges chauds teintés de rose, les couleurs où le rose devient orange. Penchez-le vers le rose et il paraît charmant et frais ; penchez-le vers la mandarine et il paraît ensoleillé et énergique. Le corail est joyeux et très visible, d’où sa faveur pour l’été, la restauration, la beauté et le sport. Ses deux pièges : une bande grise quand il rencontre la sarcelle et un texte qui s’y perd. Tous deux s’évitent facilement quand on les connaît.

## Corail, saumon, pêche et pastèque

Les oranges chauds teintés de rose partagent beaucoup de noms. Il vaut la peine de les distinguer, car le bon mot aide à choisir les bons arrêts et à décrire ce que vous voulez à un designer ou au Designer de Gradiently.

| Couleur | Hex typique | Caractère |
| --- | --- | --- |
| Corail | `#ff7f50` | Vif et chaud, penchant vers l’orange |
| Corail vivant | `#ff6f61` | Corail plus rose et plus doux |
| Saumon | `#fa8072` | Plus pâle et plus rose, un peu poudré |
| Pêche | `#ffcba4` | Bien plus clair, plus orangé, tendre |
| Pastèque | `#fb7185` | Plus rose et plus froid, joueur |

Le corail est le plus vif de ces tons. Ses voisins sont de précieux arrêts dans un dégradé corail.

## Dégradés corail vifs

C’est le corail à son plus vivant. Ils retiennent l’attention en taille de vignette, d’où leur efficacité pour les posts de soldes, les lancements, les cours de sport et tout ce que vous voulez faire remarquer dans un fil chargé.

- Corail classique: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Corail vivant: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Punch tropical: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Floraison corail: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Coucher de soleil corail: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Cinq fondus corail vifs. Chaque couleur partenaire est une proche voisine : les fondus restent saturés.

Quelques façons de les mettre au travail : « Corail classique » derrière une seule ligne comme « Ouverture à midi » sur une story 1080×1920 ; « Punch tropical » en couverture d’une carte de boissons d’été ; « Coucher de soleil corail » qui descend sur une épingle Pinterest de 1000×1500 pour un guide de vacances. Le corail est fort : laissez-le remplir le cadre et gardez tout le reste simple : un titre, un détail, beaucoup d’espace.

## Dégradés corail du rose à l’orange

### Corail penchant vers le rose

Poussez le corail vers le rose et le rose poudré : il devient plus doux et plus romantique, idéal pour la beauté, les fleuristes, les mariages et les marques lifestyle. Pour le côté plus rose de la famille, voir [les dégradés roses](https://gradiently.design/fr/guide/pink-gradient).

- Corail rosé: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Saumon poudré: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Corail pastèque: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Les coraux penchant vers le rose paraissent plus doux et conviennent à la beauté et au lifestyle.

### Corail penchant vers l’orange

Poussez-le dans l’autre sens, vers l’abricot et la mandarine, et le corail devient plus ensoleillé et plus fort : menus d’été, bars à smoothies, vacances. [Les dégradés orange et rose](https://gradiently.design/fr/guide/orange-pink-gradient) couvrent toute l’étendue entre les deux.

- Corail abricot: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Du corail à la mandarine: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Bar de plage: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Les coraux penchant vers l’orange sont plus ensoleillés, plus énergiques et faits pour l’été.

## Corail et sarcelle sans milieu gris

Le corail et la sarcelle forment l’un des grands duos : chaud contre froid, récif contre mer. Mais ils sont presque opposés sur le cercle chromatique : un fondu direct entre eux traverse un gris terne au milieu. Le remède est de les garder séparés. Employez la sarcelle en fond avec une lumière corail, le corail en fond avec un accent sarcelle, ou passez de l’un à l’autre par des teintes très pâles. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) expliquent pourquoi le milieu devient gris.

- À éviter : le milieu gris: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Soleil corail sur sarcelle: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Par le blanc coquillage: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

Le premier fondu grisaille au milieu. Les deux autres gardent le corail et la sarcelle comme couleurs séparées, ou les joignent par une teinte pâle.

Sur un menu ou une affiche, essayez une sarcelle très sombre comme `#042f2e` avec des titres et des boutons corail. Le corail y atteint environ 5,8 pour 1, bien mieux que du blanc sur corail, et le rendu est audacieux et estival. Le côté sarcelle est traité dans [les dégradés sarcelle](https://gradiently.design/fr/guide/teal-gradient).

## Corail sur fond sombre

Le corail rayonne magnifiquement contre une prune profonde, un marine ou un presque noir. Une seule lumière corail sur fond sombre évoque une enseigne au néon ou un coucher de soleil sur la mer, et convient aux bars, à la musique, à la vie nocturne et aux soirées. Gardez la lumière corail loin de l’endroit où se posent les mots, et composez-les en blanc coquillage ou en blanc sur la zone sombre.

- Corail sur lie-de-vin: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Coucher de soleil sur la baie: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Charbon et corail: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Une lumière corail, beaucoup de sombre. Le corail paraît plus vif que sur du blanc.

## Du texte sur un dégradé corail

Le corail paraît assez franc pour du texte blanc, et c’est exactement pourquoi tant de designs corail échouent. Du blanc sur `#ff7f50` mesure environ 2,5 pour 1, bien en dessous des 4,5 pour 1 demandés pour le corps de texte. Un brun lie-de-vin profond comme `#3b0d0c` mesure environ 6,7 pour 1 sur le même corail et garde la chaleur. Si vous voulez du texte blanc, approfondissez le corail vers un rouge comme `#e11d48`, où le blanc atteint environ 4,7 pour 1. La méthode est dans [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

Un post de soldes de studio de pilates avec un texte pâle sur la zone la plus vive d’un dégradé corail

Des mots clairs en travers d’un corail vif paraissent audacieux mais se lisent mal sur un téléphone en plein jour.

Le même post de pilates avec un texte net sur une zone plus calme et plus profonde du dégradé corail

Le même post avec une zone plus calme et une couleur de texte adaptée.

Un Mark Gradiently fait cet ajustement de lui-même : il place sa région la plus calme et la mieux contrastée derrière vos mots, et l’encre Auto choisit un texte clair ou foncé pour chaque ligne d’après la palette du Mark. Ni cadres ni ombres portées nécessaires.

## CSS de dégradé corail pour un bouton

Le corail fait un appel à l’action amical. Gardez le dégradé assez clair pour qu’une étiquette foncée reste lisible, et faites glisser sa position au survol plutôt que de changer de couleurs. [Les boutons dégradés en CSS](https://gradiently.design/fr/guide/css-gradient-button) propose d’autres modèles.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

Une pilule corail avec texte lie-de-vin profond. Le dégradé glisse au survol au lieu de changer de couleur.

## FAQ

### Quel est le code hex du corail ?

La couleur CSS nommée `coral` vaut `#ff7f50`. Le Living Coral de Pantone est souvent approché par `#ff6f61`.

### Quelles couleurs vont avec un dégradé corail ?

La pêche, le rose, la mandarine et l’or s’y fondent. La sarcelle profonde, le marine et la prune sont de forts partenaires en zones séparées.

### Pourquoi mon dégradé corail et sarcelle paraît-il gris ?

Le corail et la sarcelle sont presque opposés sur le cercle chromatique : les couleurs entre les deux perdent leur saturation. Gardez-les séparés, ou joignez-les par une teinte pâle.

### Puis-je mettre du texte blanc sur du corail ?

Pas sur un corail vif, où le blanc échoue au contraste. Employez un lie-de-vin ou un brun profond, ou approfondissez le corail vers un rouge avant d’utiliser du blanc.

### Quelle différence entre corail et saumon ?

Le saumon est plus pâle, plus rose et un peu plus poudré. Le corail est plus vif, plus saturé et penche davantage vers l’orange.