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
#0075C9
Secondary Accent
#38C6F4
Supporting Colors
#FFFFFF
#0C9ED9
#083176
#000000
Neutral
#242526
Used for primary text color on white and low-contrast backgrounds on black.
#313336
Used for low-contrast borders on black and medium-contrast backgrounds on black.
#3F4145
Used for medium-contrast borders on black and high-contrast backgrounds on black.
#53565A
Used for secondary text on white and high-contrast borders on black.
#65686C
Used for muted or disabled text and icons on white.
#8E9399
Used for muted or disabled text and icons on black.
#ACB0B5
Used for high-contrast borders on white.
#D0D4D9
Used for medium-contrast borders on white.
#DADEE2
Used for medium-contrast borders and high-contrast backgrounds on white.
#EDF0F2
Used for low-contrast borders and medium-contrast backgrounds on white.
#F4F5F6
Used for low-contrast backgrounds on white.
#F8F9F9
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.
#007E44
#009054
#95E9C9
#DBFAEE
#0262B9
#0080DC
#AEDEFF
#E0F3FF
#D62015
#EE3026
#FFC2BD
#FFE8E5
#A15C00
#B96B00
#FFCC89
#FAECD9
Brand
Primary Accent
#0047BB
Secondary Accent
#48D597
Supporting Colors
#FFFFFF
#02BCB2
#F9F162
#6FD16F
Neutral
#242526
Used for primary text color on white and low-contrast backgrounds on black.
#313336
Used for low-contrast borders on black and medium-contrast backgrounds on black.
#3F4145
Used for medium-contrast borders on black and high-contrast backgrounds on black.
#53565A
Used for secondary text on white and high-contrast borders on black.
#65686C
Used for muted or disabled text and icons on white.
#8E9399
Used for muted or disabled text and icons on black.
#ACB0B5
Used for high-contrast borders on white.
#D0D4D9
Used for medium-contrast borders on white.
#DADEE2
Used for medium-contrast borders and high-contrast backgrounds on white.
#EDF0F2
Used for low-contrast borders and medium-contrast backgrounds on white.
#F4F5F6
Used for low-contrast backgrounds on white.
#F8F9F9
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.
#008000
#189E18
#A7DBA7
#CEF2CE
#0060FA
#468AF1
#C0D7FA
#E6F0FF
#D81820
#FA5056
#FCC7C9
#FCE8E9
#946300
#D19110
#F6ED79
#F9F5BE
Brand
Primary Accent
#0075C9
Secondary Accent
#38C6F4
Supporting Colors
#FFFFFF
#0C9ED9
#083176
#000000
Neutral
#242526
Used for primary text color on white and low-contrast backgrounds on black.
#313336
Used for low-contrast borders on black and medium-contrast backgrounds on black.
#3F4145
Used for medium-contrast borders on black and high-contrast backgrounds on black.
#53565A
Used for secondary text on white and high-contrast borders on black.
#65686C
Used for muted or disabled text and icons on white.
#8E9399
Used for muted or disabled text and icons on black.
#ACB0B5
Used for high-contrast borders on white.
#D0D4D9
Used for medium-contrast borders on white.
#DADEE2
Used for medium-contrast borders and high-contrast backgrounds on white.
#EDF0F2
Used for low-contrast borders and medium-contrast backgrounds on white.
#F4F5F6
Used for low-contrast backgrounds on white.
#F8F9F9
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.
#007E44
#009054
#95E9C9
#DBFAEE
#0262B9
#0080DC
#AEDEFF
#E0F3FF
#D62015
#EE3026
#FFC2BD
#FFE8E5
#A15C00
#B96B00
#FFCC89
#FAECD9