Cyberpunk-fargepalett: neon på nesten svart med hex-koder

En cyberpunk-fargepalett er neon på nesten svart: syregult, sterk magenta, elektrisk cyan og giftgrønt mot den blåsvarte fargen i en by om natten. Uttrykket kommer fra tiår med science fiction om høyteknologi og harde liv, så fargene virker kunstige og litt farlige. Regelen som får det til å fungere, er måtehold: én dominerende neonfarge, én aksent og mye mørke.

De sentrale cyberpunk-fargene

Hver neonfarge har en oppgave. Gult virker industrielt og presserende, som varseltape. Rødt betyr advarsel. Magenta er natteliv og reklame. Cyan er grensesnitt, skjermer og data. Grønt er kode og kjemikalier. Velg neonfargen hvis oppgave passer budskapet, så begynner paletten å fortelle historien for deg.

Fem cyberpunk-paletter med hex-koder

Cyberpunk-farger som CSS-variabler

Til en nettside, et strømmeoverlegg eller et spillgrensesnitt setter du opp paletten som egendefinerte egenskaper, så hovedneonfargen kan byttes ett sted. Eksemplet bruker Nattmarked-paletten med neon til kanter, lenker og ett fokuspunkt.

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

Se egendefinerte CSS-egenskaper til temaer for bytte av paletter, og design for mørk modus for grunnreglene for mørke bunner.

Bilder i en cyberpunk-palett

Vanlige bilder kan trekkes inn i paletten. Nattbilder av gater, regn på glass, parkeringsplasser og trappehus fungerer når de mørknes og tones. En duotone som kobler skygger til bunnfargen og høylys til hovedneonfargen, gjør et kjedelig mobilbilde av et busstopp til noe som hører til i settet. Hold toningen sterk på bakgrunner og mildere på ansikter, der full neonduotone kan virke hard. Duotoneeffekten forklarer hvordan du velger de to fargene.

Hold cyberpunk-tekst lesbar

Neon på nesten svart føles som om det må være lesbart, og for store overskrifter er det vanligvis det. Problemene starter med liten tekst og mørkere neonfarger. Mettet rødt og blått er mørkere for øyet enn de ser ut: rent blått #0000ff på svart stryker selv for stor tekst, og varselrødt klarer så vidt grensen for liten tekst. Gult, cyan og grønt er de mest lesbare neonfargene på mørk bunn. Kontroller parene mot WCAG-veiledningen forklart av WebAIM før du bestemmer deg.

Glød rundt bokstaver er den vanligste cyberpunk-klisjeen, og gjør også tekst til en flekk på telefonen. La bakgrunnen bære lyset og hold bokstavene skarpe. Fargekontrast og tilgjengelighet dekker tallene.

Cyberpunk-paletter i ekte design

Uttrykket passer naturlig til spillkanaler, e-sportlag, strømmere, elektronisk musikk, teknologilanseringer og alt om fremtidens byer. Det kan også fungere for en bar eller nattmatbod som vil føles som en filmscene.

1. 1

   Velg bunnen først

   Blåsvart til teknologi, grønnsvart til kode, varmt svart til natteliv. Aldri flatt #000000.

2. 2

   Velg én neonfarge etter betydning

   Gult for hastverk, magenta for natteliv, cyan for skjermer, grønt for kode, rødt for varsler.

3. 3

   Legg til én aksent

   En ekstra neonfarge i små mengder: et tidspunkt, en pris, en tynn linje.

4. 4

   Legg til røffhet

   Korn, skannelinjer eller betongtekstur hindrer de mørke områdene i å se ut som en tom skjerm.

Hvis kanalen eller laget trenger en cyberpunk-bakgrunn som er din egen, kan du sikre deg en Mark fra Gradiently slik at bare du kan eksportere med den. Den flytter selv det roligste området med best kontrast bak ordene dine. Grafikk til spillkanaler og merkevarebygging for e-sportlag viser uttrykket i bruk. Synthwave-farger dekker den varmere, mer nostalgiske naboen.