Farger | Punkt | Origo - Oslo kommune

Fargebruk

Oslo kommune har en fargepalett som er inspirert av Oslos bybilde; blått fra trikken og fjorden, grønt fra våre grønne lunger og marka. De varme fargene er inspirert av fasader på byens bygninger.

Samlet sammensetning av fargene bør stemme overens med merkevarefargen som er valgt som hovedfarge til applikasjonen/domenet.

Nyansefarger bør brukes på en måte som komplimenterer brandfargene.

Kontrast

Hver farge i paletten er merket med bokstavene AA eller AAA for å indikere tilgjengeligheten på bakgrunnsfargen. Andre tekstfarger bør testes for kontrast ved å bruke en online kontrastkontroll for å sikre at den oppfyller WCAG AA-krav for tilgjengelighet.

Tilgjengelighet for fargeblinde

Det er en god idé å teste fargene du planlegger å bruke med en fargeblindesimuleringsapp, for eksempel Color Oracle. Du kan bruke simuleringen til å justere fargekombinasjonene for å være tilgjengelige.

Merkevarefarger

blue-dark

#2a2859

	16px	24px
blue-light	AAA	AAA
white	AAA	AAA
black	Ikke leselig	Ikke leselig

blue

#6fe9ff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
black	AAA	AAA

blue-light

#b3f5ff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
black	AAA	AAA

green-dark

#034b45

	16px	24px
green-light	AAA	AAA
white	AAA	AAA
blue-dark	Ikke leselig	Ikke leselig

green

#43f8b6

	16px	24px
green-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue-dark	AAA	AAA

green-light

#c7f6c9

	16px	24px
green-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue-dark	AAA	AAA

red

#ff8274

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
red-light	Ikke leselig	Ikke leselig

red-light

#ffb4ac

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
red	Ikke leselig	Ikke leselig

yellow

#f9C66b

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
yellow-50	Ikke leselig	Ikke leselig

beige-dark

#d0bfae

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
gray-dark	AAA	AAA

beige-light

#f8f0dd

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
beige-dark	Ikke leselig	Ikke leselig

Nyansefarger

blue-5

#f1fdff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue	Ikke leselig	Ikke leselig

blue-10

#e5fcff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue	Ikke leselig	Ikke leselig

blue-60

#d1f9ff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue	Ikke leselig	Ikke leselig

green-10

#e5ffe6

	16px	24px
green-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue-dark	AAA	AAA

green-30

#c7fde9

	16px	24px
green-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
blue-dark	AAA	AAA

red-5

#fff3f2

	16px	24px
blue-dark	AAA	AAA
red	Ikke leselig	Ikke leselig
green-dark	AAA	AAA

red-30

#ffdfdc

	16px	24px
blue-dark	AAA	AAA
red	Ikke leselig	Ikke leselig
green-dark	AAA	AAA

yellow-50

#ffe7bc

	16px	24px
blue-dark	AAA	AAA
red	Ikke leselig	Ikke leselig
yellow	Ikke leselig	Ikke leselig

Tilstandsfarger

hover

#1f42aa

	16px	24px
blue-light	AAA	AAA
blue	AA	AAA
white	AAA	AAA

hover-light

#b3f5ff

	16px	24px
blue-dark	AAA	AAA
blue	Ikke leselig	Ikke leselig
white	Ikke leselig	Ikke leselig

focus

#e0adff

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
black	AAA	AAA

disabled

#4D4D4D

	16px	24px
disabled-light	AAA	AAA
white	AAA	AAA
blue-dark	Ikke leselig	Ikke leselig

disabled-light

#f9f9f9

	16px	24px
disabled	AAA	AAA
white	Ikke leselig	Ikke leselig
blue-dark	AAA	AAA

Nøytrale farger

Gråskala digital

gray-light

#f9f9f9

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
disabled	AAA	AAA

gray

#f2f2f2

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
disabled	AAA	AAA

gray-dark

#2c2c2c

	16px	24px
blue-dark	Ikke leselig	Ikke leselig
white	AAA	AAA
gray-light	AAA	AAA

Gråskala

white

#ffffff

	16px	24px
blue-dark	AAA	AAA
black	AAA	AAA
green-dark	AAA	AAA

grayscale-10

#e6e6e6

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
gray-light	Ikke leselig	Ikke leselig

grayscale-20

#cccccc

	16px	24px
blue-dark	AAA	AAA
white	Ikke leselig	Ikke leselig
gray-light	Ikke leselig	Ikke leselig

grayscale-30

#b3b3b3

	16px	24px
blue-dark	AA	AAA
white	Ikke leselig	Ikke leselig
gray-light	Ikke leselig	Ikke leselig

grayscale-40

#9a9a9a

	16px	24px
blue-dark	AA	AAA
white	Ikke leselig	Ikke leselig
gray-light	Ikke leselig	Ikke leselig

grayscale-50

#808080

	16px	24px
blue-dark	Ikke leselig	AA
white	Ikke leselig	AA
gray-light	Ikke leselig	AA

grayscale-60

#666666

	16px	24px
blue-dark	Ikke leselig	Ikke leselig
white	AA	AAA
gray-light	AA	AAA

grayscale-70

#4d4d4d

	16px	24px
blue-dark	Ikke leselig	Ikke leselig
white	AAA	AAA
gray-light	AAA	AAA

grayscale-80

#333333

	16px	24px
blue	AAA	AAA
white	AAA	AAA
gray-light	AAA	AAA

grayscale-90

#1a1a1a

	16px	24px
blue	AAA	AAA
white	AAA	AAA
gray-light	AAA	AAA

black

#000000

	16px	24px
blue	AAA	AAA
white	AAA	AAA
gray-light	AAA	AAA