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

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

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

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.

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

CSS:n mukautetut ominaisuudet teemoissa käsittelee palettien vaihtamista ja tumman tilan suunnittelu 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 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 selittämien WCAG-ohjeiden mukaan ennen valintaa.

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

1. 1

   Valitse pohja ensin

   Sinimusta teknologiaan, vihertävä musta koodiin, lämmin musta yöelämään. Ei tasaista #000000-väriä.

2. 2

   Valitse yksi neon merkityksen mukaan

   Keltainen kiireeseen, magenta yöelämään, syaani näytöille, vihreä koodiin, punainen hälytyksiin.

3. 3

   Lisää yksi korostus

   Toinen neon pieninä määrinä: kellonaika, hinta tai ohut viiva.

4. 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 ja esports-joukkueen brändäys näyttävät ilmeen käytännössä. Synthwave-värit käsittelee lämpimämpää ja nostalgisempaa naapuria.