Skip to content

Colors

DNB color table for web

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

SampleTypeNameHexRGBFigma Library nameCSS Custom Properties name
ProfileOcean green#00343E0 52 62Ocean green--color-ocean-green
ProfileEmerald green#14555A20 85 90Emerald green--color-emerald-green
ProfileSea green#0072720 114 114Sea green--color-sea-green
ProfileMint green#A5E1D2165 225 210Mint green--color-mint-green
ProfileSummer green#28B48240 180 130Summer green--color-summer-green
ProfileSignal orange#FF5400255 84 0Signal orange--color-signal-orange
ProfileSignal yellow#FFFF7A255 255 122Signal yellow--color-signal-yellow
ProfileIndigo#23195A35 25 90Indigo--color-indigo
ProfileViolet#6E2382110 35 130Violet--color-violet
ProfileSky blue#4BBED275 190 210Sky blue--color-sky-blue
UXSea green alt#0084840 132 132Sea green alt--color-sea-green-alt
UXSea green alt 30%#B3DADA179 218 218Sea green alt 30%--color-sea-green-alt-30
UXMint green 50%#D2F0E9210 240 233Mint green 50%--color-mint-green-50
UXMint green 25%#E9F8F4233 248 244Mint green 25%--color-mint-green-25
UXMint green 12%#F4FBF9244 251 249Mint green 12%--color-mint-green-12
UXSignal yellow 30%#FFFFD7255 255 215Signal yellow 30%--color-signal-yellow-30
UXFire red#DC2A2A220 42 42Fire red--color-fire-red
UXFire red 8%#FDEEEE253 238 238Fire red 8%--color-fire-red-8
UXBlack#0000000 0 0Black--color-black
UXBlack 80%#33333351 51 51Black 80%--color-black-80
UXBlack 30%#B3B3B3179 179 179Black 30%--color-black-30
UXWhite#ffffff255 255 255White--color-white

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 which are laid 'above' the main interface such as calendar widgets. Currently Android development for DNB use Google Material Design Guidelines regarding shadow color, depth, blur etc.

See the DNB Figma master 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 accessability, contrast or for illustration), then ....

Resources

Use a calculator such as this: https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 or this https://webaim.org/resources/contrastchecker/

to test your text color and size against background for contrast values.