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

Secondary Accent

Cyan 40

#38C6F4

Supporting Colors

White

#FFFFFF

Cyan 50

#0C9ED9

Navy 100

#083176

Black

#000000

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

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

#D62015

Red 60

#EE3026

Red 30

#FFC2BD

Red 20

#FFE8E5

Yellow 70

#A15C00

Yellow 60

#B96B00

Yellow 30

#FFCC89

Yellow 20

#FAECD9

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

Blue 70

#0075C9

Secondary Accent

Cyan 40

#38C6F4

Supporting Colors

White

#FFFFFF

Cyan 50

#0C9ED9

Navy 100

#083176

Black

#000000

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 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

#D62015

Red 60

#EE3026

Red 30

#FFC2BD

Red 20

#FFE8E5

Yellow 70

#A15C00

Yellow 60

#B96B00

Yellow 30

#FFCC89

Yellow 20

#FAECD9

Brand

Primary Accent

Yellow 40

#FFC800

Secondary Accent

Orange 40

#FA783C

Supporting Colors

Red 50

#FA4628

White

#FFFFFF

Black

#000000

Neutral

Grey 100

#000000

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

Grey 90

#191919

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

Grey 80

#333333

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

Grey 70

#4C4C4C

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

Grey 60

#666666

Used for muted or disabled text and icons on white.

Grey 50

#7F7F7F

Used for muted or disabled text and icons on black.

Grey 40

#999999

Used for high-contrast borders on white.

Grey 30

#B2B2B2

Used for medium-contrast borders on white.

Grey 25

#DDDEDF

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

Grey 20

#E6E7E8

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

Grey 15

#F0F1F1

Used for low-contrast backgrounds on white.

Grey 10

#F2F2F2

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

#A01903

Red 60

#D52C10

Red 30

#FCA293

Red 20

#FBDFDB

Yellow 70

#A15C00

Yellow 60

#AD7600

Yellow 30

#FFE37F

Yellow 20

#FFF1BF

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

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

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