Hopp til hovedinnholdGå til dokumentasjon for v0.63

Farger

30. mai 2024

Et fleksibelt fargesystem

Fargesystemet består av globale farger som refererer til hva fargen er (eks. red-1) og et semantisk nivå som beskriver hva fargen skal brukes til (eks. Text.Danger).

Et semantisk fargenavn er bygget opp av 3 ledd:
farge - stryke - vekt

  • Background: Som regel bakgrunnen på hele siden (HTML body).
  • Surface: Bakgrunnsfargen til en ting. Eks. et panel, en knapp, en seksjon, etc.
  • Border: Fargen til en ramme (stroke).
  • Text/Icon: Fargen på tekst og ikoner.

Farge-tokens

Latest release on npm

@digdir/designsystemet-theme

Color

Accent

Accent Background Default

Accent Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fefeff

HSLuv:

266° 100% 100%

CSS variabel:

--ds-color-accent-background-default

Brukes mot:

Alle fargene.

Background Default 
#fefeff

Accent Background Subtle

Accent Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#eef4fa

HSLuv:

236° 57% 96%

CSS variabel:

--ds-color-accent-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#eef4fa

Accent Surface Default

Accent Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#d1e3f3

HSLuv:

235° 60% 89%

CSS variabel:

--ds-color-accent-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#d1e3f3

Accent Surface Hover

Accent Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#bad5ec

HSLuv:

235° 57% 84%

CSS variabel:

--ds-color-accent-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#bad5ec

Accent Surface Active

Accent Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#a1c5e5

HSLuv:

238° 57% 78%

CSS variabel:

--ds-color-accent-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#a1c5e5

Accent Border Subtle

Accent Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#97bfe3

HSLuv:

239° 58% 76%

CSS variabel:

--ds-color-accent-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#97bfe3

Accent Border Default

Accent Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#3885c9

HSLuv:

246° 85% 54%

CSS variabel:

--ds-color-accent-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#3885c9

Accent Border Strong

Accent Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#014e93

HSLuv:

253° 100% 33%

CSS variabel:

--ds-color-accent-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#014e93

Accent Base Default

Accent Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#0163ba

HSLuv:

253° 100% 42%

CSS variabel:

--ds-color-accent-base-default

Base Default 
#0163ba

Accent Base Hover

Accent Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#015097

HSLuv:

253° 100% 34%

CSS variabel:

--ds-color-accent-base-hover

Base Hover 
#015097

Accent Base Active

Accent Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#013f75

HSLuv:

252° 100% 26%

CSS variabel:

--ds-color-accent-base-active

Base Active 
#013f75

Accent Text Subtle

Accent Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#0163ba

HSLuv:

253° 100% 42%

CSS variabel:

--ds-color-accent-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#0163ba

Accent Text Default

Accent Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#002d54

HSLuv:

251° 100% 18%

CSS variabel:

--ds-color-accent-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#002d54

Accent Contrast Default

Accent Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-accent-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Accent Contrast Subtle

Accent Contrast Subtle

Hexkode:

#dbe9f5

HSLuv:

234° 58% 92%

CSS variabel:

--ds-color-accent-contrast-subtle

Brukes mot:

Contrast Subtle 
#dbe9f5

Neutral

Neutral Background Default

Neutral Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fefefe

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-neutral-background-default

Brukes mot:

Alle fargene.

Background Default 
#fefefe

Neutral Background Subtle

Neutral Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#f3f4f5

HSLuv:

236° 10% 96%

CSS variabel:

--ds-color-neutral-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#f3f4f5

Neutral Surface Default

Neutral Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#e1e3e5

HSLuv:

236° 8% 90%

CSS variabel:

--ds-color-neutral-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#e1e3e5

Neutral Surface Hover

Neutral Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#ced1d4

HSLuv:

236° 7% 84%

CSS variabel:

--ds-color-neutral-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#ced1d4

Neutral Surface Active

Neutral Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#bdc1c6

HSLuv:

241° 8% 78%

CSS variabel:

--ds-color-neutral-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#bdc1c6

Neutral Border Subtle

Neutral Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#b8bcc1

HSLuv:

241° 8% 76%

CSS variabel:

