Colors
All Colors are provided by CSS Custom Properties.
You may have a look at the Quick Guide for Designers About Colors.
Colors Table
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 |