@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
155 lines (127 loc) • 14.9 kB
Markdown
---
title: 'Colors (deprecated)'
version: 11.3.0
generatedAt: 2026-05-19T08:46:50.040Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
# Colors (deprecated)
---
**Deprecated:** The `--color-*` CSS custom properties and this color documentation are deprecated. Use [Design Tokens – Colors](/uilib/usage/customisation/theming/design-tokens/colors) instead.
---
## Relevant links
- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=883-7)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/style)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/quickguide-designer/colors)
## Color table for web
## DNB Eiendom Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | ------- | ----------------- | --------- | ------------- | ------------------ | -------------------------- |
| #89aaac | Eiendom | Emerald green 50% | `#89aaac` | `137 170 172` | Emerald green 50% | `--color-emerald-green-50` |
| #c4d4d6 | Eiendom | Emerald green 25% | `#c4d4d6` | `196 212 214` | Emerald green 25% | `--color-emerald-green-25` |
| #e8eeef | Eiendom | Emerald green 10% | `#e8eeef` | `232 238 239` | Emerald green 10% | `--color-emerald-green-10` |
| #f4fbf9 | Eiendom | Mint green 12% | `#f4fbf9` | `244 251 249` | Mint green 12% | `--color-mint-green-12` |
## Sbanken Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | --------- | ------------------- | --------- | ------------- | -------------------------- | -------------------------------- |
| #1c1b4e | Primary | Purple | `#1c1b4e` | `28 27 78` | Primary/Purple | `--sb-color-purple` |
| #222163 | Primary | Purple alternative | `#222163` | `34 33 99` | Primary/Purple alternative | `--sb-color-purple-alternative` |
| #92eecd | Primary | Green | `#92eecd` | `146 238 205` | Primary/Green | `--sb-color-green` |
| #fff | Primary | White | `#fff` | `255 255 255` | Primary/White | `--sb-color-white` |
| #d8134b | Secondary | Red | `#d8134b` | `216 19 75` | Secondary/Red | `--sb-color-red` |
| #ff3c64 | Secondary | Magenta | `#ff3c64` | `255 60 100` | Secondary/Magenta | `--sb-color-magenta` |
| #ff5b44 | Secondary | Orange | `#ff5b44` | `255 91 68` | Secondary/Orange | `--sb-color-orange` |
| #f7bf16 | Secondary | Yellow dark | `#f7bf16` | `247 191 22` | Secondary/Yellow dark | `--sb-color-yellow-dark` |
| #ffef57 | Secondary | Yellow | `#ffef57` | `255 239 87` | Secondary/Yellow | `--sb-color-yellow` |
| #00785b | Secondary | Green dark 3 | `#00785b` | `0 120 91` | Secondary/Green dark 3 | `--sb-color-green-dark-3` |
| #1e9f73 | Secondary | Green dark 2 | `#1e9f73` | `30 159 115` | Secondary/Green dark 2 | `--sb-color-green-dark-2` |
| #4e08bc | Secondary | Violet | `#4e08bc` | `78 8 188` | Secondary/Violet | `--sb-color-violet` |
| #7129e2 | Secondary | Violet light | `#7129e2` | `113 41 226` | Secondary/Violet light | `--sb-color-violet-light` |
| #044ccc | Secondary | Blue dark 2 | `#044ccc` | `4 76 204` | Secondary/Blue dark 2 | `--sb-color-blue-dark-2` |
| #005cff | Secondary | Blue dark | `#005cff` | `0 92 255` | Secondary/Blue dark | `--sb-color-blue-dark` |
| #008eff | Secondary | Blue | `#008eff` | `0 142 255` | Secondary/Blue | `--sb-color-blue` |
| #ff817b | Tertiary | Orange light | `#ff817b` | `255 129 123` | Tertiary/Orange light | `--sb-color-orange-light` |
| #ffd7d5 | Tertiary | Orange light 2 | `#ffd7d5` | `255 215 213` | Tertiary/Orange light 2 | `--sb-color-orange-light-2` |
| #fff0ef | Tertiary | Orange light 3 | `#fff0ef` | `255 240 239` | Tertiary/Orange 3 | `--sb-color-orange-light-3` |
| #ffb6d2 | Tertiary | Magenta light | `#ffb6d2` | `255 182 210` | Tertiary/Magenta light | `--sb-color-magenta-light` |
| #ffdbe9 | Tertiary | Magenta light 2 | `#ffdbe9` | `255 219 233` | Tertiary/Magenta light 2 | `--sb-color-magenta-light-2` |
| #fff5f9 | Tertiary | Magenta light 3 | `#fff5f9` | `255 245 249` | Tertiary/Magenta light 3 | `--sb-color-magenta-light-3` |
| #fff489 | Tertiary | Yellow light | `#fff489` | `255 244 137` | Tertiary/Yellow light | `--sb-color-yellow-light` |
| #fff9c4 | Tertiary | Yellow light 2 | `#fff9c4` | `255 249 196` | Tertiary/Yellow light 2 | `--sb-color-yellow-light-2` |
| #fffce5 | Tertiary | Yellow light 3 | `#fffce5` | `255 252 229` | Tertiary/Yellow light 3 | `--sb-color-yellow-light-3` |
| #64d7b4 | Tertiary | Green dark | `#64d7b4` | `100 215 180` | Tertiary/Green dark | `--sb-color-green-dark` |
| #c8f6e5 | Tertiary | Green light | `#c8f6e5` | `200 246 229` | Tertiary/Green light | `--sb-color-green-light` |
| #e5fff7 | Tertiary | Green light 2 | `#e5fff7` | `229 255 247` | Tertiary/Green light 2 | `--sb-color-green-light-2` |
| #be99ff | Tertiary | Violet light 2 | `#be99ff` | `190 153 255` | Tertiary/Violet light 2 | `--sb-color-violet-light-2` |
| #e0d0ff | Tertiary | Violet light 3 | `#e0d0ff` | `224 208 255` | Tertiary/Violet light 3 | `--sb-color-violet-light-3` |
| #f1ebff | Tertiary | Violet light 4 | `#f1ebff` | `241 235 255` | Tertiary/Violet light 4 | `--sb-color-violet-light-4` |
| #61b9ff | Tertiary | Blue light | `#61b9ff` | `97 185 255` | Tertiary/Blue | `--sb-color-blue-light` |
| #bfe3ff | Tertiary | Blue light 2 | `#bfe3ff` | `191 227 255` | Tertiary/Blue light 2 | `--sb-color-blue-light-2` |
| #ebf6ff | Tertiary | Blue light 3 | `#ebf6ff` | `235 246 255` | Tertiary/Blue light 3 | `--sb-color-blue-light-3` |
| #000 | UX | Black | `#000` | `0 0 0` | UX/Black | `--sb-color-black` |
| #18172a | UX | Text | `#18172a` | `24 23 42` | UX/Text | `--sb-color-text` |
| #3a3a4a | UX | Gray dark 3 | `#3a3a4a` | `58 58 74` | UX/Gray dark 3 | `--sb-color-gray-dark-3` |
| #4a4a5b | UX | Gray dark 2 | `#4a4a5b` | `74 74 91` | UX/Gray dark 2 | `--sb-color-gray-dark-2` |
| #666578 | UX | Gray dark | `#666578` | `102 101 120` | UX/Gray dark | `--sb-color-gray-dark` |
| #bbbbce | UX | Gray | `#bbbbce` | `187 187 206` | UX/Gray | `--sb-color-gray` |
| #d9d9e4 | UX | Gray light | `#d9d9e4` | `217 217 228` | UX/Gray light | `--sb-color-gray-light` |
| #ebebf2 | UX | Gray light 2 | `#ebebf2` | `235 235 242` | UX/Gray light 2 | `--sb-color-gray-light-2` |
| #f9f9fd | UX | Gray light 3 | `#f9f9fd` | `249 249 253` | UX/Gray light 3 | `--sb-color-gray-light-3` |
| #3e3e4a | UX | Gray dark 3 neutral | `#3e3e4a` | `62 62 74` | UX/Gray dark 3 neutral | `--sb-color-gray-dark-3-neutral` |
| #656472 | UX | Gray dark 2 neutral | `#656472` | `101 100 114` | UX/Gray dark 2 neutral | `--sb-color-gray-dark-2-neutral` |
| #9494a3 | UX | Gray dark neutral | `#9494a3` | `148 148 163` | UX/Dark gray neutral | `--sb-color-gray-dark-neutral` |
| #bdbdc6 | UX | Gray neutral | `#bdbdc6` | `189 189 198` | UX/Gray neutral | `--sb-color-gray-neutral` |
## DNB Carnegie Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | --------- | ------------- | --------- | ------------- | ----------------------- | -------------------------- |
| #00343e | Primary | Ocean Green | `#00343e` | `0 52 62` | Primary/Ocean Green | `--ca-color-ocean-green` |
| #5c0022 | Primary | Burgundy Red | `#5c0022` | `92 0 34` | Primary/Burgundy Red | `--ca-color-burgundy-red` |
| #001114 | Secondary | Noir Green | `#001114` | `0 17 20` | Secondary/Noir Green | `--ca-color-noir-green` |
| #007272 | Secondary | Sea Green | `#007272` | `0 114 114` | Secondary/Sea Green | `--ca-color-sea-green` |
| #24000d | Secondary | Noir Red | `#24000d` | `36 0 13` | Secondary/Noir Red | `--ca-color-noir-red` |
| #8e4049 | Secondary | Sober Red | `#8e4049` | `142 64 73` | Secondary/Sober Red | `--ca-color-sober-red` |
| #f6eae4 | Secondary | Classic Beige | `#f6eae4` | `246 234 228` | Secondary/Classic Beige | `--ca-color-classic-beige` |
| #ccf0e7 | Tertiary | Pale Green | `#ccf0e7` | `204 240 231` | Tertiary/Pale Green | `--ca-color-pale-green` |
| #ffdedb | Tertiary | Pale Red | `#ffdedb` | `255 222 219` | Tertiary/Pale Red | `--ca-color-pale-red` |
## DNB Colors
| Sample | Type | Brand name | Hex | RGB | Figma Library name | CSS Custom Properties name |
| ------- | ------- | --------------------------- | --------- | ------------- | ------------------- | -------------------------- |
| #007272 | Profile | Seagreen | `#007272` | `0 114 114` | Profil/Seagreen | `--color-sea-green` |
| #a5e1d2 | Profile | Mintgreen | `#a5e1d2` | `165 225 210` | Profil/Mintgreen | `--color-mint-green` |
| #28b482 | Profile | Summergreen | `#28b482` | `40 180 130` | Profil/Summergreen | `--color-summer-green` |
| #14555a | Profile | Emeraldgreen | `#14555a` | `20 85 90` | Profil/Emeraldgreen | `--color-emerald-green` |
| #00343e | Profile | Oceangreen | `#00343e` | `0 52 62` | Profil/Oceangreen | `--color-ocean-green` |
| #fdbb31 | Profile | Accent yellow | `#fdbb31` | `253 187 49` | Profil/Accentyellow | `--color-accent-yellow` |
| #23195a | Profile | Indigo | `#23195a` | `35 25 90` | Profil/Indigo | `--color-indigo` |
| #6e2382 | Profile | Violet | `#6e2382` | `110 35 130` | Profil/Violet | `--color-violet` |
| #4bbed2 | Profile | Skyblue | `#4bbed2` | `75 190 210` | Profil/Skyblue | `--color-sky-blue` |
| #f2f2f5 | Profile | Lavender | `#f2f2f5` | `242 242 245` | Profil/Lavender | `--color-lavender` |
| #fbf6ec | Profile | Sand yellow | `#fbf6ec` | `251 246 236` | Profil/Sandyellow | `--color-sand-yellow` |
| #f2f4ec | Profile | Pistachio | `#f2f4ec` | `242 244 236` | Profil/Pistachio | `--color-pistachio` |
| #b3d5d5 | UX | Seagreen 30% | `#b3d5d5` | `179 213 213` | UX/Seagreen 30% | `--color-sea-green-30` |
| #d2f0e9 | UX | Mintgreen 50% | `#d2f0e9` | `210 240 233` | UX/Mintgreen 50% | `--color-mint-green-50` |
| #e9f8f4 | UX | Mintgreen 25% | `#e9f8f4` | `233 248 244` | UX/Mintgreen 25% | `--color-mint-green-25` |
| #f4fbf9 | UX | Mintgreen 12% | `#f4fbf9` | `244 251 249` | UX/Mintgreen 12% | `--color-mint-green-12` |
| #feebc1 | UX | Accent yellow 30% | `#feebc1` | `254 235 193` | UX/Accentyellow 30% | `--color-accent-yellow-30` |
| #dc2a2a | UX | Fire red | `#dc2a2a` | `220 42 42` | UX/Firered | `--color-fire-red` |
| #fdeeee | UX | Fire red 8% | `#fdeeee` | `253 238 238` | UX/Firered 8% | `--color-fire-red-8` |
| #007b5e | UX | Success green | `#007b5e` | `0 123 94` | UX/Successgreen | `--color-success-green` |
| #ff5400 | UX | Signal orange | `#ff5400` | `255 84 0` | UX/Signalorange | `--color-signal-orange` |
| #000 | UX | Black | `#000` | `0 0 0` | UX/Black | `--color-black` |
| #333 | UX | Black 80% (aka Coal) | `#333` | `51 51 51` | UX/Black 80% | `--color-black-80` |
| #737373 | UX | Black 55% (aka Dark gray) | `#737373` | `115 115 115` | UX/Black 55% | `--color-black-55` |
| #ccc | UX | Black 20% (aka Soft gray) | `#ccc` | `204 204 204` | UX/Black 20% | `--color-black-20` |
| #ebebeb | UX | Black 8% (aka Outline gray) | `#ebebeb` | `235 235 235` | UX/Black 8% | `--color-black-8` |
| #f8f8f8 | UX | Black 3% (aka Subtle gray) | `#f8f8f8` | `248 248 248` | UX/Black 3% | `--color-black-3` |
| #fff | 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. 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 a color that are made by mixing a color with white, whereas shades are darker versions of a 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), consult with the design team.
### Tertiary colors
Tertiary colors are mainly lighter variations of the secondary colors.
### 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 the background for contrast values.