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

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

Regn på betong, skilt i tre alfabeter, en salgsautomat som summer i en bakgate. Cyberpunk-farger er hardt lys i en mørk by. Her er fem paletter med koder, og hvordan du holder dem lesbare.

## The short version

- En cyberpunk-fargepalett setter én eller to skarpe neonfarger, som syregult, magenta, cyan eller giftgrønt, mot nesten svart bunn.
- Bunnen i cyberpunk-design er sjelden helt svart. Blåsvart, grønnsvart eller våt asfaltgrå gir neonfargene et rom å ligge i.
- Cyberpunk skiller seg fra synthwave ved å være kjøligere og røffere, med industrielle gule og grønne toner fremfor solnedgangens rosa og oransje.
- Gult, cyan og grønt på nesten svart består lett kontrastkontroller. Rent blått stryker, og rødt ligger mye nærmere grensen.
- Én dominerende neonfarge og én sekundær aksent per design holder cyberpunk-grafikk slående fremfor kaotisk.

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

- Nattasfalt: #07080d
- Blåsvart: #141824
- Våt betong: #2b2f3a
- Syregult: #fcee0a
- Varselrødt: #ff003c
- Magentaskilt: #ff2bd6
- Cyan-HUD: #00f0ff
- Giftgrønt: #39ff14

Tre mørke toner som bygger byen, fem neonfarger som lyser den opp. Du bruker sjelden mer enn to neonfarger i ett design.

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

| Palett | Bunn | Hovedneon | Aksent |
| --- | --- | --- | --- |
| Fare | `#07080d` | Syregult `#fcee0a` | Cyan `#00f0ff` |
| Nattmarked | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Giftgrønt `#39ff14` | Lys mint `#b8ffd0` |
| Rød alarm | `#0d0608` | Varselrødt `#ff003c` | Syregult `#fcee0a` |
| Kald krom | `#0b0f17` | Cyan `#00f0ff` | Stål `#9aa4b5` |

Hver palett er en bunn, én hovedneon og én aksent. Bruk aksenten på mindre enn en tidel av designet.

- Fare: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Nattmarked: `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%)`
- Kald krom: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

De samme fem palettene som bakgrunner. Neonfargen skyves til en kant eller et hjørne, så det meste av flaten er mørk nok for ord.

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

```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 forblir myk, brukket hvit. Neonfargene brukes bare til kanter, lenker og ett opplyst hjørne.

Se [egendefinerte CSS-egenskaper til temaer](https://gradiently.design/nb/guide/css-custom-properties-theming) for bytte av paletter, og [design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) 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](https://gradiently.design/nb/guide/duotone-effect) 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](https://webaim.org/resources/contrastchecker/) før du bestemmer deg.

### Vanskelig å lese

- Lange avsnitt i magenta eller rødt
- Neontekst med uskarp glød rundt
- Tekst over den lyseste delen av neonfargen
- Tre eller fire neonfarger som konkurrerer i én linje
- Glitch-effekter på hvert ord

### Lett å lese

- Brødtekst i brukket hvitt, neon til overskrifter
- Solide, skarpe bokstaver uten lysring
- Ord på den mørke delen av bunnen
- Én neonfarge per design, én liten aksent
- Glitch på ett ord eller ingen steder

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

Et liggende miniatyrbilde som annonserer sesong 4 i kveld med gul skrift på en nesten svart cyberpunk-bakgrunn

Et YouTube-miniatyrbilde i Fare-paletten: gul overskrift, mørk bunn og cyan til tidspunktet.

Et stående innlegg med teksten Nudler frem til kl. 3 i lys skrift på mørk blå bakgrunn med magentalys

Et nattmatinnlegg i Nattmarked-paletten, med magenta bare i bakgrunnen.

1. **Velg bunnen først** Blåsvart til teknologi, grønnsvart til kode, varmt svart til natteliv. Aldri flatt #000000.
2. **Velg én neonfarge etter betydning** Gult for hastverk, magenta for natteliv, cyan for skjermer, grønt for kode, rødt for varsler.
3. **Legg til én aksent** En ekstra neonfarge i små mengder: et tidspunkt, en pris, en tynn linje.
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](https://gradiently.design/nb/guide/gaming-channel-art) og [merkevarebygging for e-sportlag](https://gradiently.design/nb/guide/esports-team-branding) viser uttrykket i bruk. [Synthwave-farger](https://gradiently.design/nb/guide/synthwave-colors) dekker den varmere, mer nostalgiske naboen.

## FAQ

### Hvilke farger brukes i cyberpunk?

Neonfarger som syregult, magenta, cyan, giftgrønt og varselrødt mot nesten svarte bunner som blåsvart eller våt betonggrå.

### Hva er hex-kodene til en cyberpunk-palett?

Et godt startsett er #07080d til bunnen, #fcee0a syregult, #ff2bd6 magenta, #00f0ff cyan og #39ff14 giftgrønt.

### Hva er forskjellen på cyberpunk- og synthwave-farger?

Synthwave er varmt og nostalgisk, bygget rundt en rosa og oransje solnedgang på indigo. Cyberpunk er kjøligere og røffere, med industrielle gule, grønne og cyanfarger på nesten svart.

### Er neontekst på svart tilgjengelig?

Gult, cyan og grønt på nesten svart består vanligvis kontrastkontroller lett. Rent blått stryker, og rødt består så vidt. Test derfor hvert par og behold lang tekst i brukket hvitt.