Rakenna brändin väripaletti omista tuotekuvistasi
Poimi todelliset värit tuotteesi ja pakkauksesi kuvista, anna jokaiselle tehtävä ja tarkista jokainen tekstiparin kontrasti WCAG:n mukaan ennen kuin se menee mainokseen, kuvatekstiin tai loppukorttiin.
Monella pienellä brändillä on logotiedosto mutta ei värilistaa. Värit elävät itse tuotteessa: pullossa, etiketissä, laatikossa, kankaassa. Kun on aika tehdä mainos, pikkukuva tai tekstityksen tyyli, joku katsoo valokuvaa silmämääräisesti ja arvaa hex-koodin.
Tähän pääsee noin kymmenessä minuutissa paremmin. Poimi värit oikeiden tuotteiden kuvista, anna jokaiselle tehtävä ja tarkista, mitkä parit ovat luettavia tekstinä. Ilmainen värinpoimijamme tekee poiminnan ja tarkistuksen selaimessasi, eikä mitään ladata.
Miksi aloittaa tuotteesta eikä tunnelmataulusta
Ihmiset tunnistavat tuotteesi sen perusteella, miltä se näyttää hyllyllä tai kädessä. Mainos, jonka värit vastaavat pakkausta, tuntuu samalta brändiltä yhdellä silmäyksellä, ja mainos, joka poikkeaa siitä, tuntuu väärennökseltä. Tuotteesta poimittu paletti on myös rehellinen siitä, mitä oikeasti myyt, mitä tunnelmataulu harvoin on.
Se toimii myös palveluille. Jos sinulla ei ole fyysistä tuotetta, käytä parhaita kuvakaappauksiasi, myymäläsi julkisivua tai tiimikuviasi, mitä ihmiset jo yhdistävät sinuun.
Vaihe 1: valitse ja rajaa kuvat
Valitse kaksi tai kolme selkeää kuvaa: tuote tasaisella taustalla, pakkaus etupuoli näkyvissä ja yksi elämäntyylikuva, josta pidät. Rajaa sitten tiukasti. Poimija laskee jokaisen pikselin, jonka annat sille, joten pullo puupöydällä palauttaa pöydän yhtenä brändin väreistäsi. Rajaa tuotteeseen ja etikettiin, niin paletti on tuote.
Ota kuvat päivänvalossa tai tasaisessa valossa, jos voit. Lämmin lamppu tekee valkoisesta pakkauksesta kermanvärisen, ja jokainen poimimasi väri kantaa tuota sävyä.
Vaihe 2: poimi viisi-kahdeksan väriä
Pudota jokainen kuva poimijaan ja pyydä 5 tai 6 väriä puhtaaseen tuotekuvaan tai 8 kiireiseen kuvaan. Se ryhmittää samankaltaiset pikselit ja listaa kunkin ryhmän keskiarvon suurimmasta alkaen sekä sen osuuden kuvasta. Aloituspiste on kiinteä, joten sama kuva antaa aina saman paletin, ja pieni kirkas korostus, kuten punainen korkki valkoisessa pullossa, saa oman värinsä sen sijaan, että se keskiarvoistettaisiin pois.
Aja kaikki kuvasi ja etsi toistuvat värit. Ne ovat brändi. Väri, joka näkyy vain yhdessä kuvassa, on yleensä tausta tai valo.
Vaihe 3: anna jokaiselle värille tehtävä
Paletti on hyödyllinen vain, kun jokaisella värillä on rooli. Useimmat brändit tarvitsevat neljä:
- Tausta: väri, jolla suurin osa asettelusta lepää. Usein pakkauksen pohjaväri tai vaalea neutraali.
- Teksti: tumma väri, joka on luettava taustalla. Lähes musta toimii. Syvä brändiväri toimii vielä paremmin, jos se läpäisee kontrastitarkistuksen.
- Korostus: voimakas väri painikkeelle, hintalapulle tai yhdelle korostetulle sanalle.
- Tuki: yksi tai kaksi neutraalia laatikoille, erottimille ja toissijaiselle tekstille.
Älä käytä kaikkea, minkä kuva sinulle antaa. Viisi nimettyä väriä, joilla on selkeät tehtävät, pitävät sadan mainoksen yhtenäisinä. Kaksitoista ei pidä.
Vaihe 4: tarkista kontrasti ennen kuin laitat väriä mihinkään
Väriparit, jotka näyttävät hyviltä isolla monitorilla, voivat olla vaikeasti luettavia puhelimessa auringonvalossa ja vielä vaikeampia ihmisille, joilla on heikko näkö. W3C:n Web Content Accessibility Guidelines antaa tähän luvun, kontrastisuhteen, joka vaihtelee 1:1:stä (sama väri kahdesti) 21:1:een (musta valkoisella). Kynnysarvot ovat:
| Normaali teksti | Suuri teksti | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Suuri teksti tarkoittaa vähintään 18 pistettä tai 14 pistettä lihavoituna WCAG:n määritelmän mukaan. Luvut ovat kovia rajoja: W3C:n ohje kohdasta 1.4.3 sanoo, että laskettua suhdetta ei pidä pyöristää, joten 4.499:1 ei täytä 4.5:1-vaatimusta.
WCAG kirjoitettiin verkkosisällölle, ei mainoksille, mutta periaate pätee kaikkeen ruudulla olevaan tekstiin, mukaan lukien videoon poltetut tekstitykset ja loppukortin sanat.
Esimerkki käytännössä
Oletetaan, että pakkauksesi antaa tummansinisen #1a3c6e, kermanvärisen #fdf6e3 ja oranssin #e07a2e.
Kaava on (L1 + 0.05) / (L2 + 0.05), missä L1 on vaaleamman värin suhteellinen luminanssi ja L2 tummemman. Suhteellinen luminanssi vaihtelee 0:sta mustalle 1:een valkoiselle. Tummansininen on noin 0.046, kerma noin 0.923 ja oranssi noin 0.300.
- Tummansininen teksti kerman päällä: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, noin 10.1 näillä pyöristetyillä luvuilla ja tarkalleen 10.16:1. Tämä läpäisee AAA:n kaikilla koilla. Tämä on pääpari.
- Oranssi teksti kerman päällä: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, noin 2.78:1. Tämä ei täytä edes suurta tekstiä. Oranssi ei saa kantaa sanoja kerman päällä.
- Musta teksti oranssin päällä: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, eli 7.0 pyöristetyillä luvuilla mutta tarkalleen 6.99:1. Tämä läpäisee AA:n kaikille teksteille, mutta jää juuri AAA:n alle. Hyvä painikkeen tekstiksi.
- Kerma teksti tummansinisen päällä: sama pari kuin ensimmäinen, joten sama 10.16:1. Parin kääntäminen ei koskaan muuta suhdetta.
Eli roolit valitsevat itsensä melkein itse: kerma tausta, tummansininen teksti, oranssi korostusmuoto mustilla sanoilla sen päällä (tummansininen oranssin päällä on vain 3.65:1, mikä on AA vain suurelle tekstille). Poimija näyttää koko ruudukon kerralla: jokainen väri jokaista muuta vastaan sekä valkoista ja mustaa vastaan, ja jokainen solu arvioidaan luokkaan AAA, AA, AA suuri tai Hylätty.
Vaihe 5: kirjaa se kerran ylös
Vie paletti CSS-muuttujina tai JSON-muodossa ja säilytä se logotiedostojesi vieressä. Nimeä muuttujat tehtävän mukaan, kun olet päättänyt: --brand-bg, --brand-text ja --brand-accent ovat luettavampia kuin --color-3 kuukauden päästä. Lisää jokaisen alle rivi, joka kertoo mitkä parit läpäisivät, jotta kenenkään ei tarvitse tehdä tarkistusta uudelleen.
Vertaa sitten luvut kaikkeen virallisen, mitä sinulla jo on. Valokuva antaa värin, jonka kamera näki, mikä on lähellä painettua pakkausta mutta ei sama kuin mustespesifikaatio. Jos painotalollasi tai suunnittelijallasi on tarkat arvot, ne voittavat.
Paletin käyttö mainoksissa ja julkaisuissa
- Tekstitykset ja alatekstit: tekstivärisi laatikossa taustavärilläsi, tai päinvastoin. Tarkista pari ensin.
- Loppukortit: taustaväri, logo ja yksi rivi tekstiä tekstivärilläsi. Korostusväri voi täyttää painikkeen muodon lyhyen toimintakehotuksen takana.
- Pikkukuvat ja kannet: yksi korostus, yksi iso luettava sana, paljon taustaa.
- QR-koodit pakkauksissa: brändiväri toimii, jos se on selvästi pakkausta tummempi. QR-koodigeneraattorimme varoittaa, jos kontrasti on heikko.
Missä Hermoso sopii
Hermoso on tekoälypohjainen markkinointiagentti. Se tutkii markkinoillasi jo toimivia mainoksia, tekee brändiisi sopivia kuva- ja videomainoksia, julkaisee ja ajastaa julkaisuja omille sosiaalisen median tileillesi ja ajaa maksettuja kampanjoita omilla mainostileillesi. Kun lisäät brändisi verkkosivustoltasi, se oppii tuotteesi, logosi ja paletin. Tekstitykset ja loppukortit pysyvät pois päältä, ellet pyydä niitä, ja kun pyydät, voit asettaa tekstin, laatikon ja loppukortin värit hex-koodeilla, joten tässä tarkistamasi parit päätyvät julkaisuun. Se toimii verkkosovelluksessa tai Claudessa, ChatGPT:ssä ja Cursorissa MCP-palvelimensa kautta.
Usein kysyttyä
Miten löydän tuotteeni värien hex-koodit?
Rajaa puhdas kuva tuotteeseen tai pakkaukseen ja pudota se värinpoimijaan. Se listaa pääväriet HEX-, RGB- ja HSL-muodossa. Aja kaksi tai kolme kuvaa ja säilytä toistuvat värit.
Mikä kontrastisuhde tekstin pitää olla?
WCAG 2.2:n mukaan AA-taso vaatii normaalille tekstille 4.5:1 ja suurelle tekstille 3:1, ja AAA vaatii 7:1 ja 4.5:1. Suuri teksti on vähintään 18 pistettä tai 14 pistettä lihavoituna.
Riittääkö 4.49:1 AA:lle?
Ei. W3C sanoo, ettei suhdetta pidä pyöristää, kun sitä verrataan kynnysarvoon, joten 4.499:1 ei täytä 4.5:1.
Kuinka monta väriä brändipaletissa pitäisi olla?
Tarpeeksi, jotta jokaisella on tehtävä: yleensä tausta, tekstiväri, yksi korostus ja yksi tai kaksi neutraalia. Viisi nimettyä väriä, joilla on selkeät roolit, pitää mainokset yhtenäisinä paremmin kuin pitkä lista.
Ovatko kuvan värit tarkkoja?
Eivät. Ne ovat sitä, mitä kamera tallensi sillä valolla. Ne ovat lähellä tuotetta, mutta eivät sama kuin painatus tai mustespesifikaatio. Jos sinulla on virallisia arvoja, käytä niitä.