# Cyberpunk-väripaletti: neonvärit lähes mustalla

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

Sade betonilla, kylttejä kolmella aakkostolla, kujalla huriseva automaatti. Cyberpunk-väri on kovaa valoa pimeässä kaupungissa. Tässä viisi palettia koodeineen ja ohjeet niiden luettavuuteen.

## The short version

- Cyberpunk-väripaletti asettaa yhden tai kaksi kovaa neonväriä, kuten happokeltaisen, magentan, syaanin tai myrkynvihreän, lähes mustalle pohjalle.
- Cyberpunk-designin pohja on harvoin puhdas musta. Sinimusta, vihertävä musta ja märän asfaltin harmaa antavat neonväreille ympäristön.
- Cyberpunk on synthwavea kylmempi ja karheampi. Teolliset keltaiset ja vihreät korvaavat auringonlaskun pinkit ja oranssit.
- Keltainen, syaani ja vihreä läpäisevät lähes mustalla kontrastintarkistukset helposti. Puhdas sininen ei läpäise, ja punaiset ovat lähempänä rajaa.
- Yksi hallitseva neonväri ja yksi toissijainen korostus pitävät cyberpunk-grafiikan vaikuttavana kaaoksen sijaan.

**Cyberpunk-väripaletti** on neonia lähes mustalla: happokeltaista, kuumaa magentaa, sähköistä syaania ja myrkynvihreää öisen kaupungin sinimustaa vasten. Ilme kumpuaa vuosikymmenten tieteisfiktiosta, jossa huipputeknologia kohtaa karun arjen. Värit tuntuvat keinotekoisilta ja hieman vaarallisilta. Toimivuuden sääntö on pidättyvyys: yksi hallitseva neonväri, yksi korostus ja paljon tummaa.

## Cyberpunkin perusvärit

- Yöasfaltti: #07080d
- Sinimusta: #141824
- Märkä betoni: #2b2f3a
- Happokeltainen: #fcee0a
- Varoituspunainen: #ff003c
- Magentakyltti: #ff2bd6
- Syaani käyttöliittymä: #00f0ff
- Myrkynvihreä: #39ff14

Kolme tummaa kaupungin pohjaksi, viisi neonia valaisemaan sitä. Käytät harvoin yli kahta neonväriä yhdessä suunnitelmassa.

Jokaisella neonvärillä on tehtävä. Keltainen on teollinen ja kiireellinen kuin varoitusnauha. Punainen varoittaa. Magenta on yöelämää ja mainontaa. Syaani on käyttöliittymiä, näyttöjä ja dataa. Vihreä on koodia ja kemikaaleja. Valitse viestisi tehtävään sopiva neonväri, niin paletti alkaa kertoa tarinaa puolestasi.

## Viisi cyberpunk-palettia heksakoodeineen

| Paletti | Pohja | Pääneon | Korostus |
| --- | --- | --- | --- |
| Vaara | `#07080d` | Happokeltainen `#fcee0a` | Syaani `#00f0ff` |
| Yötori | `#141824` | Magenta `#ff2bd6` | Syaani `#00f0ff` |
| Pääte | `#050b07` | Myrkynvihreä `#39ff14` | Vaalea minttu `#b8ffd0` |
| Punainen hälytys | `#0d0608` | Varoituspunainen `#ff003c` | Happokeltainen `#fcee0a` |
| Kylmä kromi | `#0b0f17` | Syaani `#00f0ff` | Teräs `#9aa4b5` |

Jokaisessa paletissa on pohja, yksi pääneon ja yksi korostus. Käytä korostusta alle kymmenesosassa suunnitelmaa.

- Vaara: `linear-gradient(135deg, #07080d 0%, #141824 55%, #3a3a12 85%, #fcee0a 100%)`
- Yötori: `linear-gradient(135deg, #141824 0%, #3a1448 50%, #ff2bd6 80%, #00f0ff 100%)`
- Pääte: `radial-gradient(circle at 80% 85%, #39ff14 0%, #0f3d16 25%, #050b07 65%)`
- Punainen hälytys: `linear-gradient(160deg, #0d0608 0%, #3d0612 55%, #ff003c 100%)`
- Kylmä kromi: `linear-gradient(180deg, #0b0f17 0%, #1d2738 60%, #00f0ff 100%)`

Samat viisi palettia taustoina. Neon on työnnetty reunaan tai kulmaan, jotta suurin osa pinnasta jää sanoille tarpeeksi tummaksi.

## Cyberpunk-värit CSS-muuttujina

Verkkosivulle, striimikerrokselle tai pelikäyttöliittymälle määritä paletti mukautetuiksi ominaisuuksiksi, niin pääneonin voi vaihtaa yhdessä kohdassa. Esimerkki käyttää Yötori-palettia ja rajaa neonin reunuksiin, linkkeihin ja yhteen huomion kohteeseen.

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

Leipäteksti pysyy pehmeän luonnonvalkoisena. Neonit on varattu reunoille, linkeille ja yhdelle valaistulle kulmalle.

