# Teknologiabrändin väripaletti perussinisen sijaan [Canonical HTML page](https://gradiently.design/fi/guide/tech-color-palettes) Sininen viestii luotettavuutta, aivan kuten kaikkien muidenkin teknologiayritysten sininen. Tässä on kahdeksan ohjelmistoille sopivaa palettia koodeineen sekä rakenne, jolla saat ne toimimaan tuotteessa. ## The short version - Toimivassa teknologiabrändin väripaletissa on viisi osaa: tumma pohja, vaalea pohja, neutraali harmaa-asteikko, yksi brändin tehosteväri ja joukko tilavärejä. - Sininen hallitsee teknologiabrändejä, koska se tuntuu rauhalliselta ja luotettavalta. Juuri siksi pelkkä sininen tehoste tekee brändistä harvoin tunnistettavan. - Tehosteväri on paletin mieleen jäävä osa, joten valitse väri, jota oma toimialasi ei vielä ole ottanut omakseen. - Onnistumisen, varoituksen ja virheen tilavärien kannattaa pysyä totuttuina, vaikka brändin tehosteväri olisi poikkeava. Käyttäjät tukeutuvat niihin toimiessaan. - Tuotepaletin jokaisen tekstin ja taustan yhdistelmän on täytettävä WCAG-kontrastivaatimukset, vähintään 4,5:1 leipätekstille. 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](https://gradiently.design/fi/guide/color-psychology) 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: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)` - Grafiitti ja huomio-oranssi: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)` - Paperi ja mänty: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)` - Keskiyönvioletti ja pinkki: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)` - Syvä petrolinsininen ja minttu: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)` - Viileä valkoinen ja sähkönsininen: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)` - Espresso ja meripihka: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)` - Musta ja pehmeä talvio: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)` Kahdeksan lähtökohtaa. Huomaa pohjan vaikutus: sama tehoste tuntuu mustalla kehittäjätyökalulta ja paperilla rauhalliselta tuottavuussovellukselta. - **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ä. - Yönmusta muste: #0b1020 - Liuskeensininen: #1e2a4a - Sumunharmaa: #8a94a8 - Pilvi: #eef1f6 - Happolime: #c6f432 Yönmusta muste ja happolime toimivana sarjana: kaksi pohjaa, keskiharmaa toissijaiselle tekstille ja tehoste. Limeä käytetään yhdessä painikkeessa ja yhdessä korostuksessa näkymää kohti, ei koskaan leipätekstinä valkoisella. ## 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. | Tehtävä | Käyttö | Esimerkki | | --- | --- | --- | | Tumma pohja | Sovelluksen tausta tummassa tilassa, alatunnisteet, pääosiot | `#0b1020` | | Vaalea pohja | Sovelluksen tausta vaaleassa tilassa, asiakirjat, sähköposti | `#fafaf7` | | Neutraali asteikko | Teksti, reunat, erottimet ja käytöstä poistetut tilat 8:sta 10:een ulottuvalla asteikolla | `#f2f4f7` ... `#111827` | | Brändin tehoste | Ensisijaiset painikkeet, linkit, tärkein painettava asia | `#c6f432` | | Tilavärit | Onnistuminen, varoitus, virhe, tieto | Vihreä, meripihka, punainen, sininen | Ensin tehtävät, sitten sävyt. Useimmat tuotteet tarvitsevat paljon enemmän harmaita kuin brändivärejä. > **Pidä tilavärit tavanomaisina** Poikkeava tehoste on brändipäätös. Poikkeava virheväri on käytettävyysongelma. Virheiden punaisen ja onnistumisten vihreän on pysyttävä tunnistettavina, vaikka säädät tarkat sävyt sopimaan tehosteväriisi. ## 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. ```css :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; } } ``` Tehtäväkohtaiset tokenit molempiin tiloihin. Tehoste voi vaihtua tilojen välillä: sähkönsininen valkoisella, lime yönmustalla musteella, kunhan kumpikin tuntuu samalta brändiltä. Teknologiapaletti joutuu koetukselle tummassa tilassa, jossa kehittäjät ja tehokäyttäjät usein työskentelevät. [Tumman tilan suunnittelu](https://gradiently.design/fi/guide/dark-mode-design) 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](https://gradiently.design/fi/guide/css-gradient-oklch). ## 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](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo koko menetelmän. ### Vältä - Limen- tai mintunvärinen teksti valkoisella sivulla - Sama tehoste yhtä aikaa painikkeissa, linkeissä, kaavioissa ja otsikoissa - Puhdas musta pohja ja puhdas valkoinen teksti kaikkialla - Brändiin taivutetut tilavärit, joissa punainen näyttää oranssilta ### Tee näin - Kirkkaat tehosteet täyttöväreinä ja tumma teksti päällä - Tehosteelle yksi tehtävä: ensisijainen toiminto - Hieman vaalennettu tumma pohja ja murrettu valkoinen teksti - Totutut tilavärit, vain sävyä hienosäätäen ## 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](https://gradiently.design/fi/guide/saas-startup-branding) ja [finanssiteknologian brändäys](https://gradiently.design/fi/guide/fintech-branding) näyttävät, miten tämä toimii kahdella hyvin erilaisella alalla. Vaakasuuntainen julkaisukuva, joka kertoo neljän sekunnin käyttöönotosta ja beetaversiosta Julkaisukuva LinkedInin linkkikuvakoossa 1200×627. Tausta kantaa brändiä ja teksti pysyy lyhyenä. Pystysuuntainen somejulkaisu, joka julkistaa ohjelmistotuotteen version 3 Sama järjestelmä pystyjulkaisuna koossa 1080×1350. 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. ## FAQ ### Mitkä värit sopivat parhaiten teknologiayritykselle? Mikä tahansa väri toimii, kun paletin rakenne on selkeä: kaksi pohjaa, neutraali asteikko, yksi tehoste ja totutut tilavärit. Valitse tehoste, jota kilpailijasi eivät vielä käytä. ### Miksi niin monet teknologiayritykset käyttävät sinistä? Sininen tuntuu rauhalliselta ja luotettavalta ja sopii käyttöliittymiin. Koska moni yritys valitsi sen samoista syistä, pelkkä sininen tehoste tekee brändistä harvoin tunnistettavan. ### Kuinka monta väriä SaaS-paletissa pitäisi olla? Tavallisesti yksi brändin tehoste, 8:sta 10:een ulottuva neutraali harmaa-asteikko, kaksi pohjaa ja neljä tilaväriä. Tuotteet tarvitsevat paljon harmaita ja hyvin vähän brändivärejä. ### Voiko kirkas tehoste, kuten lime, toimia teknologiabrändissä? Kyllä, erityisesti tummilla pohjilla. Käytä sitä täyttövärinä ja tummaa tekstiä päällä, älä tekstinä valkoisella, jolla sen kontrasti ei riitä.