# Brändiväri-ideoita: 30 palettia uusille brändeille koodeineen

[Canonical HTML page](https://gradiently.design/fi/guide/brand-color-ideas)

Brändipaletti koostuu neljästä tai viidestä väristä, joilla on omat tehtävänsä. Tässä on 30 lähtökohtaa tunnelman ja toimialan mukaan, kopioitavat koodit ja tapa testata niitä.

## The short version

- Toimivassa brändipaletissa on neljä tai viisi väriä, joilla on vakiotehtävät: pohja, pääväri, tukisävy, neutraali tekstiväri ja yksi tehoste.
- Tehosteväri jää mieleen, joten käytä sitä yhdessä kohdassa kerrallaan, kuten painikkeessa, hinnassa tai logomerkissä.
- Toimialaan sopiva paletti auttaa asiakasta ymmärtämään tarjontasi, mutta yksi odottamaton väri tekee brändistä tunnistettavan.
- Testaa palettia oikeissa suunnitelmissa ja todellisessa koossa sekä vaaleana että tummana, sillä valkoisen sivun värimallit peittävät useimmat ongelmat.
- Tarkista, että tekstin ja pohjan välinen kontrasti täyttää WCAG-vaatimukset, muuten leipäteksti on monelle vaikealukuista.

Hyvät **brändiväri-ideat** alkavat tehtävistä, eivät suosikeista. Valitse pohjaväri, jonka päälle useimmat suunnitelmasi rakentuvat, yrityksesi luonteesta kertova pääväri, syvyyttä tuova tukisävy, neutraali tekstiväri ja yksi tehoste, josta sinut muistetaan. Alla on 30 näin rakennettua palettia: kuusi tunnelman mukaan värimalleineen ja 24 toimialan mukaan koodeineen. Lopuksi saat nopean tavan testata valintaasi.

## Miten brändin väripaletti rakentuu

Useimmat epäonnistuneet paletit sisältävät viisi yhtä vahvaa väriä. Mikään ei johda, joten mikään ei erotu. Paletti toimii, kun jokaisella värillä on oma osuutensa tilasta: pohja peittää suurimman osan, pääväri huomattavan osan ja tehoste vain pienen siivun. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) antaa hyvän lähtösuhteen, vaikka myöhemmin joustaisit siitä.

| Rooli | Osuus suunnitelmasta | Tehtävä |
| --- | --- | --- |
| Pohja | Noin 60% | Taustat, suuret pinnat, tunnelma |
| Pääväri | Noin 25% | Otsikot, muodot, sinuun yhdistetty väri |
| Tukiväri | Noin 5:stä 10 prosenttiin | Syvyys, toissijaiset pinnat, kuvitukset |
| Neutraali | Vain tekstissä | Pohjasta erottuva leipäteksti |
| Tehoste | Alle 5% | Yksi painike, hinta tai merkki suunnitelmassa |

Viisi roolia ja viisi osuutta. Tehoste toimii, koska sitä on vähän. Jos levität sitä kaikkialle, siitä tulee toinen pääväri.

## Brändin väripaletit tunnelman mukaan