--ds-color-neutral-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#b8bcc1

Neutral Border Default

Neutral Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#7a818c

HSLuv:

246° 13% 54%

CSS variabel:

--ds-color-neutral-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#7a818c

Neutral Border Strong

Neutral Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#444e5d

HSLuv:

247° 28% 33%

CSS variabel:

--ds-color-neutral-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#444e5d

Neutral Base Default

Neutral Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#1e2b3c

HSLuv:

247° 51% 17%

CSS variabel:

--ds-color-neutral-base-default

Base Default 
#1e2b3c

Neutral Base Hover

Neutral Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#303c4b

HSLuv:

245° 38% 25%

CSS variabel:

--ds-color-neutral-base-hover

Base Hover 
#303c4b

Neutral Base Active

Neutral Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#444e5d

HSLuv:

247° 28% 33%

CSS variabel:

--ds-color-neutral-base-active

Base Active 
#444e5d

Neutral Text Subtle

Neutral Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#5b6471

HSLuv:

245° 20% 42%

CSS variabel:

--ds-color-neutral-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#5b6471

Neutral Text Default

Neutral Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#202c3d

HSLuv:

248° 48% 18%

CSS variabel:

--ds-color-neutral-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#202c3d

Neutral Contrast Default

Neutral Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-neutral-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Neutral Contrast Subtle

Neutral Contrast Subtle

Hexkode:

#bbbfc4

HSLuv:

241° 8% 77%

CSS variabel:

--ds-color-neutral-contrast-subtle

Brukes mot:

Contrast Subtle 
#bbbfc4

Brand1

Brand1 Background Default

Brand1 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fffefe

HSLuv:

12° 100% 100%

CSS variabel:

--ds-color-brand1-background-default

Brukes mot:

Alle fargene.

Background Default 
#fffefe

Brand1 Background Subtle

Brand1 Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#fef0f1

HSLuv:

7° 91% 96%

CSS variabel:

--ds-color-brand1-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#fef0f1

Brand1 Surface Default

Brand1 Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#fcdbdc

HSLuv:

10° 89% 90%

CSS variabel:

--ds-color-brand1-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#fcdbdc

Brand1 Surface Hover

Brand1 Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#fbc4c5

HSLuv:

11° 90% 84%

CSS variabel:

--ds-color-brand1-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#fbc4c5

Brand1 Surface Active

Brand1 Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#f9acae

HSLuv:

11° 89% 78%

CSS variabel:

--ds-color-brand1-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#f9acae

Brand1 Border Subtle

Brand1 Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#f8a5a7

HSLuv:

11° 88% 76%

CSS variabel:

--ds-color-brand1-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#f8a5a7

Brand1 Border Default

Brand1 Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#d95558

HSLuv:

11° 58% 54%

CSS variabel:

--ds-color-brand1-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#d95558

Brand1 Border Strong

Brand1 Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#833336

HSLuv:

11° 53% 33%

CSS variabel:

--ds-color-brand1-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#833336

Brand1 Base Default

Brand1 Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#f35f63

HSLuv:

11° 85% 60%

CSS variabel:

--ds-color-brand1-base-default

Base Default 
#f35f63

Brand1 Base Hover

Brand1 Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#d05255

HSLuv:

11° 56% 52%

CSS variabel:

--ds-color-brand1-base-hover

Base Hover 
#d05255

Brand1 Base Active

Brand1 Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#af4547

HSLuv:

11° 54% 44%

CSS variabel:

--ds-color-brand1-base-active

Base Active 
#af4547

Brand1 Text Subtle

Brand1 Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#a74144

HSLuv:

11° 55% 42%

CSS variabel:

--ds-color-brand1-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#a74144

Brand1 Text Default

Brand1 Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#4b1e1f

HSLuv:

11° 46% 18%

CSS variabel:

--ds-color-brand1-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#4b1e1f

Brand1 Contrast Default

Brand1 Contrast Default

Hexkode:

#000000

HSLuv:

0° 0% 0%

CSS variabel:

--ds-color-brand1-contrast-default

Brukes mot:

Contrast Default 
#000000

Brand1 Contrast Subtle

Brand1 Contrast Subtle

Hexkode:

#000000

HSLuv:

