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

Red 50

#F95E4A

Secondary Accent

Teal 40

#2AEDE5

Supporting Colors

White

#FFFFFF

Teal 25

#0C9ED9

Yellow 20

#FFF8B3

Teal 100

#0F3133

Neutral

Grey 100

#262425

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

Grey 90

#343333

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

Grey 80

#434142

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

Grey 70

#585657

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

Grey 60

#6A6869

Used for muted or disabled text and icons on white.

Grey 50

#949293

Used for muted or disabled text and icons on black.

Grey 40

#B1B0B0

Used for high-contrast borders on white.

Grey 30

#D6D3D4

Used for medium-contrast borders on white.

Grey 25

#DFDDDE

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

Grey 20

#F2F0F1

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

Grey 15

#F6F4F5

Used for low-contrast backgrounds on white.

Grey 10

#FAFAFA

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

Green 60

#009054

Green 30

#95E9C9

Green 20

#DBFAEE

Blue 75

#0262B9

Blue 60

#0080DC

Blue 30

#AEDEFF

Blue 20

#E0F3FF

Red 70

#D62C15

Red 60

#ED3E27

Red 30

#FFC5BD

Red 20

#FFE8E5

Yellow 70

#996100

Yellow 60

#C27B00

Yellow 30

#FDE162

Yellow 20

#FFF8B3

Brand

Primary Accent

Blue 70

#0047BB

Secondary Accent

Mint 40

#48D597

Supporting Colors

White

#FFFFFF

Teal Blue 40

#02BCB2

Yellow 35

#F9F162

Green 35

#6FD16F

Neutral

Grey 100

#242526

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

Grey 90

#313336

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

Grey 80

#3F4145

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

Grey 70

#53565A

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

Grey 60

#65686C

Used for muted or disabled text and icons on white.

Grey 50

#8E9399

Used for muted or disabled text and icons on black.

Grey 40

#ACB0B5

Used for high-contrast borders on white.

Grey 30

#D0D4D9

Used for medium-contrast borders on white.

Grey 25

#DADEE2

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

Grey 20

#EDF0F2

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

Grey 15

#F4F5F6

Used for low-contrast backgrounds on white.

Grey 10

#F8F9F9

Used for low-contrast backgrounds on white.

Semantic

Green 60

#008000

Green 50

#189E18

Green 30

#A7DBA7

Green 20

#CEF2CE

Blue 60

#0060FA

Blue 50

#468AF1

Blue 30

#C0D7FA

Blue 20

#E6F0FF

Red 60

#D81820

Red 50

#FA5056

Red 30

#FCC7C9

Red 20

#FCE8E9

Yellow 60

#946300

Yellow 50

#D19110

Yellow 30

#F6ED79

Yellow 20

#F9F5BE

Brand

Primary Accent

Red 65

#E0311A

Secondary Accent

Orange 60

#E66400

Supporting Colors

White

#FFFFFF

Teal 25

#B2FFF6

Yellow 20

#FFF8B3

Teal 100

#0F3133

Neutral

Grey 100

#262425

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

Grey 90

#343333

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

Grey 80

#434142

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

Grey 70

#585657

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

Grey 60

#6A6869

Used for muted or disabled text and icons on white.

Grey 50

#949293

Used for muted or disabled text and icons on black.

Grey 40

#B1B0B0

Used for high-contrast borders on white.

Grey 30

#D6D3D4

Used for medium-contrast borders on white.

Grey 25

#DFDDDE

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

Grey 20

#F2F0F1

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

Grey 15

#F6F4F5

Used for low-contrast backgrounds on white.

Grey 10

#FAFAFA

Used for low-contrast backgrounds on white.

Semantic

Green 70

#007E44

Green 60

#009054

Green 30

#95E9C9

Green 20

#DBFAEE

Blue 75

#0262B9

Blue 60

#0080DC

Blue 30

#AEDEFF

Blue 20

#E0F3FF

Red 70

#D62C15

Red 60

#ED3E27

Red 30

#FFC5BD

Red 20

#FFE8E5

Yellow 70

#996100

Yellow 60

#C27B00

Yellow 30

#FDE162

Yellow 20

#FFF8B3