Cyberpunk-farvepalet: neon på næsten sort, med hex-koder

En cyberpunk-farvepalet er neon på næsten sort: syregul, varm magenta, elektrisk cyan og giftgrøn, sat mod den blåsorte farve af en by om natten. Udtrykket stammer fra årtiers science fiction om højteknologi og lavt liv, så farverne føles kunstige og lidt farlige. Reglen, der får det til at virke, er tilbageholdenhed: én dominerende neonfarve, én accent og masser af mørke.

De centrale cyberpunk-farver

Hver neonfarve har sin opgave. Gul læses som industriel og presserende, som farebånd. Rød betyder advarsel. Magenta er natteliv og reklame. Cyan er grænseflader, skærme og data. Grøn er kode og kemikalier. Vælg den neonfarve, hvis opgave passer til dit budskab, så begynder paletten at fortælle historien for dig.

Fem cyberpunk-paletter med hex-koder

Cyberpunk-farver som CSS-variabler

Til en hjemmeside, et stream-overlay eller en spilgrænseflade sætter du paletten op som brugerdefinerede egenskaber, så du kan bytte hovedneonfarven ét sted. Eksemplet bruger paletten Natmarked, hvor neonfarven er forbeholdt kanter, links og ét fokuselement.

: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 CSS-brugerdefinerede egenskaber til temaer for at skifte paletter og mørk tilstand i design for de generelle regler for at bygge på mørke bunde.

Fotos i en cyberpunk-palet

Almindelige fotos kan trækkes ind i paletten. Natbilleder af gader, regn på glas, parkeringspladser og trappeopgange virker alle, når de er mørknet og tonet. En duotone, der kortlægger skygger til din bundfarve og højlys til din hovedneon, forvandler et kedeligt telefonbillede af et busstoppested til noget, der hører hjemme i sættet. Hold toningen kraftig på baggrunde og blidere på ansigter, hvor en fuld neon-duotone kan se hård ud. Duotone-effekten forklarer, hvordan du vælger de to farver.

Sådan holder du cyberpunk-tekst læselig

Neon på næsten sort føles, som om det må kunne læses, og til store overskrifter kan det som regel også. Problemerne begynder med lille tekst og med de mørkere neonfarver. Mættet rød og blå er mørkere for øjet, end de ser ud: ren blå #0000ff på sort falder igennem selv til stor tekst, og advarselsrød klarer netop grænsen til lille tekst. Gul, cyan og grøn er de mest læselige neonfarver på mørke bunde. Tjek par mod WCAG-retningslinjerne, forklaret af WebAIM, før du låser dig fast.

En glød omkring bogstaver er den mest almindelige cyberpunk-kliché, og den er også det, der gør tekst til en klat på en telefon. Lad baggrunden bære lyset og hold bogstaverne skarpe. Farvekontrast og tilgængelighed dækker tallene.

Cyberpunk-paletter i rigtige designs

Udtrykket passer naturligt til gamingkanaler, esportshold, streamere, elektronisk musik, tech-lanceringer og alt om byernes fremtid. Det kan også fungere for en bar eller en natåben madbod, der vil føles som en scene fra en film.

1. 1

   Vælg bunden først

   Blåsort til tech, grønsort til kode, varm sort til natteliv. Aldrig flad #000000.

2. 2

   Vælg én neonfarve efter betydning

   Gul til hastværk, magenta til natteliv, cyan til skærme, grøn til kode, rød til alarmer.

3. 3

   Tilføj én accent

   En anden neonfarve brugt i små mængder: et tidspunkt, en pris, en tynd streg.

4. 4

   Tilføj ruhed

   Korn, scanlinjer eller en betontekstur forhindrer, at de mørke områder ligner tom skærm.

Hvis din kanal eller dit hold har brug for en cyberpunk-baggrund, der virkelig er din, kan du sikre dig en Gradiently-Mark, så kun du kan eksportere med den, og den flytter af sig selv sit roligste, mest kontrastrige område bag dine ord. Kanalgrafik til gaming og branding af esportshold viser udtrykket i brug, og synthwave-farver dækker den varmere, mere nostalgiske nabo.