# Palette colori cyberpunk: neon su quasi nero, con codici esadecimali

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

Pioggia sul cemento, insegne in tre alfabeti, un distributore automatico che ronza in un vicolo. Il colore cyberpunk è luce dura in una città scura. Ecco cinque palette con i codici e come mantenerle leggibili.

## The short version

- Una palette cyberpunk mette uno o due neon aspri, come giallo acido, magenta, ciano o verde tossico, contro un fondo quasi nero.
- Il fondo nel design cyberpunk è raramente nero puro: nero bluastro, nero verdastro o grigio asfalto bagnato danno ai neon qualcosa in cui stare.
- Il cyberpunk si distingue dalla synthwave per essere più freddo e più crudo, con gialli e verdi industriali invece di rosa e arancioni da tramonto.
- Giallo, ciano e verde su quasi nero superano facilmente i controlli di contrasto, mentre il blu puro fallisce e i rossi stanno molto più vicini alla soglia.
- Usare un neon dominante e un accento secondario per design mantiene le grafiche cyberpunk incisive e non caotiche.

Una **palette di colori cyberpunk** è neon su quasi nero: giallo acido, magenta acceso, ciano elettrico e verde tossico, su un nero bluastro da città di notte. Il look viene da decenni di fantascienza su alta tecnologia e vita bassa, quindi i colori sembrano artificiali e un po’ pericolosi. La regola che lo fa funzionare è la sobrietà: un neon dominante, un accento e molto scuro.

## I colori cyberpunk di base

- Asfalto notturno: #07080d
- Nero bluastro: #141824
- Cemento bagnato: #2b2f3a
- Giallo acido: #fcee0a
- Rosso di allarme: #ff003c
- Insegna magenta: #ff2bd6
- Ciano HUD: #00f0ff
- Verde tossico: #39ff14

Tre scuri per costruire la città, cinque neon per illuminarla. Raramente userai più di due neon in un design.

Ogni neon ha un compito. Il giallo si legge come industriale e urgente, come il nastro di pericolo. Il rosso significa avvertimento. Il magenta è vita notturna e pubblicità. Il ciano è interfacce, schermi e dati. Il verde è codice e sostanze chimiche. Scegli il neon il cui compito corrisponde al tuo messaggio, e la palette comincia a raccontare la storia per te.

## Cinque palette cyberpunk con codici esadecimali

| Palette | Fondo | Neon principale | Accento |
| --- | --- | --- | --- |
| Pericolo | `#07080d` | Giallo acido `#fcee0a` | Ciano `#00f0ff` |
| Mercato notturno | `#141824` | Magenta `#ff2bd6` | Ciano `#00f0ff` |
| Terminale | `#050b07` | Verde tossico `#39ff14` | Menta pallida `#b8ffd0` |
| Allarme rosso | `#0d0608` | Rosso di allarme `#ff003c` | Giallo acido `#fcee0a` |
| Cromo freddo | `#0b0f17` | Ciano `#00f0ff` | Acciaio `#9aa4b5` |

Ogni palette è un fondo, un neon principale e un accento. Usa l’accento per meno di un decimo del design.

- Pericolo: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Mercato notturno: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminale: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Allarme rosso: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Cromo freddo: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Le stesse cinque palette come sfondi. Il neon è spinto verso un bordo o un angolo, così gran parte della superficie resta abbastanza scura per le parole.

## I colori cyberpunk come variabili CSS

Per un sito web, un overlay di streaming o un’interfaccia di gioco, imposta la palette come proprietà personalizzate così puoi cambiare il neon principale in un solo punto. Questo esempio usa la palette Mercato notturno con il neon riservato a bordi, link e un solo elemento focale.

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

Il testo corrente resta un bianco morbido; i neon sono riservati a bordi, link e a un solo angolo illuminato.

Vedi [proprietà personalizzate CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming) per cambiare palette, e [design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) per le regole generali su come costruire su fondi scuri.

### Foto in una palette cyberpunk

