Color

Chi colors are designed to comply with U.S. Section 508 federal requirements. Section 508 follows the Web Content Accessibility Guidelines (WCAG 2.0) Level AA standards which require text and background color contrast ratios of 4.5:1 or higher. All Chi colors either meet (AA) or exceed (AAA) these standards and have been marked below accordingly.

Brand

Primary Accent

Blue 70
#0075C9
AA

Secondary Accent

Cyan 40
#38C6F4
AAA

Supporting Colors

White
#FFFFFF
AAA
Cyan 50
#0C9ED9
AA
Navy 100
#083176
AAA
Black
#000000
AAA

Neutral

Grey 100
#242526
AAA

Used for primary text color on white and low-contrast backgrounds on black.

Grey 90
#313336
AAA

Used for low-contrast borders on black and medium-contrast backgrounds on black.

Grey 80
#3F4145
AAA

Used for medium-contrast borders on black and high-contrast backgrounds on black.

Grey 70
#53565A
AA

Used for secondary text on white and high-contrast borders on black.

Grey 60
#65686C
AA

Used for muted or disabled text and icons on white.

Grey 50
#8E9399
AA

Used for muted or disabled text and icons on black.

Grey 40
#ACB0B5
AAA

Used for high-contrast borders on white.

Grey 30
#D0D4D9
AAA

Used for medium-contrast borders on white.

Grey 25
#DADEE2
AAA

Used for medium-contrast borders and high-contrast backgrounds on white.

Grey 20
#EDF0F2
AAA

Used for low-contrast borders and medium-contrast backgrounds on white.

Grey 15
#F4F5F6
AAA

Used for low-contrast backgrounds on white.

Grey 10
#F8F9F9
AAA

Used for low-contrast backgrounds on white.

Semantic

Use semantic colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention. Semantic colors should never be used for decorative purposes.

Green 70
#007E44
AA
Green 60
#009054
AA
Green 30
#95E9C9
AAA
Green 20
#DBFAEE
AAA
Blue 75
#0262B9
AA
Blue 60
#0080DC
AA
Blue 30
#AEDEFF
AAA
Blue 20
#E0F3FF
AAA
Red 70
#D62015
AA
Red 60
#EE3026
AA
Red 30
#FFC2BD
AAA
Red 20
#FFE8E5
AAA
Yellow 70
#A15C00
AA
Yellow 60
#B96B00
AA
Yellow 30
#FFCC89
AAA
Yellow 20
#FAECD9
AAA

Brand

Primary Accent

Blue 70
#0075C9
AA

Secondary Accent

Cyan 40
#38C6F4
AAA

Supporting Colors

White
#FFFFFF
AAA
Cyan 50
#0C9ED9
AA
Navy 100
#083176
AAA
Black
#000000
AAA

Neutral

Grey 100
#242526
AAA

Used for primary text color on white and low-contrast backgrounds on black.

Grey 90
#313336
AAA

Used for low-contrast borders on black and medium-contrast backgrounds on black.

Grey 80
#3F4145
AAA

Used for medium-contrast borders on black and high-contrast backgrounds on black.

Grey 70
#53565A
AA

Used for secondary text on white and high-contrast borders on black.

Grey 60
#65686C
AA

Used for muted or disabled text and icons on white.

Grey 50
#8E9399
AA

Used for muted or disabled text and icons on black.

Grey 40
#ACB0B5
AAA

Used for high-contrast borders on white.

Grey 30
#D0D4D9
AAA

Used for medium-contrast borders on white.

Grey 25
#DADEE2
AAA

Used for medium-contrast borders and high-contrast backgrounds on white.

Grey 20
#EDF0F2
AAA

Used for low-contrast borders and medium-contrast backgrounds on white.

Grey 15
#F4F5F6
AAA

Used for low-contrast backgrounds on white.

Grey 10
#F8F9F9
AAA

Used for low-contrast backgrounds on white.

Semantic

Use semantic colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention. Semantic colors should never be used for decorative purposes.

Green 70
#007E44
AA
Green 60
#009054
AA
Green 30
#95E9C9
AAA
Green 20
#DBFAEE
AAA
Blue 75
#0262B9
AA
Blue 60
#0080DC
AA
Blue 30
#AEDEFF
AAA
Blue 20
#E0F3FF
AAA
Red 70
#D62015
AA
Red 60
#EE3026
AA
Red 30
#FFC2BD
AAA
Red 20
#FFE8E5
AAA
Yellow 70
#A15C00
AA
Yellow 60
#B96B00
AA
Yellow 30
#FFCC89
AAA
Yellow 20
#FAECD9
AAA

Brand

Primary Accent

Yellow 40
#FFC800
AAA

Secondary Accent

Orange 40
#FA783C
AAA

Supporting Colors

Red 50
#FA4628
AA
White
#FFFFFF
AAA
Black
#000000
AAA

Neutral

Grey 100
#000000
AAA

Used for primary text color on white and low-contrast backgrounds on black.

Grey 90
#191919
AAA

Used for low-contrast borders on black and medium-contrast backgrounds on black.

Grey 80
#333333
AAA

Used for medium-contrast borders on black and high-contrast backgrounds on black.

Grey 70
#4C4C4C
AA

Used for secondary text on white and high-contrast borders on black.

Grey 60
#666666
AA

Used for muted or disabled text and icons on white.

Grey 50
#7F7F7F
AA

Used for muted or disabled text and icons on black.

Grey 40
#999999
AAA

Used for high-contrast borders on white.

Grey 30
#B2B2B2
AAA

Used for medium-contrast borders on white.

Grey 25
#DDDEDF
AAA

Used for medium-contrast borders and high-contrast backgrounds on white.

Grey 20
#E6E7E8
AAA

Used for low-contrast borders and medium-contrast backgrounds on white.

Grey 15
#F0F1F1
AAA

Used for low-contrast backgrounds on white.

Grey 10
#F2F2F2
AAA

Used for low-contrast backgrounds on white.

Semantic

Use semantic colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention. Semantic colors should never be used for decorative purposes.

Green 70
#007E44
AA
Green 60
#009054
AA
Green 30
#95E9C9
AAA
Green 20
#DBFAEE
AAA
Blue 75
#0262B9
AA
Blue 60
#0080DC
AA
Blue 30
#AEDEFF
AAA
Blue 20
#E0F3FF
AAA
Red 70
#A01903
AA
Red 60
#D52C10
AA
Red 30
#FCA293
AAA
Red 20
#FBDFDB
AAA
Yellow 70
#A15C00
AA
Yellow 60
#AD7600
AA
Yellow 30
#FFE37F
AAA
Yellow 20
#FFF1BF
AAA