Hopp direkte til innhold

Hopp direkte til Søk

Vi jobber med å flytte innhold fra denne websiden til Ruters nye merkevareportal brand.ruter.no.
For spørsmål, ta kontakt på .

Farger

I digitale kontaktflater presenteres ofte ulik type informasjon i et og samme skjermbilde/miljø. Derfor må vi være klare på å skille ulike funksjoner fra hverandre ved hjelp av tydelige farger, piktogrammer og grafiske elementer.

Vi benytter oss som hevedregel av Ruters fargepalett, men gjør i noen tilfeller spesialtilpasninger for bruk i digitale flater. I trafikkbildet har fargene til driftsartene en klar funksjon, mens de på ruter.no kan tillegges andre betydninger. I noen tilfeller gjør vi også justeringer på fargemetning for å få tilstrekkelig kontrast i lesbarheten. For mer om lesbarhet, se typografi.

Fargepalett

Som bakgrunn benytter vi en lys grå farge. Dette bedrer lesbarheten i store teksmengder. Lys grå gir oss muligheten til å utheve detaljer med hvitt, og skille ulike elementer fra hverandre med ulike gråtoner.

Ruters hovedfarger til bruk på nettsider

Ruters hovedfarger

I tillegg til Ruters hovedfarger har vi utvidet paletten med noen tilleggsfarger for å dekke behovene i digitale flater.

Tilleggsfarger til bruk på nettsider

Tilleggsfarger

Fargebruk

Handlinger, ofte representert gjennom knapper, skal ha et tydelig og intuitivt fargevalg. Vi bruker grønn for ok eller gå videre, rød på avbryt eller slett, grå på støttehandlinger som hjelp eller tøm felter, og mørk blå på øvrige ikke-obligatoriske handlinger som last opp bilde eller oppdater. Vi benytter også «trikkeblå» til spesialfunksjoner som geolokasjon.

Farger på knapper

Farger på knapper

Konsekvens i fargebruk er viktig. På ruter.no er gul ensbetydende med avvik eller viktig informasjon.

Eksempler på fargebruk på nettsider

Eksempler på fargebruk