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 - styrke - 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

Color

Accent

Accent Background Default

Accent Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-accent-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

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:

#d3e4f3

HSLuv:

235° 58% 90%

CSS variabel:

--ds-color-accent-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#d3e4f3

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:

#a3c6e6

HSLuv:

238° 58% 78%

CSS variabel:

--ds-color-accent-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#a3c6e6

Accent Border Subtle

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

Hexkode:

#99c0e3

HSLuv:

238° 57% 76%

CSS variabel:

--ds-color-accent-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border-subtle 
#99c0e3

Accent Border Default

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

Hexkode:

#3582c8

HSLuv:

247° 86% 53%

CSS variabel:

--ds-color-accent-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#3582c8

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:

#0061b8

HSLuv:

253° 100% 41%

CSS variabel:

--ds-color-accent-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#0061b8

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:

#0062ba

HSLuv:

253° 100% 42%

CSS variabel:

--ds-color-accent-base-default

Base-default 
#0062ba

Accent Base Hover

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

Hexkode:

#004f96

HSLuv:

253° 100% 34%

CSS variabel:

--ds-color-accent-base-hover

Base-hover 
#004f96

Accent Base Active

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

Hexkode:

#003d75

HSLuv:

253° 100% 26%

CSS variabel:

--ds-color-accent-base-active

Base-active 
#003d75

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:

#0061b8

HSLuv:

253° 100% 41%

CSS variabel:

--ds-color-accent-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#0061b8

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:

#002c54

HSLuv:

251° 100% 18%

CSS variabel:

--ds-color-accent-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#002c54

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:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-neutral-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

Neutral Background Subtle

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

Hexkode:

#f3f4f4

HSLuv:

192° 2% 96%

CSS variabel:

--ds-color-neutral-background-subtle

Brukes mot:

Alle fargene.

Background-subtle 
#f3f4f4

Neutral Surface Default

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

Hexkode:

#e0e2e4

HSLuv:

236° 8% 90%

CSS variabel:

--ds-color-neutral-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#e0e2e4

Neutral Surface Hover

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

Hexkode:

#cfd2d5

HSLuv:

236° 7% 84%

CSS variabel:

--ds-color-neutral-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#cfd2d5

Neutral Surface Active

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

Hexkode:

#bfc3c7

HSLuv:

236° 7% 79%

CSS variabel:

--ds-color-neutral-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#bfc3c7

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:

#777f89

HSLuv:

242° 14% 53%

CSS variabel:

--ds-color-neutral-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#777f89

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:

#59626f

HSLuv:

245° 21% 41%

CSS variabel:

--ds-color-neutral-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#59626f

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:

#313d4d

HSLuv:

246° 38% 25%

CSS variabel:

--ds-color-neutral-base-hover

Base-hover 
#313d4d

Neutral Base Active

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

Hexkode:

#444f5d

HSLuv:

244° 29% 33%

CSS variabel:

--ds-color-neutral-base-active

Base-active 
#444f5d

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:

#59626f

HSLuv:

245° 21% 41%

CSS variabel:

--ds-color-neutral-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#59626f

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:

#1f2c3d

HSLuv:

247° 50% 18%

CSS variabel:

--ds-color-neutral-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#1f2c3d

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:

#babec4

HSLuv:

244° 9% 77%

CSS variabel:

--ds-color-neutral-contrast-subtle

Brukes mot:

Contrast-subtle 
#babec4

Brand1

Brand1 Background Default

Brand1 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-brand1-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

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:

#fcdadb

HSLuv:

10° 89% 90%

CSS variabel:

--ds-color-brand1-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#fcdadb

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:

#f9afb1

HSLuv:

11° 88% 78%

CSS variabel:

--ds-color-brand1-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#f9afb1

Brand1 Border Subtle

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

Hexkode:

#f9a5a8

HSLuv:

10° 89% 76%

CSS variabel:

--ds-color-brand1-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border-subtle 
#f9a5a8

Brand1 Border Default

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

Hexkode:

#d55356

HSLuv:

11° 56% 53%

CSS variabel:

--ds-color-brand1-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#d55356

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:

#a44043

HSLuv:

11° 55% 41%

CSS variabel:

--ds-color-brand1-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#a44043

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:

#f45f63

HSLuv:

11° 86% 60%

CSS variabel:

--ds-color-brand1-base-default

Base-default 
#f45f63

Brand1 Base Hover

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

Hexkode:

#f78588

HSLuv:

11° 88% 68%

CSS variabel:

--ds-color-brand1-base-hover

Base-hover 
#f78588

Brand1 Base Active

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

Hexkode:

#f9a6a8

HSLuv:

11° 89% 76%

CSS variabel:

--ds-color-brand1-base-active

Base-active 
#f9a6a8

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:

#a44043

HSLuv:

11° 55% 41%

CSS variabel:

--ds-color-brand1-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#a44043

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:

#4b1d1e

HSLuv:

11° 48% 18%

CSS variabel:

--ds-color-brand1-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#4b1d1e

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:

#020101

HSLuv:

12° 16% 0%

CSS variabel:

--ds-color-brand1-contrast-subtle

Brukes mot:

Contrast-subtle 
#020101

Brand2

Brand2 Background Default

Brand2 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-brand2-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

Brand2 Background Subtle

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

Hexkode:

#fbf3df

HSLuv:

70° 64% 96%

CSS variabel:

--ds-color-brand2-background-subtle

Brukes mot:

Alle fargene.

Background-subtle 
#fbf3df

Brand2 Surface Default

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

Hexkode:

#f6e0ae

HSLuv:

67° 65% 90%

CSS variabel:

--ds-color-brand2-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#f6e0ae

Brand2 Surface Hover

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

Hexkode:

#f0ce7e

HSLuv:

65° 64% 84%

CSS variabel:

--ds-color-brand2-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#f0ce7e

Brand2 Surface Active

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

Hexkode:

#eabc4f

HSLuv:

61° 83% 78%

CSS variabel:

--ds-color-brand2-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#eabc4f

Brand2 Border Subtle

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

Hexkode:

#e8b43a

HSLuv:

59° 90% 76%

CSS variabel:

--ds-color-brand2-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border-subtle 
#e8b43a

Brand2 Border Default

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

Hexkode:

#a17817

HSLuv:

57° 95% 53%

CSS variabel:

--ds-color-brand2-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#a17817

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:

#7c5c11

HSLuv:

57° 95% 41%

CSS variabel:

--ds-color-brand2-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#7c5c11

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:

#e5aa21

HSLuv:

56° 96% 73%

CSS variabel:

--ds-color-brand2-base-default

Base-default 
#e5aa21

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:

#af8218

HSLuv:

56° 96% 57%

CSS variabel:

--ds-color-brand2-base-active

Base-active 
#af8218

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:

#7c5c11

HSLuv:

57° 95% 41%

CSS variabel:

--ds-color-brand2-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#7c5c11

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:

#382908

HSLuv:

58° 89% 18%

CSS variabel:

--ds-color-brand2-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#382908

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:

#2c2006

HSLuv:

59° 87% 13%

CSS variabel:

--ds-color-brand2-contrast-subtle

Brukes mot:

Contrast-subtle 
#2c2006

Brand3

Brand3 Background Default

Brand3 Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-brand3-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

Brand3 Background Subtle

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

Hexkode:

#eaf5fe

HSLuv:

232° 91% 96%

CSS variabel:

--ds-color-brand3-background-subtle

Brukes mot:

Alle fargene.

Background-subtle 
#eaf5fe

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:

#a8d7fb

HSLuv:

235° 91% 84%

CSS variabel:

--ds-color-brand3-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#a8d7fb

Brand3 Surface Active

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

Hexkode:

#89c9fa

HSLuv:

238° 91% 78%

CSS variabel:

--ds-color-brand3-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#89c9fa

Brand3 Border Subtle

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

Hexkode:

#7bc3f9

HSLuv:

238° 91% 76%

CSS variabel:

--ds-color-brand3-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border-subtle 
#7bc3f9

Brand3 Border Default

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

Hexkode:

#1a83d2

HSLuv:

247° 96% 53%