Le foto normali si possono portare nella palette. Scatti notturni di strade, pioggia sul vetro, parcheggi e vani scale funzionano tutti una volta scuriti e tinti. Un duotone che mappa le ombre sul colore di fondo e le luci sul neon principale trasforma una banale foto fatta col telefono a una fermata dell’autobus in qualcosa che appartiene alla serie. Mantieni la tinta forte sugli sfondi e più leggera sui volti, dove un duotone neon pieno può sembrare duro. [L’effetto duotone](https://gradiently.design/it/guide/duotone-effect) spiega come scegliere i due colori.

## Mantenere leggibile il testo cyberpunk

Il neon su quasi nero sembra dover essere leggibile, e per i grandi titoli di solito lo è. I problemi cominciano con il testo piccolo e con i neon più scuri. Rosso e blu saturi sono più scuri all’occhio di come appaiono: il blu puro `#0000ff` su nero fallisce anche per il testo grande, e il rosso di allarme supera appena la soglia per il testo piccolo. Giallo, ciano e verde sono i neon più leggibili sui fondi scuri. Controlla le coppie con le indicazioni WCAG spiegate da [WebAIM](https://webaim.org/resources/contrastchecker/) prima di decidere.

### Difficile da leggere

- Lunghi paragrafi in magenta o rosso
- Testo neon con un alone sfocato intorno
- Testo sulla parte più luminosa del neon
- Tre o quattro neon in competizione in una riga
- Effetti glitch su ogni parola

### Facile da leggere

- Testo corrente in bianco sporco, neon per i titoli
- Lettere piene e nitide senza alone
- Parole posizionate sulla parte scura del fondo
- Un neon per design, un piccolo accento
- Glitch su una sola parola o nessuno

Un alone intorno alle lettere è il cliché cyberpunk più comune, ed è anche ciò che trasforma il testo in una macchia su un telefono. Lascia che sia lo sfondo a portare la luce e mantieni nitide le lettere. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) tratta i numeri.

## Palette cyberpunk nei design reali

Il look è adatto ai canali di gaming, ai team di esport, agli streamer, alla musica elettronica, ai lanci tech e a tutto ciò che riguarda il futuro delle città. Può funzionare anche per un bar o una bancarella di cibo notturna che vuole sembrare una scena da film.

Una miniatura orizzontale che annuncia la stagione 4 online stasera, in testo giallo su sfondo cyberpunk quasi nero

Una miniatura YouTube nella palette Pericolo: titolo giallo, fondo scuro, ciano per l’orario.

Un post verticale con la scritta Noodles fino alle 3 in testo chiaro su sfondo blu scuro con luce magenta

Un post di cibo notturno nella palette Mercato notturno, con il magenta tenuto sullo sfondo.

1. **Scegli prima il fondo** Nero bluastro per la tecnologia, nero verdastro per il codice, nero caldo per la vita notturna. Mai #000000 piatto.
2. **Scegli un neon in base al significato** Giallo per l’urgenza, magenta per la vita notturna, ciano per gli schermi, verde per il codice, rosso per gli avvisi.
3. **Aggiungi un accento** Un secondo neon usato in piccole quantità: un orario, un prezzo, una linea sottile.
4. **Aggiungi grana** Grana, linee di scansione o una texture di cemento evitano che le zone scure sembrino schermo vuoto.

Se il tuo canale o il tuo team ha bisogno di uno sfondo cyberpunk davvero suo, puoi riservare un Mark di Gradiently così solo tu puoi esportare con quello, e il Mark sposta da solo la sua zona più calma e a miglior contrasto dietro le tue parole. [Grafiche per canali di gaming](https://gradiently.design/it/guide/gaming-channel-art) e [branding per team di esport](https://gradiently.design/it/guide/esports-team-branding) mostrano il look applicato, e [colori synthwave](https://gradiently.design/it/guide/synthwave-colors) tratta il vicino più caldo e nostalgico.

## FAQ

### Quali colori si usano nel cyberpunk?

Giallo acido neon, magenta, ciano, verde tossico e rosso di allarme, su fondi quasi neri come il nero bluastro o il grigio cemento bagnato.

### Quali sono i codici esadecimali di una palette cyberpunk?

Un buon set di partenza è #07080d per il fondo, #fcee0a giallo acido, #ff2bd6 magenta, #00f0ff ciano e #39ff14 verde tossico.

### Che differenza c’è tra i colori cyberpunk e synthwave?

La synthwave è calda e nostalgica, costruita su un tramonto rosa e arancione su indaco. Il cyberpunk è più freddo e crudo, con gialli, verdi e ciani industriali su quasi nero.

### Il testo neon su nero è accessibile?

Giallo, ciano e verde su quasi nero di solito superano facilmente i controlli di contrasto. Il blu puro fallisce e i rossi passano appena, quindi testa ogni coppia e non usare il bianco puro per i testi lunghi.