Dégradé cyan : codes électriques et nets

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.

Pour les parentes plus calmes, voir le dégradé sarcelle et le dégradé turquoise. Cet article reste du côté vif.

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.

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.

Pour des schémas complets bâtis autour de ce look, les palettes de couleurs tech en propose plusieurs, et les dégradés néon 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 couvre l’autre côté de cette association.

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é explique les rapports et les objectifs.

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.

.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;
}

D’autres techniques, y compris les bordures animées, sont dans la bordure en dégradé CSS.

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 montre comment bâtir toute une identité autour d’une couleur vive comme celle-ci.