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

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

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

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.

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

Vedi proprietà personalizzate CSS per i temi per cambiare palette, e design in modalità scura 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 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 prima di decidere.

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

1. 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. 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. 3

   Aggiungi un accento

   Un secondo neon usato in piccole quantità: un orario, un prezzo, una linea sottile.

4. 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 e branding per team di esport mostrano il look applicato, e colori synthwave tratta il vicino più caldo e nostalgico.