# Dégradé magenta : codes électriques entre rose et violet

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

Le magenta est l’une des couleurs les plus bruyantes d’un écran et l’une des plus dures à dompter. Ces codes montrent où il se situe entre rose et violet, avec quoi le fondre, et ce qui se passe à l’impression.

## The short version

- Le magenta se situe à 300 degrés sur le cercle chromatique HSL, à mi-chemin entre le rouge et le bleu : il ne se lit donc ni rose ni violet.
- À l’écran, le magenta pur est `#ff00ff`, la même valeur que le CSS appelle fuchsia.
- Le magenta se fond nettement avec le violet, le bleu, l’orange et le cyan, mais vire au gris quand on le fond directement avec du vert.
- Le magenta d’impression est bien moins intense que celui d’écran : les dégradés magenta vifs paraissent plus ternes sur papier.
- Le texte blanc sur du magenta pur n’atteint qu’environ 3,1 pour 1 de contraste, assez pour de grands titres mais pas pour du petit texte.

Un **dégradé magenta** fond la couleur vive entre rose et violet avec un voisin : violet pour de l’électrique, orange pour la chaleur, cyan pour un look cyber, ou presque noir pour la profondeur. Le magenta d’écran pur est `#ff00ff`, et il est assez intense pour que le dégradé marche en général mieux quand le magenta est une extrémité du fondu plutôt que son tout. Les codes ci-dessous couvrent chaque direction, avec des notes sur le texte et sur le comportement du magenta à l’impression.

## Magenta, rose et violet : où passe la ligne

Sur le cercle chromatique HSL, le magenta se situe à 300 degrés, exactement entre le rouge et le bleu. Glissez vers le rouge et il devient rose vif ; glissez vers le bleu et il devient pourpre puis violet. Le magenta est aussi célèbre pour ne pas figurer dans l’arc-en-ciel : il n’a pas de longueur d’onde propre, et l’œil le perçoit quand il reçoit ensemble de la lumière rouge et bleue. C’est en partie pourquoi il paraît si artificiel et électrique.

| Couleur | Hex | Penche vers | Impression |
| --- | --- | --- | --- |
| Violet | `#7c3aed` | Le bleu | Calme, créatif |
| Pourpre | `#a21caf` | Un peu le bleu | Riche, royal |
| Magenta | `#ff00ff` | Aucun des deux | Électrique, bruyant |
| Magenta vif | `#e6007e` | Un peu le rouge | Audacieux, à la mode |
| Rose vif | `#ff4fa3` | Le rouge | Joueur, chaleureux |

Le voisinage du magenta. Un dégradé magenta emprunte en général l’une de ces couleurs pour son second arrêt.

- Magenta d’écran: #ff00ff
- Magenta électrique: #e600e6
- Magenta profond: #a3006f
- Lie-de-vin: #5c0045
- Orchidée: #f3a6f0
- Ultraviolet: #6a00f4
- Mandarine: #ff8a3d
- Cyan: #00e5ff

Le magenta et ses meilleurs partenaires. L’ultraviolet, la mandarine et le cyan le poussent chacun dans une direction complètement différente.

