Cyberpunk färgpalett: neon på nästan svart, med hexkoder

En cyberpunk färgpalett är neon på nästan svart: syragult, het magenta, elektrisk cyan och giftgrönt, satta mot den blåsvarta nattstaden. Looken kommer från årtionden av science fiction om högteknologi och låg levnadsstandard, så färgerna känns artificiella och lite farliga. Regeln som får det att fungera är återhållsamhet: ett dominerande neon, en accent och mycket mörker.

De centrala cyberpunkfärgerna

Varje neon har ett jobb. Gult läses som industriellt och brådskande, som varningstejp. Rött betyder varning. Magenta är nattliv och reklam. Cyan är gränssnitt, skärmar och data. Grönt är kod och kemikalier. Välj neonet vars jobb matchar ditt budskap så börjar paletten berätta historien åt dig.

Fem cyberpunkpaletter med hexkoder

Cyberpunkfärger som CSS-variabler

För en webbplats, ett streamöverlägg eller ett spelgränssnitt, sätt upp paletten som anpassade egenskaper så att du kan byta huvudneon på ett ställe. Det här exemplet använder paletten Nattmarknad med neonet sparat till ramar, länkar och ett fokalt element.

: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 anpassade CSS-egenskaper för teman för att byta paletter, och design för mörkt läge för de allmänna reglerna för att bygga på mörka bottnar.

Foton i en cyberpunkpalett

Vanliga foton kan dras in i paletten. Nattbilder av gator, regn på glas, parkeringshus och trapphus fungerar alla när de mörkats och färgats. En duoton som mappar skuggor till din bottenfärg och högdagrar till ditt huvudneon förvandlar en tråkig telefonbild av en busshållplats till något som hör hemma i uppsättningen. Håll färgningen stark på bakgrunder och mildare på ansikten, där en full neonduoton kan se hård ut. Duoton-effekten förklarar hur du väljer de två färgerna.

Håll cyberpunktext läsbar

Neon på nästan svart känns som att det måste vara läsbart, och för stora rubriker är det oftast det. Problemen börjar med liten text och de mörkare neonfärgerna. Mättat rött och blått är mörkare för ögat än de ser ut: rent blått #0000ff på svart faller igenom även för stor text, och varningsrött klarar bara precis gränsen för liten text. Gult, cyan och grönt är de mest läsbara neonfärgerna på mörka bottnar. Kontrollera par mot WCAG-riktlinjerna som förklaras av WebAIM innan du bestämmer dig.

En glöd runt bokstäver är den vanligaste cyberpunkklichén, och den är också det som gör text till en fläck på en telefon. Låt bakgrunden bära ljuset och håll bokstäverna skarpa. Färgkontrast och tillgänglighet går igenom siffrorna.

Cyberpunkpaletter i riktiga designer

Looken passar naturligt för spelkanaler, esportlag, streamers, elektronisk musik, techlanseringar och allt som handlar om städernas framtid. Den kan också fungera för en bar eller en nattöppen matstånd som vill kännas som en scen ur en film.

1. 1

   Välj botten först

   Blåsvart för tech, grönsvart för kod, varmsvart för nattliv. Aldrig platt #000000.

2. 2

   Välj ett neon efter betydelse

   Gult för brådska, magenta för nattliv, cyan för skärmar, grönt för kod, rött för larm.

3. 3

   Lägg till en accent

   Ett andra neon i små mängder: en tid, ett pris, en tunn linje.

4. 4

   Lägg till grus

   Korn, scanlinjer eller en betongtextur hindrar de mörka ytorna från att se ut som tom skärm.

Om din kanal eller ditt lag behöver en cyberpunkbakgrund som verkligen är din kan du säkra en Gradiently-Mark så att bara du kan exportera med den, och den flyttar själv sitt lugnaste, mest kontrastrika område bakom dina ord. Gaming-kanalgrafik och varumärkesbyggande för esportlag visar looken i bruk, och synthwave-färger tar upp den varmare, mer nostalgiska grannen.