Palette de couleurs cyberpunk : néons sur noir, codes hex

Une palette de couleurs cyberpunk, c’est du néon sur noir profond : jaune acide, magenta vif, cyan électrique et vert toxique, posés sur le noir bleuté d’une ville la nuit. Cet univers vient de décennies de science-fiction sur la haute technologie et la vie de bas étage, d’où des couleurs artificielles et un peu dangereuses. La règle qui le fait fonctionner, c’est la retenue : un néon dominant, un accent, et beaucoup de sombre.

Les couleurs cyberpunk essentielles

Chaque néon a son rôle. Le jaune évoque l’industrie et l’urgence, comme un ruban de danger. Le rouge signifie l’alerte. Le magenta, c’est la nuit et la publicité. Le cyan, ce sont les interfaces, les écrans et les données. Le vert, c’est le code et la chimie. Choisissez le néon dont le rôle correspond à votre message, et la palette se met à raconter l’histoire à votre place.

Cinq palettes cyberpunk avec codes hex

Les couleurs cyberpunk en variables CSS

Pour un site web, une surcouche de stream ou une interface de jeu, définissez la palette en propriétés personnalisées afin de changer le néon principal à un seul endroit. Cet exemple utilise la palette Marché de nuit, avec le néon réservé aux bordures, aux liens et à un élément focal.

:root {
  --ground: #141824;
  --surface: #1e2332;
  --line: #2b2f3a;
  --text: #e6e9f0;
  --muted: #9aa4b5;
  --neon: #ff2bd6;
  --accent: #00f0ff;
}

body {
  background: var(--ground);
  color: var(--text);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--neon);
}

a {
  color: var(--accent);
}

.hero {
  background:
    linear-gradient(135deg, transparent 60%, var(--neon) 140%),
    var(--ground);
}

Voyez les propriétés personnalisées CSS pour les thèmes pour changer de palette, et le design en mode sombre pour les règles générales sur fond sombre.

Des photos dans une palette cyberpunk

Des photos ordinaires se laissent tirer vers la palette. Rues de nuit, pluie sur une vitre, parkings et cages d’escalier fonctionnent tous une fois assombris et teintés. Un duotone qui associe les ombres à la couleur de fond et les hautes lumières au néon principal transforme une photo de téléphone terne d’un arrêt de bus en image digne de la série. Gardez la teinte forte sur les arrière-plans et plus douce sur les visages, où un duotone néon intégral peut paraître dur. L’effet duotone explique comment choisir les deux couleurs.

Garder un texte cyberpunk lisible

Le néon sur noir profond semble forcément lisible, et pour de grands titres, c’est généralement vrai. Les problèmes commencent avec le petit texte et les néons les plus sombres. Le rouge et le bleu saturés sont plus sombres à l’œil qu’ils n’en ont l’air : le bleu pur #0000ff sur noir échoue même pour du grand texte, et le rouge d’alerte passe tout juste pour du petit texte. Le jaune, le cyan et le vert sont les néons les plus lisibles sur fond sombre. Vérifiez vos paires avec les recommandations WCAG expliquées par WebAIM avant de vous engager.

Une lueur autour des lettres est le cliché cyberpunk le plus courant, et c’est aussi ce qui transforme un texte en bavure sur un téléphone. Laissez le fond porter la lumière et gardez des lettres nettes. Contraste des couleurs et accessibilité détaille les chiffres.

Des palettes cyberpunk dans de vraies créations

Ce style convient naturellement aux chaînes de jeu, aux équipes d’esport, aux streamers, à la musique électronique, aux lancements tech et à tout ce qui touche à l’avenir des villes. Il peut aussi servir à un bar ou à un stand de street food nocturne qui veut ressembler à une scène de film.

1. 1

   Choisissez d’abord le fond

   Noir bleuté pour la tech, noir verdâtre pour le code, noir chaud pour la vie nocturne. Jamais un #000000 uni.

2. 2

   Choisissez un néon selon son sens

   Jaune pour l’urgence, magenta pour la nuit, cyan pour les écrans, vert pour le code, rouge pour les alertes.

3. 3

   Ajoutez un accent

   Un second néon en petite quantité : une heure, un prix, un filet.

4. 4

   Ajoutez du grain

   Du grain, des lignes de balayage ou une texture de béton évitent que les zones sombres ressemblent à un écran vide.

Si votre chaîne ou votre équipe a besoin d’un arrière-plan cyberpunk vraiment à vous, vous pouvez réserver un Mark Gradiently pour être seul à pouvoir exporter avec lui ; il place tout seul sa zone la plus calme et la mieux contrastée derrière votre texte. Habillage de chaîne de jeu et identité d’une équipe d’esport montrent ce style en situation, et les couleurs synthwave présentent sa cousine plus chaude et plus nostalgique.