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
ProfileAccent yellow#FDBB31253 187 49Accent yellow--color-accent-yellow
ProfileIndigo#23195A35 25 90Indigo--color-indigo
ProfileViolet#6E2382110 35 130Violet--color-violet
ProfileSky blue#4BBED275 190 210Sky blue--color-sky-blue
ProfileLavender#F2F2F5242 242 245Lavender--color-lavender
ProfileSand yellow#FBF6EC251 246 236Sand yellow--color-sand-yellow
ProfilePistachio#F2F4EC242 244 236Pistachio--color-pistachio
UXSea green 30%#B3D5D5179 213 213Sea green 30%--color-sea-green-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
UXAccent yellow 30%#FEEBC1254 235 193Accent yellow 30%--color-accent-yellow-30
UXSignal orange#FF5400255 84 0Signal orange--color-signal-orange
UXFire red#DC2A2A220 42 42Fire red--color-fire-red
UXFire red 8%#FDEEEE253 238 238Fire red 8%--color-fire-red-8
UXSuccess green#0080000 128 0Success green--color-success-green
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 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 background for contrast values.