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

Navy 70
#0047BB
AAA

Secondary Accent

Mint 40
#48D597
AAA

Supporting Colors

Black
#000000
AAA
Navy 90
#001E60
AAA
Mint 70
#097A49
AA
Grey 70
#53565A
AAA

Neutral

Neutral palette is an extension of CenturyLink Brand's Dark Grey swatch (Grey 70). Each shade is based off the original hue.

Black
#000000
AAA

Used to brand business and corporate content (mastheads, heroes, etc.).

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
#72767A
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 20
#EDF0F2
AAA

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

Grey 10
#F8F9F9
AAA

Used for low-contrast backgrounds on white.

White
#FFFFFF
AAA

Used as body background color and primary text color on black.

Semantic

Success

Mint 70
#097A49
AA

Info

Navy 70
#0047BB
AAA

Danger

Red 70
#B50D12
AA

Warning

Yellow 60
#A66102
AA

Palettes

In addition to brand colors, Chi offers twelve palettes designed to assist in the creation of application components such as alerts, avatars, charts, and data visualizations.

Grey

100
#242526
AAA
90
#313336
AAA
80
#3F4145
AAA
70
#53565A
AA
60
#72767A
AA
50
#8E9399
AA
40
#ACB0B5
AAA
30
#D0D4D9
AAA
20
#EDF0F2
AAA
10
#F8F9F9
AAA

Red

100
#471819
AAA
90
#691518
AAA
80
#8F0E13
AAA
70
#B50D12
AA
60
#DE1B21
AA
50
#FA5056
AA
40
#FC9094
AAA
30
#FCC7C9
AAA
20
#FCE8E9
AAA
10
#FFF5F5
AAA

Pink

100
#451726
AAA
90
#661430
AAA
80
#8C0E38
AAA
70
#B30C44
AA
60
#DB1A5B
AA
50
#F74F87
AA
40
#FA8EB2
AAA
30
#FCC7D9
AAA
20
#FCE8EF
AAA
10
#FCF5F7
AAA

Purple

100
#371C52
AAA
90
#4D2378
AAA
80
#642B9E
AAA
70
#7E40BD
AA
60
#9557D4
AA
50
#B277ED
AA
40
#CDA3F7
AAA
30
#E2CDF7
AAA
20
#F2EBFA
AAA
10
#FAF7FC
AAA

Indigo

100
#222261
AAA
90
#2B2B94
AAA
80
#3939BD
AAA
70
#4F4FDB
AA
60
#6666E3
AA
50
#8787FA
AA
40
#ADADFF
AAA
30
#D1D1FF
AAA
20
#EDEDFF
AAA
10
#F7F7FF
AAA

Navy

100
#001238
AAA
90
#001E60
AAA
80
#00308A
AAA
70
#0047BB
AAA
60
#005BED
AA
50
#4289F5
AA
40
#8CB6F5
AAA
30
#C0D7FA
AAA
20
#E6F0FF
AAA
10
#F5F8FC
AAA

Blue

100
#0C2B3B
AAA
90
#093D57
AAA
80
#064E73
AAA
70
#066594
AA
60
#0D7DB5
AA
50
#239CD9
AA
40
#53BFF5
AAA
30
#B0DEF5
AAA
20
#E1F2FA
AAA
10
#F2F9FC
AAA

Teal

100
#082E2B
AAA
90
#06403B
AAA
80
#07524B
AAA
70
#056960
AA
60
#038277
AA
50
#0AA396
AA
40
#1EC7B9
AAA
30
#ABE0DC
AAA
20
#D7F5F2
AAA
10
#EDFAF9
AAA

Mint

100
#0A2E1E
AAA
90
#094028
AAA
80
#075433
AAA
70
#097A49
AA
60
#12995F
AA
50
#27B875
AA
40
#48D597
AAA
30
#ABE0C9
AAA
20
#DAF5E9
AAA
10
#EDFAF3
AAA

Green

100
#1E2B0A
AAA
90
#283D09
AAA
80
#344F0B
AAA
70
#3F6605
AA
60
#4E8003
AA
50
#689E18
AA
40
#8CC63F
AAA
30
#C6DBA7
AAA
20
#E4F2CE
AAA
10
#F2FAE6
AAA

Yellow

100
#36240C
AAA
90
#4D310B
AAA
80
#663E07
AAA
70
#854E03
AA
60
#A66102
AA
50
#C97D12
AA
40
#E6A243
AAA
30
#F5CC93
AAA
20
#FAECD9
AAA
10
#FFF8ED
AAA

Orange

100
#3D1E14
AAA
90
#5E2413
AAA
80
#80280D
AAA
70
#A6310D
AA
60
#C94218
AA
50
#E8663F
AA
40
#F2997E
AAA
30
#F5CCBF
AAA
20
#FCE9E3
AAA
10
#FAF6F5
AAA

White

White
#FFFFFF
AAA

Black

Black
#000000
AAA

SASS

Chi defines colors with Sass language variables.

$colorscheme: (
  grey: (
    100: #242526,
    90: #313336,
    80: #3f4145,
    70: #53565a,
    60: #72767a,
    50: #8e9399,
    40: #acb0b5,
    30: #d0d4d9,
    20: #edf0f2,
    10: #f8f9f9,
  )
);

A utility function has been created to reference them.

set-color($scheme, $tone)

To use it, add chi through npm and import the variables and mixins sass files.

@import '@centurylink/chi/src/chi/_variables';
@import '@centurylink/chi/src/chi/_mixins';

.example {
  color: set-color(grey, 60);
}