4+ fargeverktøy for butikkeiere

Når mesteparten av data sendt til hjernen er basert på visuell stimulans er det viktig at informasjonen kommer frem. Farger er ikke bare maling, men vekker følelser og setter brand (blått er troverdig og kunnskapsrikt, gult og rødt blir ofte sett på som rimeligere), samtidig som elementer fremstår som tilgjengelige for alle og enhver (“er teksten lesbar” og “hvor skal jeg trykke nå”).

For å få til farger riktig finnes det utallige verktøy som kan hjelpe oss litt på vei. Her lager jeg en liste med 4 fargeverktøy for harmoni, tilgjengelighet og ren funksjon for deg med ansvar for nettbutikken.

Adobe Color

Om du vil forbedre fargeharmonien til brandet ditt, finne et fargemønster for en ny kampanje eller finne den optimale CTA-knappen, er Adobe Color et raskt og enkelt verktøy. Du mater inn en farge, og den skaper en palett basert på hvilken harmoni den er stilt inn på. Har du Creative Cloud kan du i tillegg lagre harmonien til biblioteket ditt temmelig raskt.

For å spare deg for tid kan jeg forklare noen av “fargeharmonreglene”:

Monokromatisk tar utgangspunkt i én farge, for deretter å justere metning og lys til å gi et veldig harmonisk fargespekter. Sammen kan de bli brukt for å gi et veldig behagelig uttrykk.

Analoge farger er farger som er naboer på fargesirkelen. Disse gir også til dels en harmoniserende effekt lik det monokramtiske spekteret, men siden fargene skiller seg ut mer får du et rikere uttrykk.

Komplementære farger er to farger som står på hver sin side av fargesirkelen. Har du en farge du bruker mye på nettbutikken eller i kommunikasjon, er komplementærfargen dens en perfekt farge for noe som skal stå ut, for eksempel Call-to-action-knapper.

Triadiske farger er tre farger som i fargesirkelen er like langt fra hverandre. Sammen gir de fra seg et levende og livlig uttrykk. Vær obs: Likeså komplementærfarger, bør du ved triader ha én farge (med nyanser) som dominerer det visuelle, og bruke de andre fargene sparsommelig som aksenter for å beholde harmonien.

Contrast Ratio

Skal du ta i bruk nye farger på innhold som er av vesentlig viktighet for kunder må du følge kravene for universell utforming. Disse finner vi i standarden Retningslinjer for tilgjengelig webinnhold (WCAG) 2.0.

En rask og enkel måte å sjekke om fargen er tilgjengelig nok er å ta i bruk Contrast Ratio, en side med kun ett formål: å gi svar på om en farge er godkjent på et AA– eller AAA-nivå. AA-nivået er minstekravet på et kontrastforhold på 4,5:1 (liten tekst) og 3:1 (stor tekst) og AAA-nivået er gullstandarden med 7:1. På Contrast Ratio setter du inn HEX-koden på fargen som skal bruke og stiller inn bakgrunnsfargen, så regner den ut kontrastforholdet for deg.

Lese mer om universell utforming? Les vår eviggrønne introduksjon til emnet fra 2014 eller forbedr med noen våre 10 tips for en ryddigere nettbutikk.

Inspiser med Google Chrome

Hvis Chrome er nettleseren din så har du allerede en rask måte for å sjekke fargekoden på en farge, tilgjengelighetens dens opp mot WCAG 2.0 og teste farger på forskjellige elementer.

Inspeksjonsverktøyet kan også gjenskape nettsider som om de skulle vært vist på mobil ved å trykke det blå ikonet som på skjermdumpen er øverst på midten.

Du åpner enkelt verktøyet ved høyreklikking på elementet du ønsker å endre og velge inspiser element fra menyen. Trykker du på den fargede firkanten ved siden av HEX-koden du finner i menyen, får du opp en forenklet dialog av den over. På tekst kan du ekspandere den ved å trykke pilen ved siden av “Contrast ratio x.xx” og eventuelle grønne hakk.

Dette er nok et verktøy som passer de litt mer tech-savvy, men man kan ikke gjøre noe galt, så det er bare å prøve seg rundt. Begynne fra start igjen? Last inn siden på nytt.

I videoen viser vi helt konkret hvordan vi jobber med Inspirer-verktøyet i Chrome

ColorZilla

Om du vil ha en rask måte å dra ut fargene til elementer på kan jeg anbefale ColorZilla som finnes som utvidelse for både Chrome og Firefox.

Trykk på knappen og pilen din blir til et kryss som du kan peke på fargen du vil hente ut. Et trykk til vil kopiere HEX-koden til den aktive fargen, som du kan se i den svarte menyen øverst. Viser den ikke riktig farge? Gi den noen mikrosekunder for å la den fange riktig.

Bonus: Gradients.io

Som designer har jeg noen kuraterte fargebiblioteker bokmerker. En av disse er Gradients.io skapt og tatt vare på av @lukedesigner. Som navnet tilsier er dette en samling forløpningsfarger. Forløpningsfarger kan skape en annen dynamikk enn flate farger og gi et moderne løft om gjort riktig.

Andre verktøy?

Dette ble 4+1 verktøy jeg tror mange kan ha nytte av uansett om man har mye eller ingen erfaring fra før. Det finnes mange andre, sånn som enkle biblioteker som Flatuicolorpicker.com, palettgeneratorer som Coolors.co, Google Materials Color tool og den litt mer nerdete og hardcore Colorbox.io, basert på algoritmer skrevet av Lyfts designteam.

Nå har jeg delt en del med dere — så håper jeg dere deler tilbake med hva slags verktøyer som brukes for å få til en knall, visuell kommunikasjon som vekker riktige følelser, får frem riktig tjenestevei og som skaper et godt universelt system å shoppe på.

Få månedlige netthandelstips, helt gratis og rett til innboksen din. Meld deg på vårt nyhetsbrev! 👇