Colors
Color table for web
Change the brand in order to see the related tables:
DNB Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
|---|---|---|---|---|---|---|
| Profile | Seagreen | #007272 | 0 114 114 | Profil/Seagreen | --color-sea-green | |
| Profile | Mintgreen | #a5e1d2 | 165 225 210 | Profil/Mintgreen | --color-mint-green | |
| Profile | Summergreen | #28b482 | 40 180 130 | Profil/Summergreen | --color-summer-green | |
| Profile | Emeraldgreen | #14555a | 20 85 90 | Profil/Emeraldgreen | --color-emerald-green | |
| Profile | Oceangreen | #00343e | 0 52 62 | Profil/Oceangreen | --color-ocean-green | |
| Profile | Accent yellow | #fdbb31 | 253 187 49 | Profil/Accentyellow | --color-accent-yellow | |
| Profile | Indigo | #23195a | 35 25 90 | Profil/Indigo | --color-indigo | |
| Profile | Violet | #6e2382 | 110 35 130 | Profil/Violet | --color-violet | |
| Profile | Skyblue | #4bbed2 | 75 190 210 | Profil/Skyblue | --color-sky-blue | |
| Profile | Lavender | #f2f2f5 | 242 242 245 | Profil/Lavender | --color-lavender | |
| Profile | Sand yellow | #fbf6ec | 251 246 236 | Profil/Sandyellow | --color-sand-yellow | |
| Profile | Pistachio | #f2f4ec | 242 244 236 | Profil/Pistachio | --color-pistachio | |
| UX | Seagreen 30% | #b3d5d5 | 179 213 213 | UX/Seagreen 30% | --color-sea-green-30 | |
| UX | Mintgreen 50% | #d2f0e9 | 210 240 233 | UX/Mintgreen 50% | --color-mint-green-50 | |
| UX | Mintgreen 25% | #e9f8f4 | 233 248 244 | UX/Mintgrønn 25% | --color-mint-green-25 | |
| UX | Mintgreen 12% | #f4fbf9 | 244 251 249 | UX/Mintgreen 12% | --color-mint-green-12 | |
| UX | Accent yellow 30% | #feebc1 | 254 235 193 | UX/Accentyellow 30% | --color-accent-yellow-30 | |
| UX | Fire red | #dc2a2a | 220 42 42 | UX/Firered | --color-fire-red | |
| UX | Fire red 8% | #fdeeee | 253 238 238 | UX/Firered 8% | --color-fire-red-8 | |
| UX | Success green | #007b5e | 0 123 94 | UX/Successgreen | --color-success-green | |
| UX | Signal orange | #ff5400 | 255 84 0 | UX/Signalorange | --color-signal-orange | |
| UX | Black | #000 | 0 0 0 | UX/Black | --color-black | |
| UX | Black 80% (aka Coal) | #333 | 51 51 51 | UX/Black 80% | --color-black-80 | |
| UX | Black 55% (aka Dark gray) | #737373 | 115 115 115 | UX/Black 55% | --color-black-55 | |
| UX | Black 20% (aka Soft gray) | #ccc | 204 204 204 | UX/Black 20% | --color-black-20 | |
| UX | Black 8% (aka Outline gray) | #ebebeb | 235 235 235 | UX/Black 8% | --color-black-8 | |
| UX | Black 3% (aka Subtle gray) | #f8f8f8 | 248 248 248 | UX/Black 3% | --color-black-3 | |
| UX | White | #fff | 255 255 255 | UX/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.