# Logon väriyhdistelmät, jotka toimivat: hex-koodit [Canonical HTML page](https://gradiently.design/fi/guide/color-combinations-for-logos) Logon pitää kestää favicon, harmaa valokopio ja tumman tilan otsake. Nämä parit ja kolmikot on valittu siihen, ja voit tarkistaa koodit ja kontrastin itse. ## The short version - Useimmat vahvat logot käyttävät yhtä tai kahta väriä, sillä jokainen lisäväri vaikeuttaa toistoa pienenä, painossa ja vaihtelevilla taustoilla. - Hyvä kaksivärinen logo yhdistää tumman vaaleaan tai kirkkaaseen, jotta muodot erottuvat myös silloin, kun värejä on vaikea erottaa. - Samassa vaaleudessa olevat värit, kuten keskisävyinen punainen ja sininen, näyttävät värisevän kosketuskohdassa ja menettävät rajansa harmaapainatuksessa. - Jokaisen logon tulee toimia myös yhtenä värinä, mustana ja valkoisena, ennen värien lisäämistä. - Logon värien ei tarvitse kattaa brändin koko palettia: tunnus voi pysyä yksinkertaisena ja taustat kantaa rikkaamman värin. Parhaat **logon väriyhdistelmät** liittävät yhden tumman värin yhteen vaaleaan tai kirkkaaseen: esimerkiksi laivastonsininen ja kulta, metsänvihreä ja kerma tai hiilenharmaa ja lime. Vaaleusero pitää muodot luettavina favicon-koossa ja harmaasävyissä, kun taas sävyero antaa tunnukselle luonteen. Alla on kymmenen testattua paria ja kolme kolmikkoa hex-koodeilla ja kontrastisuhteilla sekä nopea oma tarkistusmenetelmä. ## Miksi logoissa on niin vähän värejä Logo on yrityksen useimmin toistettu omaisuus. Se näkyy 16 pikselin selainkuvakkeena, paidan kirjontana, kahvikupin leimana ja kuitin yksivärisenä painatuksena. Jokainen lisäväri voi epäonnistua yhdessä näistä paikoista. Siksi monet tunnetut tunnukset ovat yksivärisiä ja useimmat muut kaksivärisiä. Aloita mustasta. Jos muoto toimii mustana valkoisella ja valkoisena mustalla, väri voi vain auttaa. Jos ei toimi, mikään yhdistelmä ei pelasta sitä. [Logosuunnittelun perusteet](https://gradiently.design/fi/guide/logo-design-basics) käsittelee muotoa; tässä oletetaan sen olevan valmis. ## Kymmenen kaksiväristä logoyhdistelmää - Laivastonsininen ja kulta: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)` - Metsä ja kerma: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)` - Hiilenharmaa ja lime: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)` - Luumu ja poskipuna: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)` - Viininpunainen ja hiekka: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)` - Muste ja oranssi: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)` - Purppura ja minttu: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)` - Koboltti ja valkoinen: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)` - Musta ja signaalipunainen: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)` - Petrooli ja koralli: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)` Kymmenen paria jyrkkinä jakoina, kuten värit kohtaavat tunnuksessa. Kopioi koodi painamalla värinäytettä. | Pari | Koodit | Kontrasti | Tunnelma | | --- | --- | --- | --- | | Laivastonsininen ja kulta | `#14213d` `#fca311` | 7,9:1 | Vakiintunut, varma, hieman klassinen | | Metsä ja kerma | `#1b4332` `#f1e9da` | 9,2:1 | Luonnollinen, käsityömäinen, rauhallinen | | Hiilenharmaa ja lime | `#2d2d2d` `#c6f432` | 10,7:1 | Energinen, urheilullinen, tekninen | | Luumu ja poskipuna | `#4a1942` `#f7c8d0` | 9,4:1 | Lämmin, kauneus, putiikki | | Viininpunainen ja hiekka | `#6b0f1a` `#e9d8a6` | 8,7:1 | Perinne, viini, vieraanvaraisuus | | Muste ja oranssi | `#1c1917` `#f97316` | 6,2:1 | Käytännöllinen, ystävällinen, ammattityöt ja työkalut | | Purppura ja minttu | `#5b21b6` `#a7f3d0` | 7,0:1 | Moderni, leikkisä, ohjelmistot | | Koboltti ja valkoinen | `#1d4ed8` `#ffffff` | 6,7:1 | Selkeä, luotettava, digitaalinen | | Musta ja signaalipunainen | `#111111` `#e63946` | 4,5:1 | Rohkea, kiireellinen, toimituksellinen | | Petrooli ja koralli | `#0f766e` `#ff7f6e` | 2,2:1 | Eloisa, mutta vain vierekkäisinä muotoina, ei tekstinä toisen päällä | Parien WCAG-kontrastisuhteet. Yli 4,5:1 mahdollistaa toisen värin tekstin toisella; pienemmän kontrastin parit sopivat rinnakkaisiksi muodoiksi. Petrooli ja koralli poikkeavat joukosta. Molemmat ovat vaaleudeltaan lähellä toisiaan, joten korallikirjaimia olisi vaikea lukea petroolin päällä ja ne muuttuisivat yhdeksi harmaaksi möhkäleeksi mustavalkopainatuksessa. Pari toimii erillisinä muotoina, kuten petroolisymbolina korallitekstilogon vieressä, kumpikin valkoisella tai tummalla pohjalla. Luvut perustuvat WCAG-kaavaan, jonka [värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) selittää. ## Kolmiväriset logoyhdistelmät Kolme väriä sopii erillisistä osista tehtyyn tunnukseen: laatoista muodostuva symboli, väripisteellinen tekstilogo tai lastenbrändin muotosarja. Ankkuroi kolmikko yhdellä tummalla värillä ja valitse kaksi selvästi eri sävyä. Niiden sijoittaminen ympäri väriympyrää [kolmisointuvärien](https://gradiently.design/fi/guide/triadic-colors) tapaan vähentää kilpailua. - Syvä meri: #003049 - Unikko: #d62828 - Sinappi: #fcbf49 Aikuiset päävärit. Tumma sininen ankkuroi muuten huutavan punaisen ja keltaisen. Sopii kouluihin, urheiluun ja vanhemmille suunnattuihin leluihin. - Liuskepetrooli: #264653 - Sahrami: #e9c46a - Poltettu koralli: #e76f51 Rannikon lämpö. Liuskepetrooli kantaa tekstilogon; sahrami ja poltettu koralli täyttävät symbolin muodot. - Yö: #10002b - Magenta: #f72585 - Syaani: #4cc9f0 Digitaalinen ja äänekäs. Magenta ja syaani hehkuvat lähes mustaa ankkuria vasten musiikin, pelaamisen ja yöelämän tunnuksissa. ## Logon vältettävät väriyhdistelmät ### Vältä - Keskipunaista ja keskisinistä kosketuksissa: ne värisevät - Puhdasta punaista ja vihreää yhdessä: vaikea monille värisokeille - Keltaista tai vaaleita pastelleja valkoisella: tunnus katoaa - Neljää tai useampaa yhtä painavaa väriä - Liukuväriä logon ainoana versiona ### Tee mieluummin - Tee toisesta parin väristä paljon tummempi - Erottele vaaleudella, älä pelkällä sävyllä - Aseta vaaleat värit tummalle pohjalle tai rajaa ääriviivalla - Yksi pääväri, yksi tai kaksi tukiväriä - Ensin tasaväriversio, liukuväri muunnelmaksi Liukuvärilogot ovat erikoistapaus. Ne voivat näyttää upeilta suurina, mutta porrastuvat painossa ja sumentuvat pieninä. Säilytä tasaista yhtä tai kahta väriä käyttävä versio ja käsittele liukuväriä muunnelmana; [liukuvärilogot](https://gradiently.design/fi/guide/gradient-logo) selittää molempien tekemisen. ## Logon väriyhdistelmän testaus 1. **Tulosta harmaasävyisenä** Muunna logo harmaaksi. Jos molemmat värit muuttuvat samaksi harmaaksi, niiden vaaleusero on liian pieni. 2. **Pienennä 16 pikseliin** Katso sitä selaimen välilehtikuvakkeena. Vaaleat ohuet osat katoavat ensin. 3. **Käännä tausta** Aseta logo brändisi tummimmalle värille ja valkoiselle. Kirjaa, mikä väri pitää kummassakin vaihtaa. 4. **Tarkista värisokeus** Käytä värisokeussimulaattoria. Punavihreät parit sulautuvat usein yleisimmissä värisokeuden muodoissa. 5. **Aseta oikealle taustalle** Logo on harvoin pelkällä valkoisella todellisessa käytössä. Testaa valokuvalla, liukuvärillä ja levottomassa somevirrassa. Neliösuunnitelma, jossa Harbour on liukuvärin päällä ja osa kirjaimista sulautuu siihen Elävän taustan yli kulkeva tekstilogo voi menettää osia kirjaimistaan. Sama neliösuunnitelma, jossa tausta rauhoittuu Harbour-sanan takana ja jokainen kirjain erottuu Sama tekstilogo, jonka takana tausta rauhoittuu ja syvenee. Viimeisessä kokeessa monet logot kamppailevat. [Logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background) käsittelee tekniikoita. Gradientlyssä Mark tietää sanojen ja logon paikan: sen rauhallisin alue siirtyy taakse ja Automaattinen muste valitsee vaalean tai tumman riveittäin Markin omasta paletista. Näin yksinkertainen kaksivärinen logo voi olla rikkaalla taustalla ilman laatikkoa. ## Pidä logo yksinkertaisena ja brändi rikkaana Logon ei tarvitse kantaa kaikkia brändivärejä. Monet brändit pitävät tunnuksen yhdessä tai kahdessa värissä ja tuovat syvyyttä taustoihin, kuviin ja typografiaan. Jos valitset seuraavaksi laajempaa palettia, [brändiväri-ideat](https://gradiently.design/fi/guide/brand-color-ideas) tarjoaa 30 lähtökohtaa ja [tunnetut liukuvärilogot](https://gradiently.design/fi/guide/famous-gradient-logos) näyttää, miten vakiintuneet brändit yhdistävät yksinkertaisen tunnuksen ilmeikkääseen väriin. ## FAQ ### Mikä on paras väriyhdistelmä logolle? Yhtä parasta paria ei ole, mutta tumma väri vaalean tai kirkkaan kanssa, kuten laivastonsininen ja kulta tai metsä ja kerma, toimii lähes kaikkialla, koska muodot pysyvät erillisinä. ### Montako väriä logossa pitäisi olla? Useimmissa yksi tai kaksi. Kolme toimii erillisistä osista tehdyissä tunnuksissa, mutta jokainen lisäväri vaikeuttaa painamista ja pieniä kokoja. ### Mitä värejä ei kannata käyttää yhdessä logossa? Vältä saman vaaleuden värejä kosketuksissa, kuten keskipunaista ja keskisinistä, äläkä luota punaiseen vihreää vasten, sillä moni värisokea ei erota niitä. ### Pitäisikö logon toimia mustavalkoisena? Kyllä. Logon pitää toimia yhtenä värinä, mustana ja valkoisena, ennen värien lisäämistä, koska sitä painetaan ja leimataan yksivärisenä. ### Voiko logo olla liukuväri? Voi, mutta säilytä tasaväriversio pieniin kokoihin, kirjontaan ja yksiväripainatukseen. Käytä liukuväriä, kun sille on tilaa.