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 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 |