# Dégradé cyan : codes électriques et nets

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

Le cyan est la couleur des écrans, des piscines et de la glace : net, vif et un peu futuriste. Il est aussi bien plus clair qu’il n’en a l’air, ce qui change la façon d’y poser des mots.

## The short version

- Un dégradé cyan fond la couleur vive à mi-chemin entre le vert et le bleu avec du blanc, du bleu, du citron vert, du magenta ou un marine profond.
- Le cyan d’écran pur est `#00ffff`, que le CSS appelle aussi aqua, et il est plus clair et plus vif que la sarcelle ou le turquoise.
- Le texte blanc sur du cyan pur n’a qu’un contraste d’environ 1,3 pour 1 : le cyan demande un texte foncé ou un fond bien plus profond derrière les mots.
- Le cyan paraît le plus électrique sur un fond presque noir ou marine, où une petite quantité semble rayonner.
- Le cyan se fond nettement dans le bleu et le citron vert, car tous deux sont ses voisins sur le cercle chromatique.

Un **dégradé cyan** fond la couleur vive à mi-chemin entre le vert et le bleu avec l’un de ses voisins : le blanc pour la glace, le bleu pour un look tech électrique, le citron vert pour la fraîcheur, le magenta pour une ambiance cyber, ou un marine profond où le cyan semble rayonner. Le cyan d’écran pur est `#00ffff`, et il est bien plus clair que la plupart ne s’y attendent : le principal savoir-faire est donc de décider où vont les mots. Des codes à copier pour chaque look suivent, avec les chiffres de contraste qui comptent.

## Cyan, sarcelle et turquoise ne sont pas la même chose

Ces trois-là s’échangent sans cesse, et la différence compte quand vous briefez un designer ou choisissez un code. Le CSS nomme même les trois, et ils sont nettement distincts. Le cyan est le plus vif et le plus équilibré entre le vert et le bleu. Le turquoise est plus doux et un peu plus vert, comme la pierre. La sarcelle est bien plus sombre et plus calme.

| Couleur | Nom CSS et hex | Caractère |
| --- | --- | --- |
| Cyan | `aqua` / `cyan`, `#00ffff` | Le plus vif, électrique, synthétique |
| Cyan électrique | `#00e5ff` | Un cyan avec une touche de bleu en plus, plus doux pour les yeux |
| Turquoise | `turquoise`, `#40e0d0` | Plus doux et plus vert, tropical |
| Sarcelle | `teal`, `#008080` | Sombre, calme, adulte |

Quatre voisines. Si votre dégradé doit paraître calme plutôt que vif, il vous faut sans doute de la sarcelle, pas du cyan.