0° 0% 0%

CSS variabel:

--ds-color-brand1-contrast-subtle

Brukes mot:

Contrast Subtle 
#000000

Brand2

Brand2 Background Default

Brand2 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fffefc

HSLuv:

68° 100% 100%

CSS variabel:

--ds-color-brand2-background-default

Brukes mot:

Alle fargene.

Background Default 
#fffefc

Brand2 Background Subtle

Brand2 Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#fbf3e0

HSLuv:

69° 64% 96%

CSS variabel:

--ds-color-brand2-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#fbf3e0

Brand2 Surface Default

Brand2 Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#f5dfad

HSLuv:

67° 62% 89%

CSS variabel:

--ds-color-brand2-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#f5dfad

Brand2 Surface Hover

Brand2 Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#f0ce7f

HSLuv:

64° 63% 84%

CSS variabel:

--ds-color-brand2-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#f0ce7f

Brand2 Surface Active

Brand2 Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#e9ba4c

HSLuv:

61° 84% 78%

CSS variabel:

--ds-color-brand2-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#e9ba4c

Brand2 Border Subtle

Brand2 Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#e7b43d

HSLuv:

59° 89% 76%

CSS variabel:

--ds-color-brand2-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#e7b43d

Brand2 Border Default

Brand2 Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#a57a17

HSLuv:

56° 95% 54%

CSS variabel:

--ds-color-brand2-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#a57a17

Brand2 Border Strong

Brand2 Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#63490e

HSLuv:

57° 93% 33%

CSS variabel:

--ds-color-brand2-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#63490e

Brand2 Base Default

Brand2 Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#e4a920

HSLuv:

56° 96% 73%

CSS variabel:

--ds-color-brand2-base-default

Base Default 
#e4a920

Brand2 Base Hover

Brand2 Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#c9951c

HSLuv:

56° 96% 65%

CSS variabel:

--ds-color-brand2-base-hover

Base Hover 
#c9951c

Brand2 Base Active

Brand2 Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#af8119

HSLuv:

55° 95% 57%

CSS variabel:

--ds-color-brand2-base-active

Base Active 
#af8119

Brand2 Text Subtle

Brand2 Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#7e5d12

HSLuv:

56° 94% 42%

CSS variabel:

--ds-color-brand2-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#7e5d12

Brand2 Text Default

Brand2 Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#382a08

HSLuv:

60° 89% 18%

CSS variabel:

--ds-color-brand2-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#382a08

Brand2 Contrast Default

Brand2 Contrast Default

Hexkode:

#000000

HSLuv:

0° 0% 0%

CSS variabel:

--ds-color-brand2-contrast-default

Brukes mot:

Contrast Default 
#000000

Brand2 Contrast Subtle

Brand2 Contrast Subtle

Hexkode:

#2b2006

HSLuv:

61° 87% 13%

CSS variabel:

--ds-color-brand2-contrast-subtle

Brukes mot:

Contrast Subtle 
#2b2006

Brand3

Brand3 Background Default

Brand3 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fdfeff

HSLuv:

236° 100% 100%

CSS variabel:

--ds-color-brand3-background-default

Brukes mot:

Alle fargene.

Background Default 
#fdfeff

Brand3 Background Subtle

Brand3 Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#eaf6fe

HSLuv:

228° 91% 96%

CSS variabel:

--ds-color-brand3-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#eaf6fe

Brand3 Surface Default

Brand3 Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#c8e6fd

HSLuv:

233° 93% 90%

CSS variabel:

--ds-color-brand3-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#c8e6fd

Brand3 Surface Hover

Brand3 Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#a9d7fb

HSLuv:

236° 91% 84%

CSS variabel:

--ds-color-brand3-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#a9d7fb

Brand3 Surface Active

Brand3 Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#84c7fa

HSLuv:

238° 92% 78%

CSS variabel:

--ds-color-brand3-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#84c7fa

Brand3 Border Subtle

Brand3 Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#7ac2f9

HSLuv:

239° 91% 76%

CSS variabel:

--ds-color-brand3-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#7ac2f9

Brand3 Border Default

Brand3 Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#1a85d6

HSLuv:

248° 96% 54%

CSS variabel:

