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

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

De la pluie sur le béton, des enseignes en trois alphabets, un distributeur qui ronronne dans une ruelle. Le cyberpunk, c’est une lumière crue dans une ville sombre. Voici cinq palettes avec leurs codes, et comment les garder lisibles.

## The short version

- Une palette de couleurs cyberpunk associe une ou deux couleurs néon agressives, comme le jaune acide, le magenta, le cyan ou le vert toxique, à un fond noir profond.
- Le fond du design cyberpunk est rarement un noir pur : un noir bleuté, un noir verdâtre ou un gris d’asphalte mouillé donnent aux néons un endroit où s’installer.
- Le cyberpunk se distingue de la synthwave par son côté plus froid et plus rugueux, avec des jaunes et des verts industriels plutôt que des roses et des oranges de coucher de soleil.
- Le jaune, le cyan et le vert sur noir profond passent facilement les tests de contraste, alors que le bleu pur échoue et que les rouges se tiennent bien plus près de la limite.
- Un seul néon dominant et un seul accent secondaire par création gardent les visuels cyberpunk percutants plutôt que chaotiques.

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

- Asphalte de nuit: #07080d
- Noir bleuté: #141824
- Béton mouillé: #2b2f3a
- Jaune acide: #fcee0a
- Rouge d’alerte: #ff003c
- Enseigne magenta: #ff2bd6
- Cyan d’interface: #00f0ff
- Vert toxique: #39ff14

Trois sombres pour bâtir la ville, cinq néons pour l’éclairer. Vous utiliserez rarement plus de deux néons dans une même création.

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

| Palette | Fond | Néon principal | Accent |
| --- | --- | --- | --- |
| Danger | `#07080d` | Jaune acide `#fcee0a` | Cyan `#00f0ff` |
| Marché de nuit | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Vert toxique `#39ff14` | Menthe pâle `#b8ffd0` |
| Alerte rouge | `#0d0608` | Rouge d’alerte `#ff003c` | Jaune acide `#fcee0a` |
| Chrome froid | `#0b0f17` | Cyan `#00f0ff` | Acier `#9aa4b5` |

Chaque palette se compose d’un fond, d’un néon principal et d’un accent. Gardez l’accent pour moins d’un dixième de la création.

- Danger: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Marché de nuit: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminal: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Alerte rouge: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Chrome froid: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Les mêmes cinq palettes en arrière-plans. Le néon est repoussé vers un bord ou un angle, pour que l’essentiel de la surface reste assez sombre pour accueillir du texte.

## 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.

```css
: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);
}
```

Le texte courant reste d’un blanc cassé doux ; les néons sont réservés aux bords, aux liens et à un unique coin allumé.

Voyez [les propriétés personnalisées CSS pour les thèmes](https://gradiently.design/fr/guide/css-custom-properties-theming) pour changer de palette, et [le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) 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](https://gradiently.design/fr/guide/duotone-effect) 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](https://webaim.org/resources/contrastchecker/) avant de vous engager.

### Difficile à lire

- De longs paragraphes en magenta ou en rouge
- Un texte néon entouré d’une lueur floue
- Du texte sur la partie la plus lumineuse du néon
- Trois ou quatre néons en concurrence sur une même ligne
- Des effets glitch sur chaque mot

### Facile à lire

- Texte courant en blanc cassé, néon pour les titres
- Des lettres nettes et pleines, sans halo
- Des mots placés sur la partie sombre du fond
- Un néon par création, un petit accent
- Un glitch sur un seul mot, ou aucun

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é](https://gradiently.design/fr/guide/color-contrast-accessibility) 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.

Une miniature paysage annonçant la mise en ligne ce soir de la saison 4, en lettres jaunes sur un fond cyberpunk noir profond

Une miniature YouTube dans la palette Danger : titre jaune, fond sombre, cyan pour l’heure.

Une publication portrait affichant Des nouilles jusqu’à 3 h en lettres claires sur un fond bleu sombre éclairé de magenta

Une publication de street food nocturne dans la palette Marché de nuit, avec le magenta cantonné à l’arrière-plan.

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. **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. **Ajoutez un accent** Un second néon en petite quantité : une heure, un prix, un filet.
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](https://gradiently.design/fr/guide/gaming-channel-art) et [identité d’une équipe d’esport](https://gradiently.design/fr/guide/esports-team-branding) montrent ce style en situation, et [les couleurs synthwave](https://gradiently.design/fr/guide/synthwave-colors) présentent sa cousine plus chaude et plus nostalgique.

## FAQ

### Quelles couleurs utilise-t-on dans le cyberpunk ?

Jaune acide néon, magenta, cyan, vert toxique et rouge d’alerte, posés sur des fonds noir profond comme le noir bleuté ou le gris béton mouillé.

### Quels sont les codes hex d’une palette cyberpunk ?

Un bon point de départ : #07080d pour le fond, #fcee0a jaune acide, #ff2bd6 magenta, #00f0ff cyan et #39ff14 vert toxique.

### Quelle différence entre les couleurs cyberpunk et synthwave ?

La synthwave est chaude et nostalgique, bâtie sur un coucher de soleil rose et orange sur de l’indigo. Le cyberpunk est plus froid et plus rugueux, avec des jaunes, des verts et des cyans industriels sur noir profond.

### Un texte néon sur noir est-il accessible ?

Le jaune, le cyan et le vert sur noir profond passent en général facilement les tests de contraste. Le bleu pur échoue et les rouges passent de justesse : testez chaque paire et évitez le blanc pour les longs textes.