Pour les parentes plus calmes, voir [le dégradé sarcelle](https://gradiently.design/fr/guide/teal-gradient) et [le dégradé turquoise](https://gradiently.design/fr/guide/turquoise-gradient). Cet article reste du côté vif.

- Glace: #f0fdff
- Lumière de piscine: #a5f3fc
- Cyan pur: #00ffff
- Cyan électrique: #00e5ff
- Cyan profond: #0891b2
- Lagon: #0e7490
- Marine nuit: #082f49
- Accent citron vert: #b6f73a

Une famille de cyans de la glace au marine, plus le citron vert comme partenaire qui le garde frais.

## Codes de dégradé cyan glace et piscine

L’extrémité claire du cyan évoque l’eau froide et l’air pur. La glace est presque blanche avec un soupçon de couleur ; le glacier et la piscine vont plus profond, par un cyan vif vers un bleu-vert capable de porter un texte blanc en bas. Ils conviennent aux offres d’été, aux soins de la peau à l’histoire rafraîchissante, aux boissons et à tout ce qui veut paraître revigorant.

- Glace: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Glacier: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Piscine: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Des cyans clairs. Mettez un texte foncé sur la partie haute de chacun ; seul l’arrêt le plus profond en bas du glacier et de la piscine accepte le blanc.

## Cyan électrique sur fonds sombres

Le cyan devient électrique quand il se pose sur l’obscurité. Une petite lumière cyan sur un fond presque noir ou marine évoque un écran, un laser ou une visualisation de données, d’où sa présence partout dans le logiciel, le jeu vidéo et la science. Gardez la majeure partie du cadre sombre et laissez le cyan occuper un coin ou un bord. Le **dégradé cyan bleu** de cette série est le plus polyvalent de tous, vif d’un côté et franchement bleu de l’autre.

- Cyan vers bleu électrique: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Lumière cyan sur noir: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Nuit de circuit: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Des fonds sombres avec lumière cyan. La nuit de circuit monte du noir au cyan, parfaite pour un hero dont le titre se pose dans la moitié haute sombre.

Pour des schémas complets bâtis autour de ce look, [les palettes de couleurs tech](https://gradiently.design/fr/guide/tech-color-palettes) en propose plusieurs, et [les dégradés néon](https://gradiently.design/fr/guide/neon-gradients) le poussent plus loin vers la vie nocturne.

## Cyan avec citron vert et avec magenta

Cyan vers citron vert passe par la menthe et paraît sportif, frais et optimiste. Cyan avec magenta est le duo cyberpunk : deux des trois primaires d’impression, toutes deux à plein volume. Passez-le par un milieu indigo foncé et il paraît une rue néon la nuit plutôt qu’un jouet d’enfant. L’article sur [le dégradé magenta](https://gradiently.design/fr/guide/magenta-gradient) couvre l’autre côté de cette association.

- Cyan vers citron vert: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Deux associations audacieuses. Toutes deux sont bruyantes : donnez-leur des mots courts et beaucoup d’espace.

## Le piège du contraste : des mots sur du cyan

Le cyan est l’une des couleurs saturées les plus claires qu’un écran puisse montrer. Du texte blanc sur `#00ffff` pur n’a qu’un contraste d’environ 1,3 pour 1, illisible, alors que du noir sur le même cyan atteint environ 16,7 pour 1. Le blanc commence à marcher quand le cyan s’approfondit autour de `#0e7490`, où il atteint environ 5,4 pour 1. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) explique les rapports et les objectifs.

### Difficile à lire

- Du texte blanc sur cyan vif
- Du texte cyan sur une page blanche
- Un petit texte au milieu vif d’un dégradé
- Du texte bleu pâle sur la glace

### Facile à lire

- Du texte marine ou presque noir sur cyan vif
- Du texte cyan sur une page marine ou noire
- Un petit texte sur l’arrêt le plus profond seulement
- Du texte blanc sur lagon #0e7490 ou plus foncé

C’est le genre de jugement que Gradiently fait pour vous. L’encre Auto choisit un texte clair ou foncé pour chaque ligne d’après la palette du Mark, et le Mark place sa région la plus calme et la mieux contrastée derrière les mots : un fond cyan vif ne laisse donc jamais de texte blanc en détresse.

## Une bordure en dégradé cyan en CSS

Sur les interfaces sombres, le cyan marche à merveille comme bord plutôt que comme remplissage. Une bordure en dégradé garde la carte lisible tout en ajoutant l’effet électrique. Ceci emploie deux arrière-plans, l’un coupé au padding et l’autre à la bordure, et garde donc les coins arrondis.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Une carte sombre avec une bordure cyan vers bleu. Remplacez le second dégradé par cyan vers citron vert pour un rendu plus frais.

D’autres techniques, y compris les bordures animées, sont dans [la bordure en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-border).

## Où un dégradé cyan convient

Le cyan est un choix naturel pour les lancements de logiciels, les outils pour développeurs, le jeu vidéo, les maillots, les boissons et tout ce qui veut paraître rapide ou froid. Le jour du lancement, gardez un seul look cyan sur le post d’annonce, l’aperçu de lien et la bannière du changelog pour qu’on le reconnaisse dans chaque fil. [L’identité visuelle d’une startup SaaS](https://gradiently.design/fr/guide/saas-startup-branding) montre comment bâtir toute une identité autour d’une couleur vive comme celle-ci.

Un large post social avec un fond marine sombre, une lumière cyan vive sur un bord et les mots « Déployé en quelques secondes » en blanc

Un post de lancement pour X en 1600×900. Texte blanc du côté sombre, la lumière cyan gardée loin des mots.

## FAQ

### Quel est le code hex du cyan ?

Le cyan d’écran pur est #00ffff, appelé aussi aqua en CSS. Un cyan électrique un peu plus bleu et plus confortable est #00e5ff.

### Quelle différence entre cyan et sarcelle ?

Le cyan est vif et clair, à mi-chemin entre le vert et le bleu. La sarcelle, #008080 en CSS, est un bleu-vert bien plus sombre et plus calme.

### Quelle couleur de texte sur un fond cyan ?

Marine ou presque noir sur cyan vif. Le blanc ne marche que sur des cyans profonds comme #0e7490 ou plus foncés.

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

Le bleu et le citron vert se fondent nettement car ils sont les voisins du cyan. Le magenta fait un audacieux duo cyberpunk, et le marine ou le noir fait rayonner le cyan.