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

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

Regn på beton, skilte i tre alfabeter, en automat, der summer i en baggård. Cyberpunk-farve er hårdt lys i en mørk by. Her er fem paletter med koder og måder at holde dem læselige på.

## The short version

- En cyberpunk-farvepalet sætter en eller to hårde neonfarver som syregul, magenta, cyan eller giftgrøn mod en næsten sort bund.
- Bunden i cyberpunk-design er sjældent ren sort: blåsort, grønsort eller vådt asfaltgråt giver neonfarverne noget at sidde i.
- Cyberpunk adskiller sig fra synthwave ved at være koldere og råere, med industrielle gule og grønne toner i stedet for solnedgangens lyserøde og orange.
- Gul, cyan og grøn på næsten sort klarer kontrasttjek let, mens ren blå falder igennem, og røde ligger meget tættere på grænsen.
- Én dominerende neonfarve og én sekundær accent pr. design holder cyberpunk-grafik slående frem for kaotisk.

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

- Natasfalt: #07080d
- Blåsort: #141824
- Våd beton: #2b2f3a
- Syregul: #fcee0a
- Advarselsrød: #ff003c
- Magentaskilt: #ff2bd6
- Cyan-HUD: #00f0ff
- Giftgrøn: #39ff14

Tre mørke toner til at bygge byen, fem neonfarver til at oplyse den. Du bruger sjældent mere end to neonfarver i ét design.

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

| Palet | Bund | Hovedneon | Accent |
| --- | --- | --- | --- |
| Fare | `#07080d` | Syregul `#fcee0a` | Cyan `#00f0ff` |
| Natmarked | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Giftgrøn `#39ff14` | Bleg mynte `#b8ffd0` |
| Rød alarm | `#0d0608` | Advarselsrød `#ff003c` | Syregul `#fcee0a` |
| Kold krom | `#0b0f17` | Cyan `#00f0ff` | Stål `#9aa4b5` |

Hver palet er en bund, én hovedneon og én accent. Brug accenten på mindre end en tiendedel af designet.

- Fare: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Natmarked: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Terminal: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Rød alarm: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Kold krom: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

De samme fem paletter som baggrunde. Neonfarven er skubbet ud mod en kant eller et hjørne, så det meste af fladen forbliver mørkt nok til ord.

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

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

Brødteksten forbliver en blød råhvid; neonfarverne er forbeholdt kanter, links og ét oplyst hjørne.

Se [CSS-brugerdefinerede egenskaber til temaer](https://gradiently.design/da/guide/css-custom-properties-theming) for at skifte paletter og [mørk tilstand i design](https://gradiently.design/da/guide/dark-mode-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](https://gradiently.design/da/guide/duotone-effect) 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](https://webaim.org/resources/contrastchecker/), før du låser dig fast.

### Svært at læse

- Lange afsnit sat i magenta eller rød
- Neontekst med en sløret glød omkring
- Tekst over den klareste del af neonlyset
- Tre eller fire neonfarver, der konkurrerer i én linje
- Glitch-effekter på hvert ord

### Let at læse

- Brødtekst i råhvid, neon til overskrifter
- Massive, skarpe bogstaver uden glorie
- Ord placeret på den mørke del af bunden
- Én neonfarve pr. design, én lille accent
- Glitch på ét enkelt ord eller slet ikke

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](https://gradiently.design/da/guide/color-contrast-accessibility) 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.

Et thumbnail i bredformat, der annoncerer, at sæson 4 går live i aften, i gul skrift på en næsten sort cyberpunk-baggrund

Et YouTube-thumbnail i paletten Fare: gul overskrift, mørk bund, cyan til tidspunktet.

Et opslag i højformat med teksten Nudler til kl. 3 om natten i lys skrift på en mørkeblå baggrund med magenta lys

Et sent aftenopslag om mad i paletten Natmarked, med magenta holdt til baggrunden.

1. **Vælg bunden først** Blåsort til tech, grønsort til kode, varm sort til natteliv. Aldrig flad #000000.
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. **Tilføj én accent** En anden neonfarve brugt i små mængder: et tidspunkt, en pris, en tynd streg.
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](https://gradiently.design/da/guide/gaming-channel-art) og [branding af esportshold](https://gradiently.design/da/guide/esports-team-branding) viser udtrykket i brug, og [synthwave-farver](https://gradiently.design/da/guide/synthwave-colors) dækker den varmere, mere nostalgiske nabo.

## FAQ

### Hvilke farver bruges i cyberpunk?

Neon i syregul, magenta, cyan, giftgrøn og advarselsrød, sat mod næsten sorte bunde som blåsort eller vådt betongråt.

### Hvad er hex-koderne til en cyberpunk-palet?

Et godt udgangspunkt er #07080d til bunden, #fcee0a syregul, #ff2bd6 magenta, #00f0ff cyan og #39ff14 giftgrøn.

### Hvad er forskellen på cyberpunk- og synthwave-farver?

Synthwave er varm og nostalgisk, bygget omkring en lyserød og orange solnedgang på indigo. Cyberpunk er koldere og råere, med industrielle gule, grønne og cyan toner på næsten sort.

### Er neontekst på sort tilgængelig?

Gul, cyan og grøn på næsten sort klarer som regel kontrasttjek let. Ren blå falder igennem, og røde klarer det kun lige, så test hvert par og hold lang tekst væk fra hvid.