--- title: 'Colors (deprecated)' version: 11.3.0 generatedAt: 2026-05-19T08:46:53.032Z 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/uilib/usage/customisation/colors.mdx) All Colors are provided by CSS Custom Properties. You may have a look at the Quick Guide for Designers [About Colors](/quickguide-designer/colors). ## Colors Table ## 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` |