--ds-color-brand3-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#1a85d6

Brand3 Border Strong

Brand3 Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#105082

HSLuv:

247° 95% 33%

CSS variabel:

--ds-color-brand3-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#105082

Brand3 Base Default

Brand3 Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#1e98f5

HSLuv:

248° 97% 61%

CSS variabel:

--ds-color-brand3-base-default

Base Default 
#1e98f5

Brand3 Base Hover

Brand3 Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#1a83d3

HSLuv:

248° 96% 53%

CSS variabel:

--ds-color-brand3-base-hover

Base Hover 
#1a83d3

Brand3 Base Active

Brand3 Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#166eb2

HSLuv:

248° 96% 45%

CSS variabel:

--ds-color-brand3-base-active

Base Active 
#166eb2

Brand3 Text Subtle

Brand3 Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#1466a5

HSLuv:

248° 96% 42%

CSS variabel:

--ds-color-brand3-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#1466a5

Brand3 Text Default

Brand3 Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#092e4b

HSLuv:

246° 91% 18%

CSS variabel:

--ds-color-brand3-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#092e4b

Brand3 Contrast Default

Brand3 Contrast Default

Hexkode:

#000000

HSLuv:

0° 0% 0%

CSS variabel:

--ds-color-brand3-contrast-default

Brukes mot:

Contrast Default 
#000000

Brand3 Contrast Subtle

Brand3 Contrast Subtle

Hexkode:

#010407

HSLuv:

235° 75% 1%

CSS variabel:

--ds-color-brand3-contrast-subtle

Brukes mot:

Contrast Subtle 
#010407

Success

Success Background Default

Success Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fcfefc

HSLuv:

128° 36% 99%

CSS variabel:

--ds-color-success-background-default

Brukes mot:

Alle fargene.

Background Default 
#fcfefc

Success Background Subtle

Success Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#edf6ee

HSLuv:

132° 20% 96%

CSS variabel:

--ds-color-success-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#edf6ee

Success Surface Default

Success Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#d1e9d4

HSLuv:

132° 19% 90%

CSS variabel:

--ds-color-success-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#d1e9d4

Success Surface Hover

Success Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#b5dbba

HSLuv:

132° 25% 84%

CSS variabel:

--ds-color-success-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#b5dbba

Success Surface Active

Success Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#96cd9e

HSLuv:

132° 38% 78%

CSS variabel:

--ds-color-success-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#96cd9e

Success Border Subtle

Success Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#8fc997

HSLuv:

132° 41% 76%

CSS variabel:

--ds-color-success-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#8fc997

Success Border Default

Success Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#229532

HSLuv:

130° 92% 54%

CSS variabel:

--ds-color-success-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#229532

Success Border Strong

Success Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#045a10

HSLuv:

129° 98% 33%

CSS variabel:

--ds-color-success-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#045a10

Success Base Default

Success Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#068718

HSLuv:

129° 99% 49%

CSS variabel:

--ds-color-success-base-default

Base Default 
#068718

Success Base Hover

Success Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#057014

HSLuv:

129° 98% 41%

CSS variabel:

--ds-color-success-base-hover

Base Hover 
#057014

Success Base Active

Success Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#045a10

HSLuv:

129° 98% 33%

CSS variabel:

--ds-color-success-base-active

Base Active 
#045a10

Success Text Subtle

Success Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#057315

HSLuv:

129° 99% 42%

CSS variabel:

--ds-color-success-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#057315

Success Text Default

Success Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#023409

HSLuv:

130° 97% 18%

CSS variabel:

--ds-color-success-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#023409

Success Contrast Default

Success Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-success-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Success Contrast Subtle

Success Contrast Subtle

Hexkode:

#f9fcf9

HSLuv:

128° 22% 99%

CSS variabel:

--ds-color-success-contrast-subtle

Brukes mot:

Contrast Subtle 
#f9fcf9

Danger

Danger Background Default

Danger Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fffefe

HSLuv:

12° 100% 100%

CSS variabel:

--ds-color-danger-background-default

Brukes mot:

Alle fargene.

Background Default 
#fffefe

Danger Background Subtle

Danger Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#fbf1f1

HSLuv:

12° 65% 96%

