Design System Dev Resource
Menu

Colors

Click a Sass variable, CSS variable (custom property), hex color, or RGB color to copy it to your clipboard.

Core Blue
01 Dark
$color-core-blue-01-dark
var(--bh-core-1)
#03060d
rgb(3 6 13)
02 Main
$color-core-blue
var(--bh-core)
#00205b
rgb(0 32 91)
03 Light
$color-core-blue-03-light
var(--bh-core-3)
#093582
rgb(9 53 130)
04 Light
$color-core-blue-04-light
var(--bh-core-4)
#1c4ea5
rgb(28 78 165)
05 Light
$color-core-blue-05-light
var(--bh-core-5)
#3a6cc1
rgb(58 108 193)
06 Light
$color-core-blue-06-light
var(--bh-core-6)
#628dd6
rgb(98 141 214)
07 Light
$color-core-blue-07-light
var(--bh-core-7)
#8eafe6
rgb(142 175 230)
08 Light
$color-core-blue-08-light
var(--bh-core-8)
#b7ccf0
rgb(183 204 240)
09 Light
$color-core-blue-09-light
var(--bh-core-9)
#d6e2f7
rgb(214 226 247)
10 Light
$color-core-blue-10-light
var(--bh-core-10)
#ebf0fa
rgb(235 240 250)
11 Light
$color-core-blue-11-light
var(--bh-core-11)
#f6f7fa
rgb(246 247 250)
Accent Blue
01 Dark
$color-accent-blue-01-dark
var(--bh-accent-1)
#006894
rgb(0 104 148)
02 Main
$color-accent-blue
var(--bh-accent)
#007eb4
rgb(0 126 180)
03 Light
$color-accent-blue-03-light
var(--bh-accent-3)
#0b8ec6
rgb(11 142 198)
04 Light
$color-accent-blue-04-light
var(--bh-accent-4)
#20a0d6
rgb(32 160 214)
05 Light
$color-accent-blue-05-light
var(--bh-accent-5)
#41b2e3
rgb(65 178 227)
06 Light
$color-accent-blue-06-light
var(--bh-accent-6)
#6cc6ed
rgb(108 198 237)
07 Light
$color-accent-blue-07-light
var(--bh-accent-7)
#99d9f5
rgb(153 217 245)
08 Light
$color-accent-blue-08-light
var(--bh-accent-8)
#c1e9fa
rgb(193 233 250)
09 Light
$color-accent-blue-09-light
var(--bh-accent-9)
#ddf3fd
rgb(221 243 253)
10 Light
$color-accent-blue-10-light
var(--bh-accent-10)
#eefaff
rgb(238 250 255)
11 Light
$color-accent-blue-11-light
var(--bh-accent-11)
#f5fcff
rgb(245 252 255)
Banner Black
01 Dark
$color-banner-black-01-dark
var(--bh-black-1)
#0b0c0d
rgb(11 12 13)
02 Main
$color-banner-black
var(--bh-black)
#303235
rgb(48 50 53)
03 Light
$color-banner-black-03-light
var(--bh-black-3)
#56595d
rgb(86 89 93)
04 Light
$color-banner-black-04-light
var(--bh-black-4)
#7b7f84
rgb(123 127 132)
05 Light
$color-banner-black-05-light
var(--bh-black-5)
#9ca0a5
rgb(156 160 165)
06 Light
$color-banner-black-06-light
var(--bh-black-6)
#b8bbbf
rgb(184 187 191)
07 Light
$color-banner-black-07-light
var(--bh-black-7)
#cfd1d3
rgb(207 209 211)
08 Light
$color-banner-black-08-light
var(--bh-black-8)
#e1e1e2
rgb(225 225 226)
09 Light
$color-banner-black-09-light
var(--bh-black-9)
#ededee
rgb(237 237 238)
10 Light
$color-banner-black-10-light
var(--bh-black-10)
#f5f5f5
rgb(245 245 245)
11 Light
$color-banner-black-11-light
var(--bh-black-11)
#fafafa
rgb(250 250 250)
Supporting colors
Error
$color-error
var(--bh-error)
#da291c
rgb(218 41 28)
Success
$color-success
var(--bh-success)
#008522
rgb(0 133 34)
Info
$color-info-alert
var(--bh-alert)
#0077c8
rgb(0 119 200)
Rating
$color-rating
var(--bh-rating)
#bf8900
rgb(191 137 0)
White
$color-white
var(--bh-white)
#ffffff
rgb(255 255 255)
True Black
$color-true-black
var(--bh-true-black)
#000000
rgb(0 0 0)
Family profile colors
Profile 1
$color-profile-1
var(--bh-profile-1)
#bf2080
rgb(191 32 128)
Profile 2
$color-profile-2
var(--bh-profile-2)
#963a1d
rgb(150 58 29)
Profile 3
$color-profile-3
var(--bh-profile-3)
#607d0e
rgb(96 125 14)
Profile 4
$color-profile-4
var(--bh-profile-4)
#41058d
rgb(65 5 141)
Profile 5
$color-profile-5
var(--bh-profile-5)
#8447d2
rgb(132 71 210)
Profile 6
$color-profile-6
var(--bh-profile-6)
#8f0a52
rgb(143 10 82)
Profile 7
$color-profile-7
var(--bh-profile-7)
#145b53
rgb(20 91 83)
Profile 8
$color-profile-8
var(--bh-profile-8)
#98149b
rgb(152 20 155)