Aloita tästä, jos tiedät, miltä haluat brändisi tuntuvan. Väriin liitetyt mielikuvat ovat kulttuurisidonnaisia, eivät yleispäteviä, kuten [väripsykologia](https://gradiently.design/fi/guide/color-psychology) selittää.

- Syvä laivastonsininen: #0b2545
- Satama: #13315c
- Usvansininen: #8da9c4
- Vaalea salvia: #eef4ed
- Messinki: #e0a458

1. Rauhallinen ja luotettava. Laivastonsininen tuntuu vakaalta. Messinkinen tehoste estää ilmettä muistuttamasta tiliotetta. Sopii rahoitus-, terveys- ja konsultointialalle.

- Espresso: #3d2314
- Terrakotta: #c8553d
- Aprikoosi: #f28f3b
- Kerma: #f6e7cb
- Salvianvihreä petrooli: #588b8b

2. Lämmin ja ystävällinen. Maanläheiset punaiset kermanvärisellä pohjalla tuntuvat käsintehdyiltä. Viileä salvianvihreä tehoste erottaa ilmeen muista kahviloista.

- Metsä: #1b3a2f
- Sammal: #4f772d
- Saniainen: #90a955
- Kalkkipesu: #ecf39e
- Liitu: #fdfcf6

3. Raikas ja luonnollinen. Syviä ja kirkkaita vihreitä liidunvärisellä pohjalla hyvinvointi- ja vastuullisuusbrändeille.

- Muste: #0d0d1a
- Ultramariini: #3a0ca3
- Violetti: #7209b7
- Kirkas pinkki: #f72585
- Sähköinen taivaansininen: #4cc9f0

4. Rohkea ja moderni. Lähes musta pohja saa kylläiset värit hehkumaan. Käytä sähköistä taivaansinistä säästeliäästi.

- Pehmeä musta: #1a1a1a
- Umbra: #4a3f35
- Antiikkikulta: #b08d57
- Pellava: #e8dcc8
- Norsunluu: #f7f3ee

5. Hillitty ylellisyys. Matala kylläisyys ja paljon tilaa. Kulta näyttää arvokkaalta vain vaimennettuna ja pieninä annoksina.

- Muste: #2b2d42
- Korallinpunainen: #ff6b6b
- Auringonkukka: #ffd93d
- Lehti: #6bcb77
- Altaansininen: #4d96ff

6. Leikkisä. Neljä kirkasta väriä, joita yksi tumma mustesävy pitää yhdessä. Anna yhden värin johtaa kussakin suunnitelmassa.

## Brändiväri-ideoita toimialoittain

Jokaisessa toimialapaletissa on neljä koodia, tavallisesti tummimmasta vaaleimpaan. Viimeinen sarake kertoo tehostevärin tehtävän. Vakiintuneilla tavoilla on syynsä: petroolinsininen hammaslääkäri ja lämpimänruskea leipomo ymmärretään yhdellä silmäyksellä. Noudata odotuksia päävärissä ja riko niitä varovasti tehosteella.

| Yritys | Paletti | Koodit | Miksi se toimii |
| --- | --- | --- | --- |
| Kirjanpitäjä | Tilikirja | `#1d3557` `#457b9d` `#f1faee` `#e63946` | Laivastonsininen luo luottamusta, punainen tehoste varataan tärkeimmälle luvulle |
| Asianajotoimisto | Lakikamari | `#2b2d42` `#8d99ae` `#edf2f4` `#9c6644` | Liuskekiveä ja paperia sekä nahkanruskea tehoste |
| Hammaslääkäri | Puhdas purenta | `#03363d` `#17a398` `#e6f4f1` `#ffb703` | Petrooli tuntuu kliiniseltä muttei kylmältä, keltainen on ystävällinen |
| Fysioterapiaklinikka | Palautuminen | `#264653` `#2a9d8f` `#e9f5f2` `#f4a261` | Rauhallisia sinivihreitä sekä lämmin, kannustava tehoste |
| Kahvila | Aamupaahto | `#4a2c2a` `#c08552` `#f3e9dc` `#5e8b7e` | Kahvinruskeita ja odottamaton vihreä |
| Leipomo | Crumb | `#7f4f24` `#dda15e` `#fefae0` `#bc4749` | Kuorta, voita ja jauhoa sekä hillonpunaista tarjouksiin |
| Iltaravintola | Illalliskerho | `#1b1b1e` `#7a1e2c` `#d4a373` `#f5ebe0` | Tumma pohja ja viininpunainen tuovat illallistunnelmaa, tehosteena kinuski |
| Kukkakauppa | Varsi | `#2d4a3e` `#e5989b` `#ffcdb2` `#fffaf5` | Syvä lehdenvihreä saa pehmeän pinkin tehosteen näyttämään raikkaalta |
| Joogastudio | Hengitys | `#5e548e` `#9f86c0` `#e0b1cb` `#fbf8f3` | Hämärät violetit rauhoittavat katsetta, tehosteena ruusunpinkki |
| Kuntosali | Toisto | `#111111` `#3a3a3a` `#f2f2f2` `#e4ff1a` | Mustaa ja harmaata sekä yksi räikeä happokeltainen |
| Ihonhoito | Kaste | `#6b4e3d` `#e8b4a0` `#f6e3d8` `#fdf8f4` | Ihonsävyjä ja lämpimiä valkoisia, kaakaonruskea teksti ja persikkatehoste |
| Muotimerkki | Ateljee | `#0f0f0f` `#c9c1b6` `#f4f1ec` `#8a1c1c` | Mustaa ja kiveä sekä yksi häränverenpunainen |
| Kultaseppä | Sametti | `#14213d` `#2e1a47` `#f5f0e6` `#c9a227` | Yönsiniset korostavat kultaa kuin vitriini |
| Kiinteistönvälittäjä | Ulko-ovi | `#22333b` `#5e503f` `#eae0d5` `#c6ac8f` | Hiili ja puunsävyt tuntuvat hyvin hoidetulta kodilta, tehosteena hiekka |
| Arkkitehtitoimisto | Betoni | `#262626` `#7d7d7d` `#d9d9d9` `#ff5a1f` | Materiaalien harmaita sekä yksi huomioliivin oranssi |
| Kehittäjätyökalu | Pääte | `#0b1021` `#1f6feb` `#e6edf3` `#7ee787` | Tummia käyttöliittymän sinisiä ja koodinvihreä tehoste |
| Fintech | Minttutilikirja | `#0a2e2a` `#00b37e` `#d7f9ec` `#1e1e24` | Syvä vihreä ja kirkas minttutehoste viittaavat rahaan ilman dollarikliseitä |
| Tekoälytuote | Signaali | `#0e0b16` `#5b5bd6` `#a78bfa` `#f0abfc` | Indigo lähes mustalla pohjalla ja hillitty orkideatehoste |
| Podcast | Lähetyksessä | `#1a1423` `#ff7b54` `#ffb26b` `#ffd56b` | Tumma studiopohja ja lämmin auringonlaskun värisarja, koralli johtaa |
| Lastenbrändi | Leikkikenttä | `#118ab2` `#06d6a0` `#ffd166` `#ef476f` | Kirkkaita, puhtaita värejä sopivasti pehmennettyinä, tehosteena pinkki |
| Hyväntekeväisyys | Yhteinen pohja | `#2f3e46` `#52796f` `#cad2c5` `#f4a259` | Vakavia vihreitä ja toiveikas oranssi |
| Retkeilyvarusteet | Polun alku | `#283618` `#606c38` `#fefae0` `#dd6b20` | Oliivia ja kangasta sekä hyvin erottuva oranssi |
| Hääsuunnittelija | Vihkivalat | `#6d597a` `#b56576` `#e8c2ca` `#fbf6f0` | Luumua ja ruusutehoste, joka näyttää hyvältä kuvattuna paperilla |
| Muusikko | Yömyöhä | `#090014` `#3c096c` `#ff006e` `#fb5607` | Klubin pimeyttä sekä kaksi hehkuvaa, toisiinsa sopivaa tehostetta |

Kopioi koodit [brändipakettiisi](https://gradiently.design/fi/guide/brand-kit) ja säädä yhtä väriä, kunnes paletti tuntuu omalta.

## Näin paletti alkaa tuntua brändiltäsi

Valmiin paletin muuttaa identiteetiksi yksi päätös, jota kukaan muu samalla kadulla ei ole tehnyt. Usein se on tehoste: nahkanruskea lakitoimisto tai happokeltainen kuntosali. Vaihda ensin tehoste ja säilytä pohja sekä tekstiväri. Saat oman ilmeen menettämättä luettavuutta.

### Vältä

- Viittä kirkasta väriä yhtä suurina osuuksina
- Logovärin valitsemista ensin ja muita silmämääräisesti
- Tehostetta jokaisessa suunnitelman elementissä
- Vaaleanharmaata tekstiä kermanvärisellä pohjalla
- Valintaa valkoisen sivun värimalleista

### Tee näin

- Yksi pohja, joka peittää suurimman osan tilasta
- Ensin tehtävät, sitten niihin sopivat värit
- Yksi tehostettu asia suunnitelmaa kohti
- Tumma neutraali, joka läpäisee kontrastivaatimukset
- Testaus oikeassa julkaisussa, tarinassa ja bannerissa

Pehmeäksi liukuväriksi sekoitettu paletti antaa taustan, joka tuntuu selvästi omaltasi, kunhan värit ovat sukua toisilleen.

- Hengitys liukuvärinä: `linear-gradient(160deg, #5e548e 0%, #9f86c0 50%, #e0b1cb 100%)`
- Rauhallinen laivastonsininen liukuvärinä: `linear-gradient(160deg, #0b2545 0%, #13315c 55%, #8da9c4 100%)`
- Lämmin terrakottahehku: `radial-gradient(circle at 80% 20%, #f28f3b 0%, #c8553d 40%, #3d2314 85%)`

Kolme yllä olevaa palettia taustoina. Lähekkäiset värit sekoittuvat siististi. Jätä tehoste sekoituksen ulkopuolelle ja käytä sitä päällä.

## Testaa brändivärit ennen päätöstä

1. **Tee kolme oikeaa suunnitelmaa** Neliöjulkaisu, 1080×1920-tarina ja 1500×500-otsake oikeilla sanoilla ja logollasi.
2. **Tarkista tekstin kontrasti** Neutraalin tekstivärin pitää täyttää WCAG AA pohjaväriä vasten. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) näyttää, miten se mitataan.
3. **Katso pienessä koossa** Pienennä julkaisu pikkukuvaksi. Jos tunnistat sen yhä omaksesi, paletti tekee tehtävänsä.
4. **Kokeile kilpailijoiden vieressä** Aseta julkaisusi kolmen paikallisen kilpailijan rinnalle. Jos se sulautuu joukkoon, vaihda tehoste, älä koko palettia.
5. **Kirjaa koodit** Tallenna jokainen heksakoodi ja sen tehtävä samaan paikkaan.

Leipomon pystyjulkaisu, jossa lukee Tuoretta leipää seitsemältä lämpimällä liukuväritaustalla

Paletin testaus oikeassa julkaisussa: otsikon, lisätiedon ja taustan täytyy toimia yhdessä koossa 1080×1350.

Jos tarvitset valinta-apua, [brändivärien valitseminen](https://gradiently.design/fi/guide/how-to-choose-brand-colors) käy päätöksen läpi alusta asti. [Logon väriyhdistelmät](https://gradiently.design/fi/guide/color-combinations-for-logos) rajaa valinnan kahteen tai kolmeen väriin, joita itse merkin kannattaa käyttää.

## Brändiväreistä oma ilme

Kuka tahansa voi kopioida viisi heksakoodia. Gradientlyssä Mark kantaa palettia elävänä taustana, jolla on oma valo, rakeisuus ja liike. Kahta samanlaista Markia ei ole. Hae Markkinoilta värisanoilla, kuten ”deep teal”, palettiasi lähellä oleva Mark, suunnittele sillä ilmaiseksi ja lunasta se, jotta vain sinä voit viedä sillä tehtyjä suunnitelmia. Brändipakettisi säilyttää tekstin ja tehosteiden tarkat koodit.

## FAQ

### Kuinka monta väriä brändi tarvitsee?

Neljä tai viisi riittää useimmille brändeille: pohja, pääväri, tukisävy, neutraali tekstiväri ja yksi tehoste. Suurempaa määrää on vaikea käyttää johdonmukaisesti.

### Mikä on paras väri uudelle brändille?

Yhtä parasta väriä ei ole. Valitse tarjontaasi sopiva pääväri ja tehoste, jota kilpailijasi eivät käytä, jotta asiakkaat erottavat sinut.

### Pitäisikö brändivärien sopia toimialaani?

Toimialaan sopiva pääväri auttaa ihmisiä ymmärtämään sinut nopeasti. Odotuksia rikkova tehoste tekee sinusta muistettavan.

### Miten tarkistan brändivärieni saavutettavuuden?

Mittaa tekstivärin ja pohjan kontrasti WCAG-kontrastitarkistimella. Leipätekstin suhteen pitäisi olla vähintään 4,5:1.

### Voinko käyttää liukuväriä brändivärinä?

Kyllä, kun se koostuu palettisi läheisistä väreistä ja säilytät tasaisen version pieniin käyttökohteisiin, kuten sivustokuvakkeisiin ja tekstiin.