CSS variabel:

--ds-color-danger-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#fbf1f1

Danger Surface Default

Danger Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#f5dcdc

HSLuv:

12° 64% 90%

CSS variabel:

--ds-color-danger-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#f5dcdc

Danger Surface Hover

Danger Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#f0c7c7

HSLuv:

12° 64% 84%

CSS variabel:

--ds-color-danger-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#f0c7c7

Danger Surface Active

Danger Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#eab3b3

HSLuv:

12° 62% 78%

CSS variabel:

--ds-color-danger-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#eab3b3

Danger Border Subtle

Danger Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#e8acac

HSLuv:

12° 61% 76%

CSS variabel:

--ds-color-danger-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#e8acac

Danger Border Default

Danger Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#d25b5b

HSLuv:

12° 52% 54%

CSS variabel:

--ds-color-danger-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#d25b5b

Danger Border Strong

Danger Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#9a1616

HSLuv:

12° 88% 33%

CSS variabel:

--ds-color-danger-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#9a1616

Danger Base Default

Danger Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#C01B1B

HSLuv:

12° 90% 41%

CSS variabel:

--ds-color-danger-base-default

Base Default 
#C01B1B

Danger Base Hover

Danger Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#9c1616

HSLuv:

12° 89% 33%

CSS variabel:

--ds-color-danger-base-hover

Base Hover 
#9c1616

Danger Base Active

Danger Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#791111

HSLuv:

12° 86% 25%

CSS variabel:

--ds-color-danger-base-active

Base Active 
#791111

Danger Text Subtle

Danger Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#c22020

HSLuv:

12° 87% 42%

CSS variabel:

--ds-color-danger-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#c22020

Danger Text Default

Danger Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#5a0d0d

HSLuv:

12° 82% 18%

CSS variabel:

--ds-color-danger-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#5a0d0d

Danger Contrast Default

Danger Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-danger-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Danger Contrast Subtle

Danger Contrast Subtle

Hexkode:

#f7e1e1

HSLuv:

12° 66% 91%

CSS variabel:

--ds-color-danger-contrast-subtle

Brukes mot:

Contrast Subtle 
#f7e1e1

Info

Info Background Default

Info Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fefeff

HSLuv:

266° 100% 100%

CSS variabel:

--ds-color-info-background-default

Brukes mot:

Alle fargene.

Background Default 
#fefeff

Info Background Subtle

Info Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#edf5fa

HSLuv:

226° 55% 96%

CSS variabel:

--ds-color-info-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#edf5fa

Info Surface Default

Info Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#d3e5f4

HSLuv:

234° 61% 90%

CSS variabel:

--ds-color-info-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#d3e5f4

Info Surface Hover

Info Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#b7d5ed

HSLuv:

234° 60% 84%

CSS variabel:

--ds-color-info-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#b7d5ed

Info Surface Active

Info Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#9bc5e5

HSLuv:

235° 57% 78%

CSS variabel:

--ds-color-info-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#9bc5e5

Info Border Subtle

Info Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#94c1e3

HSLuv:

235° 57% 76%

CSS variabel:

--ds-color-info-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#94c1e3

Info Border Default

Info Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#2f86c9

HSLuv:

245° 90% 54%

CSS variabel:

--ds-color-info-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#2f86c9

Info Border Strong

Info Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#075089

HSLuv:

249° 98% 33%

CSS variabel:

--ds-color-info-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#075089

Info Base Default

Info Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#0A71C0

HSLuv:

250° 99% 47%

CSS variabel:

--ds-color-info-base-default

Base Default 
#0A71C0

Info Base Hover

Info Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#085e9f

HSLuv:

249° 98% 39%

CSS variabel:

--ds-color-info-base-hover

Base Hover 
#085e9f

Info Base Active

Info Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#074a7f

HSLuv:

249° 98% 31%

CSS variabel:

--ds-color-info-base-active

Base Active 
#074a7f

Info Text Subtle

Info Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#0966ac

HSLuv:

249° 98% 42%

CSS variabel:

--ds-color-info-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#0966ac

Info Text Default

Info Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#042d4d

HSLuv:

247° 96% 18%

CSS variabel:

--ds-color-info-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#042d4d

Info Contrast Default