CSS variabel:

--ds-color-brand3-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#1a83d2

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:

#1465a2

HSLuv:

247° 96% 41%

CSS variabel:

--ds-color-brand3-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#1465a2

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:

#1e98f4

HSLuv:

248° 97% 61%

CSS variabel:

--ds-color-brand3-base-default

Base-default 
#1e98f4

Brand3 Base Hover

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

Hexkode:

#53b0f7

HSLuv:

242° 90% 69%

CSS variabel:

--ds-color-brand3-base-hover

Base-hover 
#53b0f7

Brand3 Base Active

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

Hexkode:

#81c5f9

HSLuv:

238° 90% 77%

CSS variabel:

--ds-color-brand3-base-active

Base-active 
#81c5f9

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:

#1465a2

HSLuv:

247° 96% 41%

CSS variabel:

--ds-color-brand3-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#1465a2

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:

#092d49

HSLuv:

246° 91% 18%

CSS variabel:

--ds-color-brand3-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#092d49

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:

#010507

HSLuv:

221° 79% 1%

CSS variabel:

--ds-color-brand3-contrast-subtle

Brukes mot:

Contrast-subtle 
#010507

Success

Success Background Default

Success Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-success-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

Success Background Subtle

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

Hexkode:

#ecf6ee

HSLuv:

136° 22% 96%

CSS variabel:

--ds-color-success-background-subtle

Brukes mot:

Alle fargene.

Background-subtle 
#ecf6ee

Success Surface Default

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

Hexkode:

#d0e8d3

HSLuv:

132° 18% 90%

CSS variabel:

--ds-color-success-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#d0e8d3

Success Surface Hover

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

Hexkode:

#b4dbba

HSLuv:

133° 26% 84%

CSS variabel:

--ds-color-success-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#b4dbba

Success Surface Active

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

Hexkode:

#9bcfa2

HSLuv:

132° 36% 79%

CSS variabel:

--ds-color-success-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#9bcfa2

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:

#1d922d

HSLuv:

130° 93% 53%

CSS variabel:

--ds-color-success-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#1d922d

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:

#057114

HSLuv:

129° 98% 41%

CSS variabel:

--ds-color-success-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#057114

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:

#057114

HSLuv:

129° 98% 41%

CSS variabel:

--ds-color-success-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#057114

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:

#fafdfb

HSLuv:

143° 28% 99%

CSS variabel:

--ds-color-success-contrast-subtle

Brukes mot:

Contrast-subtle 
#fafdfb

Danger

Danger Background Default

Danger Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-danger-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

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:

#f0c8c8

HSLuv:

12° 64% 84%

CSS variabel:

--ds-color-danger-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#f0c8c8

Danger Surface Active

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

Hexkode:

#ebb5b5

HSLuv:

12° 63% 78%

CSS variabel:

--ds-color-danger-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#ebb5b5

Danger Border Subtle

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

Hexkode:

#e8adad

HSLuv:

12° 61% 76%

CSS variabel:

--ds-color-danger-border-subtle

Brukes mot:

Background fargene og Surface Default.

Border-subtle 
#e8adad

Danger Border Default

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

Hexkode:

#d15757

HSLuv:

12° 52% 53%

CSS variabel:

--ds-color-danger-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#d15757

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:

#bf1b1b

HSLuv:

12° 90% 41%

CSS variabel:

--ds-color-danger-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#bf1b1b

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:

#bf1b1b

HSLuv:

12° 90% 41%

CSS variabel:

--ds-color-danger-base-default

Base-default 
#bf1b1b

Danger Base Hover

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

Hexkode:

#9b1616

HSLuv:

12° 88% 33%

CSS variabel:

--ds-color-danger-base-hover

Base-hover 
#9b1616

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:

#bf1b1b

HSLuv:

12° 90% 41%

CSS variabel:

--ds-color-danger-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#bf1b1b

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:

#590d0d

HSLuv:

12° 82% 18%

CSS variabel:

--ds-color-danger-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#590d0d

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:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-info-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

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:

#d2e5f3

HSLuv:

231° 57% 90%

CSS variabel:

--ds-color-info-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#d2e5f3

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:

#9fc7e6

HSLuv:

235° 58% 78%

CSS variabel:

--ds-color-info-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#9fc7e6

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:

#2a83c8

HSLuv:

246° 91% 53%

CSS variabel:

--ds-color-info-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#2a83c8

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:

#0964a9

HSLuv:

249° 98% 41%

CSS variabel:

--ds-color-info-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#0964a9

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:

#0a71bf

HSLuv:

249° 99% 46%

CSS variabel:

--ds-color-info-base-default

Base-default 
#0a71bf

Info Base Hover

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

Hexkode:

#085d9f

HSLuv:

250° 98% 39%

CSS variabel:

--ds-color-info-base-hover

Base-hover 
#085d9f

Info Base Active

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

Hexkode:

#074a7e

HSLuv:

249° 98% 31%

CSS variabel:

--ds-color-info-base-active

Base-active 
#074a7e

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:

#0964a9

HSLuv:

249° 98% 41%

CSS variabel:

--ds-color-info-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#0964a9

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:

#eff6fb

HSLuv:

229° 60% 97%

CSS variabel:

--ds-color-info-contrast-subtle

Brukes mot:

Contrast-subtle 
#eff6fb

Warning

Warning Background Default

Warning Background Default er den mest nøytrale bakgrunnsfargen.

Hexkode:

#ffffff

HSLuv:

0° 0% 100%

CSS variabel:

--ds-color-warning-background-default

Brukes mot:

Alle fargene.

Background-default 
#ffffff

Warning Background Subtle

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

Hexkode:

#f9f4e1

HSLuv:

75° 44% 96%

CSS variabel:

--ds-color-warning-background-subtle

Brukes mot:

Alle fargene.

Background-subtle 
#f9f4e1

Warning Surface Default

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

Hexkode:

#efe2b2

HSLuv:

74° 39% 90%

CSS variabel:

--ds-color-warning-surface-default

Brukes mot:

Background subtle- og Default.

Surface-default 
#efe2b2

Warning Surface Hover

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

Hexkode:

#e6d184

HSLuv:

72° 60% 84%

CSS variabel:

--ds-color-warning-surface-hover

Brukes mot:

Background subtle- og Default.

Surface-hover 
#e6d184

Warning Surface Active

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

Hexkode:

#ddc159

HSLuv:

70° 79% 79%

CSS variabel:

--ds-color-warning-surface-active

Brukes mot:

Background subtle- og Default.

Surface-active 
#ddc159

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:

#957c21

HSLuv:

67° 92% 53%

CSS variabel:

--ds-color-warning-border-default

Brukes mot:

Background fargene og Surface Default

Border-default 
#957c21

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:

#736019

HSLuv:

68° 91% 41%

CSS variabel:

--ds-color-warning-border-strong

Brukes mot:

Background fargene og Surface Default

Border-strong 
#736019

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:

#b7581d

HSLuv:

27° 92% 48%

CSS variabel:

--ds-color-warning-base-default

Base-default 
#b7581d

Warning Base Hover

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

Hexkode:

#994918

HSLuv:

27° 91% 41%

CSS variabel:

--ds-color-warning-base-hover

Base-hover 
#994918

Warning Base Active

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

Hexkode:

#7b3b13

HSLuv:

28° 90% 33%

CSS variabel:

--ds-color-warning-base-active

Base-active 
#7b3b13

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:

#9b4a18

HSLuv:

27° 91% 41%

CSS variabel:

--ds-color-warning-text-subtle

Brukes mot:

Background fargene og Surface Default.

Text-subtle 
#9b4a18

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:

#46220b

HSLuv:

30° 85% 18%

CSS variabel:

--ds-color-warning-text-default

Brukes mot:

Background- og Surface Fargene.

Text-default 
#46220b

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:

#fdf9f8

HSLuv:

28° 61% 98%

CSS variabel:

--ds-color-warning-contrast-subtle

Brukes mot:

Contrast-subtle 
#fdf9f8

Focus

Inner 
#ffffff
Outer 
#1f2c3d
Rediger denne siden på Github (åpnes i ny fane)