#Colors

#DNB color table for web

Note: DNB color names for design and development are in English.

Sample	Type	Name	Hex	RGB	Figma Library name	CSS Custom Properties name
#00343E	Profile	Ocean green	#00343E	0 52 62	Ocean green	--color-ocean-green
#14555A	Profile	Emerald green	#14555A	20 85 90	Emerald green	--color-emerald-green
#007272	Profile	Sea green	#007272	0 114 114	Sea green	--color-sea-green
#A5E1D2	Profile	Mint green	#A5E1D2	165 225 210	Mint green	--color-mint-green
#28B482	Profile	Summer green	#28B482	40 180 130	Summer green	--color-summer-green
#FDBB31	Profile	Accent yellow	#FDBB31	253 187 49	Accent yellow	--color-accent-yellow
#23195A	Profile	Indigo	#23195A	35 25 90	Indigo	--color-indigo
#6E2382	Profile	Violet	#6E2382	110 35 130	Violet	--color-violet
#4BBED2	Profile	Sky blue	#4BBED2	75 190 210	Sky blue	--color-sky-blue
#F2F2F5	Profile	Lavender	#F2F2F5	242 242 245	Lavender	--color-lavender
#FBF6EC	Profile	Sand yellow	#FBF6EC	251 246 236	Sand yellow	--color-sand-yellow
#F2F4EC	Profile	Pistachio	#F2F4EC	242 244 236	Pistachio	--color-pistachio
#B3D5D5	UX	Sea green 30%	#B3D5D5	179 213 213	Sea green 30%	--color-sea-green-30
#D2F0E9	UX	Mint green 50%	#D2F0E9	210 240 233	Mint green 50%	--color-mint-green-50
#E9F8F4	UX	Mint green 25%	#E9F8F4	233 248 244	Mint green 25%	--color-mint-green-25
#F4FBF9	UX	Mint green 12%	#F4FBF9	244 251 249	Mint green 12%	--color-mint-green-12
#FEEBC1	UX	Accent yellow 30%	#FEEBC1	254 235 193	Accent yellow 30%	--color-accent-yellow-30
#FF5400	UX	Signal orange	#FF5400	255 84 0	Signal orange	--color-signal-orange
#DC2A2A	UX	Fire red	#DC2A2A	220 42 42	Fire red	--color-fire-red
#FDEEEE	UX	Fire red 8%	#FDEEEE	253 238 238	Fire red 8%	--color-fire-red-8
#007B5E	UX	Success green	#007B5E	0 128 0	Success green	--color-success-green
#000000	UX	Black	#000000	0 0 0	Black	--color-black
#333333	UX	Black 80%	#333333	51 51 51	Black 80%	--color-black-80
#737373	UX	Black 55%	#737373	115 115 115	Black 55%	--color-black-55
#CCCCCC	UX	Black 20%	#CCCCCC	204 204 204	Black 20%	--color-black-20
#EBEBEB	UX	Black 8%	#EBEBEB	235 235 235	Black 8%	--color-black-8
#F8F8F8	UX	Black 3%	#F8F8F8	248 248 248	Black 3%	--color-black-3
#FFFFFF	UX	White	#FFFFFF	255 255 255	White	--color-white

#Theme Colors

Sample	Type	Name	Hex	RGB	Figma Library name	CSS Custom Properties name
#89aaac	UX Theme Eiendom	Emerald green 50%	#00343E	137 170 172	Emerald green 50%	--color-emerald-green-50
#c4d4d6	UX Theme Eiendom	Emerald green 25%	#c4d4d6	196 212 214	Emerald green 25%	--color-emerald-green-25
#e8eeef	UX Theme Eiendom	Emerald green 10%	#e8eeef	232 238 239	Emerald green 10%	--color-emerald-green-10
#f4fbf9	UX Theme Eiendom	Mint green 12%	#f4fbf9	244 251 249	Mint green 12%	--color-mint-green-12

#Gradients, shadows, and shades

#Gradients

The DNB brand consists mainly of solid fill colors. Gradients should be avoided despite there being an illustration in Brandbook on page 39 (pdf) showing a graph with a purple gradient.

#Shadows

Shadows are used to depict depth along the z-axis. Typical use cases are interface components that are laid 'above' the main interface such as calendar widgets. Currently, Android development for DNB uses Google Material Design Guidelines regarding shadow color, depth, blur, etc.

See the DNB Figma main guide for shadow specifications.

#Tints and Shades

Tints are lighter versions of the color that are made by mixing a color with white, whereas shades are darker versions of the color that are made by mixing a color with black. If a lighter version of a primary color is required (due to accessibility, contrast, or for illustration), then ....

#Resources

Use a calculator such as this or this to test your text color and size against the background for contrast values.