Info Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-info-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Info Contrast Subtle

Info Contrast Subtle

Hexkode:

#edf5fa

HSLuv:

226° 55% 96%

CSS variabel:

--ds-color-info-contrast-subtle

Brukes mot:

Contrast Subtle 
#edf5fa

Warning

Warning Background Default

Warning Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#fffefd

HSLuv:

55° 100% 100%

CSS variabel:

--ds-color-warning-background-default

Brukes mot:

Alle fargene.

Background Default 
#fffefd

Warning Background Subtle

Warning Background Subtle er en bakgrunnsfarge som har et hint av farge i seg.

Hexkode:

#f9f4e2

HSLuv:

75° 44% 96%

CSS variabel:

--ds-color-warning-background-subtle

Brukes mot:

Alle fargene.

Background Subtle 
#f9f4e2

Warning Surface Default

Warning Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Fargen brukes for eksempel i Card komponenten til Designsystemet.

Hexkode:

#efe2b3

HSLuv:

73° 39% 90%

CSS variabel:

--ds-color-warning-surface-default

Brukes mot:

Background subtle- og Default.

Surface Default 
#efe2b3

Warning Surface Hover

Warning Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.

Hexkode:

#e5d183

HSLuv:

73° 61% 84%

CSS variabel:

--ds-color-warning-surface-hover

Brukes mot:

Background subtle- og Default.

Surface Hover 
#e5d183

Warning Surface Active

Warning Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.

Hexkode:

#dcbf53

HSLuv:

70° 81% 78%

CSS variabel:

--ds-color-warning-surface-active

Brukes mot:

Background subtle- og Default.

Surface Active 
#dcbf53

Warning Border Subtle

Warning Border Subtle er den lyseste border-fargen og brukes for å skille elementer fra hverandre.

Hexkode:

#d9b945

HSLuv:

68° 86% 76%

CSS variabel:

--ds-color-warning-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border Subtle 
#d9b945

Warning Border Default

Warning Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.

Hexkode:

#987f22

HSLuv:

67° 92% 54%

CSS variabel:

--ds-color-warning-border-default

Brukes mot:

Background fargene og Surface Default

Border Default 
#987f22

Warning Border Strong

Warning Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.

Hexkode:

#5c4c14

HSLuv:

67° 89% 33%

CSS variabel:

--ds-color-warning-border-strong

Brukes mot:

Background fargene og Surface Default

Border Strong 
#5c4c14

Warning Base Default

Warning Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på flater som skal fange brukerens oppmerksomhet.

Hexkode:

#B8581D

HSLuv:

27° 92% 49%

CSS variabel:

--ds-color-warning-base-default

Base Default 
#B8581D

Warning Base Hover

Warning Base Hover kan brukes som hover farge på elementer som bruker Base Default fargen.

Hexkode:

#984918

HSLuv:

28° 91% 40%

CSS variabel:

--ds-color-warning-base-hover

Base Hover 
#984918

Warning Base Active

Warning Base Active kan brukes som active farge på elementer som bruker Base Default fargen

Hexkode:

#7a3b13

HSLuv:

28° 90% 33%

CSS variabel:

--ds-color-warning-base-active

Base Active 
#7a3b13

Warning Text Subtle

Warning Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.

Hexkode:

#9e4b19

HSLuv:

27° 91% 42%

CSS variabel:

--ds-color-warning-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text Subtle 
#9e4b19

Warning Text Default

Warning Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.

Hexkode:

#47220b

HSLuv:

30° 85% 18%

CSS variabel:

--ds-color-warning-text-default

Brukes mot:

Background- og Surface Fargene.

Text Default 
#47220b

Warning Contrast Default

Warning Contrast Default

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-warning-contrast-default

Brukes mot:

Contrast Default 
#ffffff

Warning Contrast Subtle

Warning Contrast Subtle

Hexkode:

#fdfbf9

HSLuv:

55° 46% 99%

CSS variabel:

--ds-color-warning-contrast-subtle

Brukes mot:

Contrast Subtle 
#fdfbf9

Focus

Inner 
#fefefe
Outer 
#002d54
Rediger denne siden på Github (åpnes i ny fane)