[CSS:n mukautetut ominaisuudet teemoissa](https://gradiently.design/fi/guide/css-custom-properties-theming) käsittelee palettien vaihtamista ja [tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) tummien pohjien yleisiä sääntöjä.

### Kuvat cyberpunk-paletissa

Tavallisetkin kuvat voi vetää palettiin. Öiset kadut, sade lasilla, pysäköintialueet ja porraskäytävät toimivat tummennettuina ja sävytettyinä. Duotone, joka muuntaa varjot pohjaväriksi ja valot pääneoniksi, tekee tylsästä bussipysäkin puhelinkuvasta kokonaisuuteen sopivan. Pidä taustojen sävytys vahvana ja kasvojen lempeämpänä. Täysi neonduotone voi olla kasvoilla kova. [Duotone-efekti](https://gradiently.design/fi/guide/duotone-effect) kertoo kahden värin valinnasta.

## Pidä cyberpunk-teksti luettavana

Neon lähes mustalla tuntuu varmasti luettavalta, ja suurissa otsikoissa se yleensä onkin. Ongelmat alkavat pienessä tekstissä ja tummemmissa neoneissa. Kylläinen punainen ja sininen ovat silmälle tummempia kuin näyttävät. Puhdas sininen `#0000ff` mustalla ei läpäise edes suuren tekstin vaatimusta, ja varoituspunainen ylittää pienen tekstin rajan vain niukasti. Keltainen, syaani ja vihreä ovat luettavimmat neonit tummalla. Tarkista parit [WebAIMin](https://webaim.org/resources/contrastchecker/) selittämien WCAG-ohjeiden mukaan ennen valintaa.

### Vaikea lukea

- Pitkät kappaleet magentana tai punaisena
- Neonteksti, jonka ympärillä on sumennettu hohde
- Teksti neonin kirkkaimmassa kohdassa
- Kolme tai neljä neonia kilpailemassa samalla rivillä
- Häiriöefekti jokaisessa sanassa

### Helppo lukea

- Leipäteksti luonnonvalkoisena, otsikot neonina
- Tasaiset, terävät kirjaimet ilman sädekehää
- Sanat pohjan tummassa osassa
- Yksi neonväri ja yksi pieni korostus
- Häiriö yhdessä sanassa tai ei lainkaan

Kirjainten ympärillä oleva hohde on yleisin cyberpunk-klisee. Se myös muuttaa tekstin puhelimessa tahraksi. Anna taustan kantaa valo ja pidä kirjaimet terävinä. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) käsittelee luvut.

## Cyberpunk-paletit oikeissa suunnitelmissa

Ilme sopii luontevasti pelikanaville, esports-joukkueille, striimaajille, elektroniseen musiikkiin, teknologiajulkaisuihin ja kaupunkien tulevaisuutta käsittelevään sisältöön. Se toimii myös baarissa tai myöhäisillan ruokakojussa, joka haluaa tuntua elokuvakohtaukselta.

Vaakapikkukuva, joka ilmoittaa kauden 4 alkavan tänä iltana keltaisella tekstillä lähes mustalla cyberpunk-taustalla

YouTube-pikkukuva Vaara-paletilla: keltainen otsikko, tumma pohja ja syaani kellonaika.

Pystyjulkaisu, jossa lukee Nuudeleita klo 3 asti vaalealla tekstillä tummansinisellä pohjalla magentavalossa

Myöhäisillan ruokajulkaisu Yötori-paletilla. Magenta jää taustalle.

1. **Valitse pohja ensin** Sinimusta teknologiaan, vihertävä musta koodiin, lämmin musta yöelämään. Ei tasaista #000000-väriä.
2. **Valitse yksi neon merkityksen mukaan** Keltainen kiireeseen, magenta yöelämään, syaani näytöille, vihreä koodiin, punainen hälytyksiin.
3. **Lisää yksi korostus** Toinen neon pieninä määrinä: kellonaika, hinta tai ohut viiva.
4. **Lisää karheutta** Rakeisuus, skannausviivat tai betonitekstuuri estävät tummia alueita näyttämästä tyhjältä näytöltä.

Jos kanavasi tai joukkueesi tarvitsee oman cyberpunk-taustan, voit lunastaa Gradientlyn Markin. Vain sinä voit viedä sillä suunnitelmia, ja se siirtää itse rauhallisimman, parhaiten kontrastoivan alueensa sanojen taakse. [Pelikanavan grafiikat](https://gradiently.design/fi/guide/gaming-channel-art) ja [esports-joukkueen brändäys](https://gradiently.design/fi/guide/esports-team-branding) näyttävät ilmeen käytännössä. [Synthwave-värit](https://gradiently.design/fi/guide/synthwave-colors) käsittelee lämpimämpää ja nostalgisempaa naapuria.

## FAQ

### Mitä värejä cyberpunk käyttää?

Neonhappokeltaista, magentaa, syaania, myrkynvihreää ja varoituspunaista lähes mustilla pohjilla, kuten sinimustalla tai märän betonin harmaalla.

### Mitkä ovat cyberpunk-paletin heksakoodit?

Hyvä aloitus on pohja #07080d, happokeltainen #fcee0a, magenta #ff2bd6, syaani #00f0ff ja myrkynvihreä #39ff14.

### Mitä eroa on cyberpunk- ja synthwave-väreillä?

Synthwave on lämmin ja nostalginen, pinkin ja oranssin auringonlasku indigolla. Cyberpunk on kylmempi ja karheampi: teollisia keltaisia, vihreitä ja syaaneja lähes mustalla.

### Onko neonteksti mustalla saavutettavaa?

Keltainen, syaani ja vihreä läpäisevät lähes mustalla kontrastintarkistukset yleensä helposti. Puhdas sininen ei läpäise ja punaiset läpäisevät niukasti. Testaa joka pari ja pidä pitkä teksti luonnonvalkoisena.