Teknologiabrändin väripaletti perussinisen sijaan

Hyvä teknologiabrändin väripaletti rakentuu yhden päävärin sijasta järjestelmästä: tummasta ja vaaleasta pohjasta, neutraalien harmaiden asteikosta, omasta tehosteväristä sekä totutuista onnistumisen, varoituksen ja virheen väreistä. Yrityssininen on niin monen ohjelmistoyrityksen tehosteväri, ettei se enää kerro juuri mistään erityisestä. Vaihda tehoste väriin, jota toimialasi ei vielä käytä, ja pidä muu paletti hallittuna. Brändi näyttää silti osaavalta teknologiayritykseltä.

Miksi teknologiabrändit valitsevat yhä sinisen

Sininen on turvallinen. Se tuntuu useimmilla markkinoilla rauhalliselta ja luotettavalta, sopii käyttöliittymiin ja on verkon oletusarvoinen linkkiväri. Syyt ovat hyviä, ja tuloksena on lähes samanlaisten sinisten meri pankkisovelluksissa, pilvipalvelujen näkymissä ja tuottavuustyökaluissa. Väripsykologia selittää mielleyhtymät. Ongelma on vain se, että kaikki toimivat niiden mukaan samaan aikaan.

Sininen ei siis ole väärä valinta. Se ei vain voi olla ainoa ideasi. Jos pidät sen, yhdistä siihen yllättävä pohja, toinen väri tai erottuva materiaali, jotta identiteetti tunnistetaan ilman logoakin.

Kahdeksan teknologian väripalettia heksakoodeineen

Jokaisessa alla olevassa paletissa on pohja, tukisävy ja tehoste. Ne esitetään liukuväreinä, jotta näet värien yhteispelin. Kahdesta käyttöliittymässä tehokkaimmasta paletista on myös erilliset värinäytteet.

• Yönmusta muste ja happolime sopii kehittäjätyökaluihin ja infrastruktuuriin: tekninen ja yöllinen, mahdoton sekoittaa pankkiin.
• Grafiitti ja huomio-oranssi viestii laitteista, robotiikasta tai muusta fyysisestä. Oranssi näkyy hyvin myös tummissa tuotekuvissa.
• Paperi ja mänty on rauhallinen vaihtoehto tutkimus-, kirjoitus- ja terveysohjelmistoille, joissa levollisuus on nopeutta tärkeämpää.
• Keskiyönvioletti ja pinkki sopii kuluttajasovelluksiin ja luoviin työkaluihin, jotka kaipaavat energiaa ilman tavallista sinisestä violettiin kulkevaa liukuväriä.
• Syvä petrolinsininen ja minttu toimii ilmasto-, data- ja finanssiteknologiabrändeille, jotka haluavat tuntua raikkailta yritysmäisyyden sijasta.
• Viileä valkoinen ja sähkönsininen säilyttää sinisen mutta tekee siitä kirkkaan ja ainutlaatuisen, lähes ilman muita elementtejä.
• Espresso ja meripihka on teknologiassa lämmin ja poikkeava valinta. Se sopii ravintola- ja hotelliohjelmistoihin, ääneen ja kaikkeen ihmislähtöiseen.
• Musta ja pehmeä talvio on hillitty ja arvokas, lähellä monien tekoälytuotteiden nykyistä yhteistä ilmettä.

Tuotteen väripaletin viisi osaa

Markkinointisivut voivat pärjätä kolmella värillä. Tuote ei voi, sillä käyttöliittymät tarvitsevat reunoja, käytöstä poistettuja tiloja, korostuksia ja ilmoituksia. Suunnittele värien tehtävät ennen sävyjen valintaa, niin paletti pysyy yhtenäisenä tuotteen kasvaessa.

Teknologiapaletista suunnittelutokeneiksi

Nimeä värit tehtävän, älä ulkonäön mukaan. Token --accent kestää brändiuudistuksen; --lime muuttuu harhaanjohtavaksi heti, kun tehosteväri vaihtuu. Määrittele jokainen tehtävä kerran vaalealle ja kerran tummalle tilalle. Anna komponenttien viitata aina vain tehtäviin.

:root {
  --ground: #fafaf7;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #d9dde3;
  --accent: #3344ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #141a2e;
    --text: #eef1f6;
    --text-muted: #8a94a8;
    --border: #1e2a4a;
    --accent: #c6f432;
    --on-accent: #0b1020;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}

Teknologiapaletti joutuu koetukselle tummassa tilassa, jossa kehittäjät ja tehokäyttäjät usein työskentelevät. Tumman tilan suunnittelu käsittelee yksityiskohtia: esimerkiksi pohjan nostamista hieman puhtaasta mustasta ja tilavärien vaalentamista, jotta ne eivät värise. Jos kaipaat nykynäytöillä kirkkaina pysyviä liukuvärejä, tutustu CSS:n oklch-liukuväreihin.

Tarkista kontrasti ennen julkaisua

Kirkkaat tehosteet, kuten lime, minttu ja meripihka, näyttävät upeilta tummilla pohjilla mutta eivät riitä tekstiksi valkoisella. WCAG vaatii leipätekstiltä kontrastia 4,5:1 sekä suurelta tekstiltä ja käyttöliittymäelementeiltä 3:1. Testaa jokainen suunnittelemasi yhdistelmä ja kirjaa sallitut yhdistelmät. Värikontrasti ja saavutettavuus kertoo koko menetelmän.

Vie paletti käyttöliittymän ulkopuolelle

Julkaisuviestit, konferenssidiat ja muutoslokin kuvat tekevät teknologiapaletista brändin. Tasaiset tehosteväripinnat alkavat nopeasti toistaa itseään. Anna markkinointiin rikkaampi pinta: pohjaväri, sen läpi tuleva valo, rakeisuus ja tehosteen hidas liike. SaaS-brändäys ja finanssiteknologian brändäys näyttävät, miten tämä toimii kahdella hyvin erilaisella alalla.

Tähän Gradiently sopii. Mark antaa teknologiabrändille elävän taustan, jolla vain sinä voit viedä suunnitelmia lunastettuasi sen. Se renderöityy joka kokoon linkkikuvasta diaan ja pitää julkaisutiedot luettavina siirtämällä rauhallisimman alueensa tekstin taakse. Voit myös pyytää Designerilta julkaisupostausta, ja se tekee muut koot puolestasi.