Farger for diagrammer

I diagrammer brukes ulike farger til å formidle informasjon. For at det skal være lett å se forskjell på fargene, har vi en egen fargepallett for diagrammer.

Artikkel
Sist endret: 10.03.2025

Fargene har utgangspunkt i Udirs ordinære fargeprofil, men de er skarpere og har større kontrast. God nok kontrast mellom fargene er nødvendig, men ikke tilstrekkelig for å ivareta universell utforming. Les mer om universell utforming av diagrammer hos uutilsynet.

Farger for hvit bakgrunn

For å ivareta Udirs visuelle uttrykk er det satt opp en rekkefølge for hvordan fargene skal brukes. De fleste diagrammer bruker få farger. Rekkefølgen på fargen vil da gjøre at farge 1 og 2 blir brukt mest, mens farge 7 og 8 blir brukt minst. Rekkefølgen på fargene er også satt opp for å skape god kontrast mellom farger som står ved siden av hverandre. Fargene skal brukes på hvit bakgrunn for å ivareta universell utforming. Fargenavnet viser rekkefølgen fargene skal brukes i. 

Åtte sirkler med nummererte farger og fargekoder og kontrastverdier. Samme informasjon står som tekst på nettsiden under bildet.

Oversikt over koder:

  • Farge 1: (AA 3.03:19), HEX: #5BA27E
  • Farge 2: (AA 4.24:1), HEX: #6C7C94
  • Farge 3 (AA 3.1:1), HEX: #BB893E
  • Farge 4 (AAA 12.26:1), HEX: #353535
  • Farge 5 (AA 3.02:1), HEX: #30A1BB
  • Farge 6 (AAA 7.52:1), HEX: #255F41
  • Farge 7 (AAA 5.1:1), HEX: #9D5F32
  • Farge 8 (AA 3.03:1), HEX: #949494

Stolpediagram

Rekkefølgen på fargene er den samme uavhengig av om stopediagrammet er stående, liggende eller stablet. 

Under ser du eksempel på stolpediagram med to kategorier og da bruker vi farge 1 og farge 2 fra diagrampalletten. 

Stolpediagram med to kategorier og farge 1 og farge 2 fra Udirs pallett

Under ser du eksempel på stablet stolpediagram. Det har fem kategorier og derfor er det brukt farge 1 til farge 5 i den faste rekkefølgen for diagramfarger:

Stolpediagram med 5 kategorier med farger 1 til farge 5 i riktig rekkefølge fra paletten slik det er beskrevet i tekst lenger oppe på siden.

Kakediagram

Under ser du eksempel på kakediagram. Å bruke hjelpestreker mellom forklaring og farge gjør det enklere å oppfatte enn om forklaring kun står ved fargebokser. Rekkefølgen på fargene følger den faste rekkefølgen for diagrammer. 

Kakediagram som beskrevet i teksten over bildet

Linjediagram

Under ser du eksempel på linjediagram med tre linjer og da bruker vi farge 1 til farge 3 fra diagrampalletten. Geometriske figurer knyttet til linjene gjør det enklere å oppfatten enn å bare ha farger. 

Linjediagram med 3 linjer i fare 1 til farge 3 og ulike geometriske figurer på hver strek

Diagram med midtpunkt

Tall som er større eller mindre enn et midtpunkt kan bruke grønn og blå som hvert sitt ytterpunkt og grå som nøytral farge mellom dem. Både grønn og blå brukes i en lys og en mørk nyanse. Den mørkeste nyansen brukes lengst fra midtpunktet. 

Diagram med midtpunkt i grått, grønt for kategorier under midtpunkt og blå for kategorier over midtpunkt

Fargekodene er: 

  • Mørkeste grønn: #1E422F
  • Lyseste grønn: #5BA27E
  • Grå i midten: #DEDEDE
  • Lyseste blå: #6C7C94
  • Mørkeste blå: #2E3C51

Mengde og rekkefølge på fargene

Der rekkefølgen på kategoriene i diagrammet er likegyldig, velg vi kategorien med størst mengde til farge 1, nest størst til farge 2, osv. Grunnen til dette er at vi ønsker mest bruk av de første fargene i profilen. Under ser du et slikt diagram:

Stolpediagram med epler, pærer, bananer og druer i fargerekkefølge 1-4

Hensynet til å ha mest av de første fargene i palletten, er underordnet regelen om rekkefølgen på fargene. For kategorier som allerede har en naturlig rekkefølge, så følger vi denne. Et eksempel på dette er kvartaler i et år. Kvartalene har allerede en naturlig rekkefølge. Fargene bruker fortsatt fast rekkefølge uavhengig av hvor stor mengde det blir av hver farge. 

Stolpediagram med første til fjerde kvartal i fargerekkefølge 1-4

Til toppen