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