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

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

Regn på betong, skyltar på tre alfabet, en varuautomat som brummar i en gränd. Cyberpunkfärg är hårt ljus i en mörk stad. Här är fem paletter med koder, och hur du håller dem läsbara.

## The short version

- En cyberpunk färgpalett sätter en eller två hårda neonfärger, som syragult, magenta, cyan eller giftgrönt, mot en nästan svart botten.
- Botten i cyberpunkdesign är sällan rent svart: blåsvart, grönsvart eller vått asfaltgrått ger neonet något att sitta i.
- Cyberpunk skiljer sig från synthwave genom att vara kallare och skitigare, med industriella gula och gröna toner i stället för solnedgångsrosa och orange.
- Gult, cyan och grönt på nästan svart klarar kontrastkontroller lätt, medan rent blått faller igenom och röda ligger mycket närmare gränsen.
- En dominerande neonfärg och en sekundär accent per design håller cyberpunkgrafik slagkraftig i stället för kaotisk.

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

- Nattasfalt: #07080d
- Blåsvart: #141824
- Våt betong: #2b2f3a
- Syragult: #fcee0a
- Varningsrött: #ff003c
- Magentaskylt: #ff2bd6
- Cyan-HUD: #00f0ff
- Giftgrönt: #39ff14

Tre mörka toner för att bygga staden, fem neon för att lysa upp den. Du använder sällan fler än två neonfärger i en design.

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

| Palett | Botten | Huvudneon | Accent |
| --- | --- | --- | --- |
| Fara | `#07080d` | Syragult `#fcee0a` | Cyan `#00f0ff` |
| Nattmarknad | `#141824` | Magenta `#ff2bd6` | Cyan `#00f0ff` |
| Terminal | `#050b07` | Giftgrönt `#39ff14` | Blek mint `#b8ffd0` |
| Röd alarm | `#0d0608` | Varningsrött `#ff003c` | Syragult `#fcee0a` |
| Kall krom | `#0b0f17` | Cyan `#00f0ff` | Stål `#9aa4b5` |

Varje palett är en botten, ett huvudneon och en accent. Använd accenten på mindre än en tiondel av designen.

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

Samma fem paletter som bakgrunder. Neonet skjuts mot en kant eller ett hörn, så större delen av ytan förblir mörk nog för ord.

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

```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ödtext förblir en mjuk off-white; neonen är reserverade för kanter, länkar och ett enda upplyst hörn.

Se [anpassade CSS-egenskaper för teman](https://gradiently.design/sv/guide/css-custom-properties-theming) för att byta paletter, och [design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) 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](https://gradiently.design/sv/guide/duotone-effect) 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](https://webaim.org/resources/contrastchecker/) innan du bestämmer dig.

### Svårläst

- Långa stycken satta i magenta eller rött
- Neontext med en suddig glöd runt
- Text över den ljusaste delen av neonet
- Tre eller fyra neonfärger som konkurrerar på en rad
- Glitcheffekter på varje ord

### Lättläst

- Brödtext i off-white, neon för rubriker
- Solida, skarpa bokstäver utan gloria
- Ord placerade på den mörka delen av botten
- Ett neon per design, en liten accent
- Glitch på ett enda ord eller inte alls

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

En liggande miniatyr som tillkännager att Säsong 4 går live ikväll, i gul text på en nästan svart cyberpunkbakgrund

En YouTube-miniatyr i paletten Fara: gul rubrik, mörk botten, cyan för tiden.

Ett inlägg i stående format med texten Nudlar till 03 i ljus text på mörkblå bakgrund med magentaljus

Ett nattmatsinlägg i paletten Nattmarknad, med magentan hållen i bakgrunden.

1. **Välj botten först** Blåsvart för tech, grönsvart för kod, varmsvart för nattliv. Aldrig platt #000000.
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. **Lägg till en accent** Ett andra neon i små mängder: en tid, ett pris, en tunn linje.
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](https://gradiently.design/sv/guide/gaming-channel-art) och [varumärkesbyggande för esportlag](https://gradiently.design/sv/guide/esports-team-branding) visar looken i bruk, och [synthwave-färger](https://gradiently.design/sv/guide/synthwave-colors) tar upp den varmare, mer nostalgiska grannen.

## FAQ

### Vilka färger används i cyberpunk?

Neonfärgerna syragult, magenta, cyan, giftgrönt och varningsrött, satta mot nästan svarta bottnar som blåsvart eller vått betonggrått.

### Vilka är hexkoderna för en cyberpunkpalett?

Ett bra startset är #07080d för botten, #fcee0a syragult, #ff2bd6 magenta, #00f0ff cyan och #39ff14 giftgrönt.

### Vad är skillnaden mellan cyberpunk- och synthwavefärger?

Synthwave är varmt och nostalgiskt, byggt kring en rosa och orange solnedgång på indigo. Cyberpunk är kallare och skitigare, med industriella gula, gröna och cyan toner på nästan svart.

### Är neontext på svart tillgänglig?

Gult, cyan och grönt på nästan svart klarar oftast kontrastkontroller lätt. Rent blått faller igenom och rött klarar sig bara precis, så testa varje par och håll lång text borta från vitt.