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 Eiendom Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
|---|---|---|---|---|---|---|
| Eiendom | Emerald green 50% | #00343E | 137 170 172 | Emerald green 50% | --color-emerald-green-50 | |
| Eiendom | Emerald green 25% | #c4d4d6 | 196 212 214 | Emerald green 25% | --color-emerald-green-25 | |
| Eiendom | Emerald green 10% | #e8eeef | 232 238 239 | Emerald green 10% | --color-emerald-green-10 | |
| Eiendom | Mint green 12% | #f4fbf9 | 244 251 249 | Mint green 12% | --color-mint-green-12 |
DNB Colors
| Sample | Type | Brand 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 |
Sbanken Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
|---|---|---|---|---|---|---|
| Profile | Purple | #1C1B4E | 18 17 78 | Primary/Purple | --sb-color-purple | |
| Profile | Purple alternative | #222163 | 34 33 99 | Primary/Purple alternative | --sb-color-purple-alternative | |
| Profile | Green | #92EECD | 146 238 205 | Primary/Green | --sb-color-green | |
| Profile | Red | #D8134B | 216 19 75 | Secondary/Red | --sb-color-red | |
| Profile | Magenta | #FF3C64 | 255 60 100 | Secondary/Magenta | --sb-color-magenta | |
| Profile | Orange | #FE5030 | 254 80 56 | Secondary/Orange | --sb-color-orange | |
| Profile | Yellow dark | #F7BF16 | 247 191 22 | Secondary/Yellow dark | --sb-color-yellow-dark | |
| Profile | Yellow | #FFEF57 | 255 239 87 | Secondary/Yellow | --sb-color-yellow | |
| Profile | Green dark 3 | #00785B | 0 120 91 | Secondary/Green dark 3 | --sb-color-green-dark-3 | |
| Profile | Green dark 2 | #009669 | 0 150 105 | Secondary/Green dark 2 | --sb-color-green-dark-2 | |
| Profile | Violet | #4E08BC | 78 8 188 | Secondary/Violet | --sb-color-violet | |
| Profile | Violet light | #7129E2 | 113 41 226 | Secondary/Violet light | --sb-color-violet-light | |
| Profile | Blue dark 2 | #044CCC | 4 76 204 | Secondary/Blue dark 2 | --sb-color-blue-dark-2 | |
| Profile | Blue dark | #005CFF | 0 92 255 | Secondary/Blue dark | --sb-color-blue-dark | |
| Profile | Blue | #008EFF | 0 142 255 | Secondary/Blue | --sb-color-blue | |
| UX | Black | #000000 | 0 0 0 | UX/Black | --sb-color-black | |
| UX | Text | #18172A | 24 23 42 | UX/Text | --sb-color-text | |
| UX | Gray dark 3 | #3A3970 | 58 57 112 | UX/Gray dark 3 | --sb-color-gray-dark-3 | |
| UX | Gray dark 2 | #62628E | 98 98 142 | UX/Gray dark 2 | --sb-color-gray-dark-2 | |
| UX | Gray dark | #9292B0 | 146 146 176 | UX/Gray dark | --sb-color-gray-dark | |
| UX | Gray | #BBBBCE | 187 187 206 | UX/Gray | --sb-color-gray | |
| UX | Gray light | #D9D9E4 | 217 217 228 | UX/Gray light | --sb-color-gray-light | |
| UX | Gray light | #EBEBF2 | 235 235 242 | UX/Gray light 2 | --sb-color-gray-light-2 | |
| UX | Gray light 3 | #F9F9FD | 249 249 253 | UX/Gray light 3 | --sb-color-gray-light-3 | |
| UX | Gray dark 3 neutral | #3E3E4A | 62 62 74 | UX/Gray dark 3 neutral | --sb-color-gray-dark-3-neutral | |
| UX | Gray dark 2 neutral | #656472 | 101 100 114 | UX/Gray dark 2 neutral | --sb-color-gray-dark-2-neutral | |
| UX | Gray dark neutral | #9494A3 | 148 148 163 | UX/Dark gray neutral | --sb-color-gray-dark-neutral | |
| UX | Gray neutral | #BDBDC6 | 189 189 198 | UX/Gray neutral | --sb-color-gray-neutral |
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 ....
Sbanken color table for web
Change the brand in order to see the related tables:
DNB Eiendom Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
|---|---|---|---|---|---|---|
| Eiendom | Emerald green 50% | #00343E | 137 170 172 | Emerald green 50% | --color-emerald-green-50 | |
| Eiendom | Emerald green 25% | #c4d4d6 | 196 212 214 | Emerald green 25% | --color-emerald-green-25 | |
| Eiendom | Emerald green 10% | #e8eeef | 232 238 239 | Emerald green 10% | --color-emerald-green-10 | |
| Eiendom | Mint green 12% | #f4fbf9 | 244 251 249 | Mint green 12% | --color-mint-green-12 |
DNB Colors
| Sample | Type | Brand 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 |
Sbanken Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
|---|---|---|---|---|---|---|
| Profile | Purple | #1C1B4E | 18 17 78 | Primary/Purple | --sb-color-purple | |
| Profile | Purple alternative | #222163 | 34 33 99 | Primary/Purple alternative | --sb-color-purple-alternative | |
| Profile | Green | #92EECD | 146 238 205 | Primary/Green | --sb-color-green | |
| Profile | Red | #D8134B | 216 19 75 | Secondary/Red | --sb-color-red | |
| Profile | Magenta | #FF3C64 | 255 60 100 | Secondary/Magenta | --sb-color-magenta | |
| Profile | Orange | #FE5030 | 254 80 56 | Secondary/Orange | --sb-color-orange | |
| Profile | Yellow dark | #F7BF16 | 247 191 22 | Secondary/Yellow dark | --sb-color-yellow-dark | |
| Profile | Yellow | #FFEF57 | 255 239 87 | Secondary/Yellow | --sb-color-yellow | |
| Profile | Green dark 3 | #00785B | 0 120 91 | Secondary/Green dark 3 | --sb-color-green-dark-3 | |
| Profile | Green dark 2 | #009669 | 0 150 105 | Secondary/Green dark 2 | --sb-color-green-dark-2 | |
| Profile | Violet | #4E08BC | 78 8 188 | Secondary/Violet | --sb-color-violet | |
| Profile | Violet light | #7129E2 | 113 41 226 | Secondary/Violet light | --sb-color-violet-light | |
| Profile | Blue dark 2 | #044CCC | 4 76 204 | Secondary/Blue dark 2 | --sb-color-blue-dark-2 | |
| Profile | Blue dark | #005CFF | 0 92 255 | Secondary/Blue dark | --sb-color-blue-dark | |
| Profile | Blue | #008EFF | 0 142 255 | Secondary/Blue | --sb-color-blue | |
| UX | Black | #000000 | 0 0 0 | UX/Black | --sb-color-black | |
| UX | Text | #18172A | 24 23 42 | UX/Text | --sb-color-text | |
| UX | Gray dark 3 | #3A3970 | 58 57 112 | UX/Gray dark 3 | --sb-color-gray-dark-3 | |
| UX | Gray dark 2 | #62628E | 98 98 142 | UX/Gray dark 2 | --sb-color-gray-dark-2 | |
| UX | Gray dark | #9292B0 | 146 146 176 | UX/Gray dark | --sb-color-gray-dark | |
| UX | Gray | #BBBBCE | 187 187 206 | UX/Gray | --sb-color-gray | |
| UX | Gray light | #D9D9E4 | 217 217 228 | UX/Gray light | --sb-color-gray-light | |
| UX | Gray light | #EBEBF2 | 235 235 242 | UX/Gray light 2 | --sb-color-gray-light-2 | |
| UX | Gray light 3 | #F9F9FD | 249 249 253 | UX/Gray light 3 | --sb-color-gray-light-3 | |
| UX | Gray dark 3 neutral | #3E3E4A | 62 62 74 | UX/Gray dark 3 neutral | --sb-color-gray-dark-3-neutral | |
| UX | Gray dark 2 neutral | #656472 | 101 100 114 | UX/Gray dark 2 neutral | --sb-color-gray-dark-2-neutral | |
| UX | Gray dark neutral | #9494A3 | 148 148 163 | UX/Dark gray neutral | --sb-color-gray-dark-neutral | |
| UX | Gray neutral | #BDBDC6 | 189 189 198 | UX/Gray neutral | --sb-color-gray-neutral |
Tertiary colors
Tertiary colors are available in Eufemia Web Figma file for Sbanken. These are mainly lighter variations of the secondary colors.
Resources
Use a calculator such as this or this to test your text color and size against the background for contrast values.