Colors | Banner Health Design System Developer Resource

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(--core-1)

#03060d

rgb(3 6 13)

02 Main

$color-core-blue

var(--core)

#00205b

rgb(0 32 91)

03 Light

$color-core-blue-03-light

var(--core-3)

#093582

rgb(9 53 130)

04 Light

$color-core-blue-04-light

var(--core-4)

#1c4ea5

rgb(28 78 165)

05 Light

$color-core-blue-05-light

var(--core-5)

#3a6cc1

rgb(58 108 193)

06 Light

$color-core-blue-06-light

var(--core-6)

#628dd6

rgb(98 141 214)

07 Light

$color-core-blue-07-light

var(--core-7)

#8eafe6

rgb(142 175 230)

08 Light

$color-core-blue-08-light

var(--core-8)

#b7ccf0

rgb(183 204 240)

09 Light

$color-core-blue-09-light

var(--core-9)

#d6e2f7

rgb(214 226 247)

10 Light

$color-core-blue-10-light

var(--core-10)

#ebf0fa

rgb(235 240 250)

11 Light

$color-core-blue-11-light

var(--core-11)

#f6f7fa

rgb(246 247 250)

Accent Blue

01 Dark

$color-accent-blue-01-dark

var(--accent-1)

#006894

rgb(0 104 148)

02 Main

$color-accent-blue

var(--accent)

#007eb4

rgb(0 126 180)

03 Light

$color-accent-blue-03-light

var(--accent-3)

#0b8ec6

rgb(11 142 198)

04 Light

$color-accent-blue-04-light

var(--accent-4)

#20a0d6

rgb(32 160 214)

05 Light

$color-accent-blue-05-light

var(--accent-5)

#41b2e3

rgb(65 178 227)

06 Light

$color-accent-blue-06-light

var(--accent-6)

#6cc6ed

rgb(108 198 237)

07 Light

$color-accent-blue-07-light

var(--accent-7)

#99d9f5

rgb(153 217 245)

08 Light

$color-accent-blue-08-light

var(--accent-8)

#c1e9fa

rgb(193 233 250)

09 Light

$color-accent-blue-09-light

var(--accent-9)

#ddf3fd

rgb(221 243 253)

10 Light

$color-accent-blue-10-light

var(--accent-10)

#eefaff

rgb(238 250 255)

11 Light

$color-accent-blue-11-light

var(--accent-11)

#f5fcff

rgb(245 252 255)

Banner Black

01 Dark

$color-banner-black-01-dark

var(--black-1)

#0b0c0d

rgb(11 12 13)

02 Main

$color-banner-black

var(--black)

#303235

rgb(48 50 53)

03 Light

$color-banner-black-03-light

var(--black-3)

#56595d

rgb(86 89 93)

04 Light

$color-banner-black-04-light

var(--black-4)

#7b7f84

rgb(123 127 132)

05 Light

$color-banner-black-05-light

var(--black-5)

#9ca0a5

rgb(156 160 165)

06 Light

$color-banner-black-06-light

var(--black-6)

#b8bbbf

rgb(184 187 191)

07 Light

$color-banner-black-07-light

var(--black-7)

#cfd1d3

rgb(207 209 211)

08 Light

$color-banner-black-08-light

var(--black-8)

#e1e1e2

rgb(225 225 226)

09 Light

$color-banner-black-09-light

var(--black-9)

#ededee

rgb(237 237 238)

10 Light

$color-banner-black-10-light

var(--black-10)

#f5f5f5

rgb(245 245 245)

11 Light

$color-banner-black-11-light

var(--black-11)

#fafafa

rgb(250 250 250)

Supporting colors

Error

$color-error

var(--error)

#da291c

rgb(218 41 28)

Success

$color-success

var(--success)

#008522

rgb(0 133 34)

Info

$color-info-alert

var(--alert)

#0077c8

rgb(0 119 200)

Rating

$color-rating

var(--rating)

#bf8900

rgb(191 137 0)

White

$color-white

var(--white)

#ffffff

rgb(255 255 255)

True Black

$color-true-black

var(--true-black)

#000000

rgb(0 0 0)

Family profile colors

Profile 1

$color-profile-1

var(--profile-1)

#bf2080

rgb(191 32 128)

Profile 2

$color-profile-2

var(--profile-2)

#963a1d

rgb(150 58 29)

Profile 3

$color-profile-3

var(--profile-3)

#607d0e

rgb(96 125 14)

Profile 4

$color-profile-4

var(--profile-4)

#41058d

rgb(65 5 141)

Profile 5

$color-profile-5

var(--profile-5)

#8447d2

rgb(132 71 210)

Profile 6

$color-profile-6

var(--profile-6)

#8f0a52

rgb(143 10 82)

Profile 7

$color-profile-7

var(--profile-7)

#145b53

rgb(20 91 83)

Profile 8

$color-profile-8

var(--profile-8)

#98149b

rgb(152 20 155)

© Banner Health