Denne nettsiden er under utvikling.

Identitet

Farger

Digdir skal være et varmt og inkluderende direktorat. Dette gjenspeiles også i identitetsfargene. Fargene brukes også for å skille mellom de ulike enhetene.

Fargene er et viktig element for å understreke vår visuelle identitet. De gir rom for god visuell variasjon og skaper gjenkjennelse.

Det er utviklet en egen fargepalett for Digdir. Fargepaletten er bygget opp av emblem og profilfarger i tillegg til en farge for tekst. Det er viktig å benytte fargene korrekt for å sikre en korrekt universell utforming.

Plassholderbilde
Plassholderbilde
Klikk på bildet eller trykk Escape for å lukke

Emblemfarger

Emblemfargene skal som hovedregel brukes på emblemene, med unntak av blåsvart som også brukes i tekst og grafikk. Fargene er en del av hierarkiet i merkearkitekturen og bidrar til å skille mellom Direktoratet, Fellesløsninger og andre merkevarer. Derfor skal mørk rød og mørk blå ikke brukes som generelle profilfarger. Når fargene brukes i de definerte rollene sine, beholder de funksjonen som nivåmarkører og gjør merkehierarkiet tydeligere.

Emblem rød

HEX:
#C2132C
RGB:
194, 19, 44
CMYK:
0, 90, 77, 24
PMS C:
1805
PMS U:
1797
RAL:
3002

Emblem blå

HEX:
#0062B8
RGB:
0, 98, 184
CMYK:
100, 47, 0, 28
PMS C:
300
PMS U:
300
RAL:
5010

Blåsvart

HEX:
#1E2B3C
RGB:
30, 43, 60
CMYK:
100, 90, 13, 68
PMS C:
289
PMS U:
282
RAL:
5011

Profilfarger

Profilfargene er sentrale i Digdirs visuelle identitet. De brukes sammen med hvit og blåsvart for å gi liv og variasjon i illustrasjoner, grafikk og andre visuelle flater. Paletten består av tre faste farger som kan brukes hver for seg eller kombineres med hverandre. For å sikre en helhetlig og gjenkjennelig fargebruk over tid, skal det ikke brukes andre farger enn profilfargene, hvit og blåsvart.

Rød

HEX:
#F45F63
RGB:
240, 95, 99
CMYK:
0, 75, 52, 0
PMS C:
178
PMS U:
Warm Red
RAL:
3017

Gul

HEX:
#E5AA20
RGB:
229, 170, 32
CMYK:
0, 26, 86, 10
PMS C:
124
PMS U:
7406
RAL:
1032

Blå

HEX:
#1E98F5
RGB:
30, 152, 245
CMYK:
88, 38, 0, 4
PMS C:
2995
PMS U:
2995
RAL:
5015

Fargenyanser

Fargenyansene er lysere varianter av profilfargene, og kan brukes når det er behov for mer variasjon eller tydeligere skiller i grafisk materiell. De er særlig nyttige i illustrasjoner, statistikk, PowerPoint-presentasjoner og andre flater der lysere fargefelt kan gjøre innholdet enklere å lese og forstå.

Nyansene er prosentvarianter av profilfargene, valgt ut i faste trinn fra 20 % til 100 %. De gjør det mulig å skape variasjon innenfor den eksisterende paletten, uten å tilføre nye farger. For at fargebruken skal holde seg enkel og helhetlig, bør nyansene brukes bevisst og med måte.

Nyanser av blå

  • 20 % BlåHEX: #D1EAFE
  • 40 % BlåHEX: #A5D7FC
  • 60 % BlåHEX: #79C2F9
  • 80 % BlåHEX: #4BADF8
  • 100 % BlåHEX: #1E98F5

Nyanser av gul

  • 20 % GulHEX: #F9EED2
  • 40 % GulHEX: #F4DDA7
  • 60 % GulHEX: #EFCC7A
  • 80 % GulHEX: #E9BB4C
  • 100 % GulHEX: #E5AA20

Nyanser av rød

  • 20 % RødHEX: #FCDFE1
  • 40 % RødHEX: #FABFC1
  • 60 % RødHEX: #F59FA0
  • 80 % RødHEX: #F67F82
  • 100 % RødHEX: #F45F63

Tekstfarge

Blåsvart brukes som alternativ til ren svart i profilen. Fargen gir god kontrast mot lyse flater, men oppleves mykere og mer harmonisk sammenlignet med helt svart.

Last ned fargebibliotek for skjerm og trykk

Jobber du i Adobe-programmer, kan du laste ned fargebibliotekene for skjerm og trykk. Velg bibliotek ut fra hva du skal lage: skjerm når materiellet skal brukes digitalt, og trykk når det skal produseres fysisk.

Last nedLogoarkiv for skjerm (RGB)ZIP, 4,5 MB Last nedLogoarkiv for trykk (CMYK)ZIP, 4,5 MB

Riktig fargeverdi til riktig bruk

Hvorfor farger kan se ulike ut

Før du velger fargeverdi, bør du vite hvor fargen skal brukes. Farger gjengis ulikt på skjerm, i trykk og på fysiske flater, og ulike bruksområder krever derfor ulike fargesystemer.

På skjerm vises farger med lys, ved å blande rødt, grønt og blått lys (RGB). Dette er en additiv fargemodell, der fargene blir lysere jo mer lys som legges til. I trykk brukes en subtraktiv fargemodell, der farger bygges opp med trykkfargene cyan, magenta, gult og sort (CMYK).

Derfor er det viktig å bruke riktig fargeverdi til riktig bruksområde. Profilfargene har egne verdier i ulike fargesystemer, slik at de gjengis så likt og riktig som mulig – enten de brukes digitalt, i trykk eller i fysisk produksjon.

Hvilken fargeangivelse skal du bruke?

BruksområdeAnbefalt fargesystemForklaring
Nettsider, portaler og digitale grensesnittHEXBrukes i nettsider og digitale grensesnitt der farger angis som kode, for eksempel i web/CSS.
Skjermbasert materialeRGBBrukes til skjermbasert materiell, som presentasjoner, illustrasjoner og digitale dokumenter.
TrykksakerCMYKBrukes til materiell som skal skrives ut eller trykkes i vanlig firefargetrykk, for eksempel brosjyrer, plakater og rapporter.
Presis trykkfarge eller spesialfargePMS C / PMS UBrukes når trykkfargen må angis ekstra presist, eller ved spesial- og profilfarger. C er for bestrøket papir, U for ubestrøket papir.
Fysisk produksjonRALBrukes til fysisk produksjon, for eksempel maling, folie, skilt og interiørdetaljer.

Farger i Designsystemet

Dette er fargene i Designsystemet-temaet for Digdir, slik de genereres til nettsider og digitale grensesnitt. Hver rad er én farge med de 16 fargetrinnene den har, fra bakgrunn til base. Hold musepekeren over et felt for å se navnet på variabelen.

BakgrunnOverflateBorderTekstBase
accentbackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
brand1background-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
brand2background-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
brand3background-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
neutralbackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
infobackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
successbackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
warningbackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default
dangerbackground-defaultbackground-tintedsurface-defaultsurface-tintedsurface-hoversurface-activeborder-subtleborder-defaultborder-strongtext-subtletext-defaultbase-defaultbase-hoverbase-activebase-contrast-subtlebase-contrast-default