Si vous voulez en réalité quelque chose de plus doux et plus chaud, plus proche du chewing-gum ou de la rose que du néon, la collection de [dégradé rose](https://gradiently.design/fr/guide/pink-gradient) est un meilleur point de départ. Le magenta gagne sa place quand vous voulez une couleur devant laquelle personne ne peut faire défiler sans s’arrêter.

## Codes de dégradé magenta électrique

Magenta vers violet ou bleu est le duo électrique classique. Il avance le long du cercle chromatique sans rien croiser de boueux : le fondu reste vif jusqu’au bout. Ils conviennent à la musique, à la vie nocturne, au jeu vidéo et aux outils créatifs. Si vous voulez cette direction avec plus de bleu que de magenta, les codes de [dégradé violet](https://gradiently.design/fr/guide/purple-gradient) prennent le relais.

- Magenta vers ultraviolet: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta vers bleu électrique: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta vers cyan: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orchidée pastel: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Des magentas froids. Le magenta vers cyan passe par une douce pervenche au milieu, c’est pourquoi il ne vire jamais au gris.

## Codes de magenta vif et de coucher de soleil

Tournez dans l’autre sens autour du cercle et le magenta se réchauffe : par le rose vif jusqu’au corail et à l’orange. C’est le look des graphismes de la fin des années 1980, de la synthwave et de la vaporwave, et de beaucoup d’affiches de festival d’été. Un arrêt sombre en haut en fait un crépuscule. [Les couleurs vaporwave](https://gradiently.design/fr/guide/vaporwave-colors) vont plus loin dans ce monde.

- Magenta vers mandarine: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Crépuscule magenta: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Des magentas chauds. Gardez l’orange comme extrémité claire, pour que le point le plus lumineux soit chaud et le plus profond magenta.

## Magenta profond sur fonds sombres

Le magenta paraît le plus coûteux quand il rayonne depuis l’obscurité plutôt que de remplir le cadre. Un fond lie-de-vin ou prune avec une seule lumière magenta se lit comme de la mode de luxe ou un bar de fin de nuit ; étalé sur toute une affiche, le même magenta se lit comme un prospectus de soldes. Les fonds sombres offrent aussi un foyer facile au texte blanc.

- Magenta profond: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Lueur magenta sur noir: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Des magentas sombres. La version lueur est celle à choisir quand vous voulez que le magenta paraisse haut de gamme plutôt que bruyant.

> **Éviter le magenta vers vert** Le vert est directement opposé au magenta, et un fondu direct entre eux traverse le gris au milieu. Si vous voulez les deux, laissez-les se rencontrer par un bord net ou gardez le vert en petit accent. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) montrent pourquoi.

## Le magenta à l’écran et à l’impression

Le magenta d’écran est fait de lumière, tandis que le magenta d’impression est de l’encre, l’une des quatre couleurs de la quadrichromie CMJN. Le magenta de process est bien moins intense, en général montré à l’écran autour de `#ec008c`. Un dégradé magenta qui rayonne sur votre moniteur peut donc paraître plat et rosâtre sur un flyer. [RVB et CMJN](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique l’écart, et [les dégradés à l’impression](https://gradiently.design/fr/guide/print-gradients) couvrent l’épreuvage.

### Magenta d’écran

- Fait de lumière rouge et bleue
- Valeur pure `#ff00ff`, extrêmement vive
- Rayonne sur fonds sombres
- Convient aux looks néon et électriques

### Magenta d’impression

- Fait d’encre sur papier
- Plus proche de `#ec008c`, nettement plus terne
- Les fonds sombres peuvent s’imprimer boueux
- Pour un vrai néon, les imprimeurs proposent des encres fluo en ton direct

## Du texte sur un dégradé magenta

Le magenta est plus vif qu’il n’en a l’air. Du texte blanc sur `#ff00ff` pur n’atteint qu’environ 3,1 pour 1 de contraste, ce qui passe pour de grands titres mais pas pour du petit texte. Du noir sur le même magenta atteint environ 6,7 pour 1, mais paraît lourd. En pratique, posez le texte blanc sur l’extrémité plus profonde du dégradé, ou assombrissez le magenta derrière les petits mots vers quelque chose comme `#a3006f`.

Sur les sites web, le magenta fait aussi un saisissant titre en dégradé. Gardez-le pour de grandes tailles d’affichage, où le contraste tient, comme le décrit [le texte en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-text).

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Un titre de magenta vers ultraviolet. Employez-le sur une page blanche ou très claire : le magenta y atteint environ 3,1 pour 1 et l’ultraviolet environ 7 pour 1, tandis que l’extrémité violette disparaît presque sur noir.

Une story verticale avec un fond magenta et violet vif et les mots « Portes à vingt-deux heures » en blanc

Une story de soirée en club dans un Mark magenta. Les mots se posent sur la zone plus sombre, où le texte blanc est à l’aise.

Les couleurs bruyantes sont exactement là où un fond qui répond à vos mots aide le plus. Dans Gradiently, un Mark magenta approfondit la couleur près des lettres et garde sa partie la plus calme derrière le titre : la lueur reste et les mots se lisent encore. Pour le cousin plus froid du magenta, voir les codes de [dégradé cyan](https://gradiently.design/fr/guide/cyan-gradient).

## FAQ

### Quel est le code hex du magenta ?

À l’écran, le magenta pur est #ff00ff, que le CSS appelle aussi fuchsia. Le magenta d’impression est plus terne et se montre en général à l’écran autour de #ec008c.

### Le magenta est-il rose ou violet ?

Ni l’un ni l’autre. Il se situe exactement entre le rouge et le bleu sur le cercle chromatique ; le rose vif penche vers le rouge et le pourpre vers le bleu.

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

Le violet, le bleu électrique, le cyan, l’orange et le presque noir se fondent tous nettement avec le magenta. Évitez de le fondre directement dans du vert, qui vire au gris.

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

Sur du #ff00ff pur, le blanc atteint environ 3,1 pour 1 de contraste : réservez-le aux grands titres. Employez un magenta plus profond derrière un petit texte blanc.

### Pourquoi mon magenta paraît-il terne à l’impression ?

Les encres d’impression ne peuvent pas reproduire l’intensité du magenta d’écran. Attendez-vous à une couleur plus douce, commandez une épreuve ou renseignez-vous auprès de votre imprimeur sur l’encre rose fluo.