Chi · Color

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

Secondary Accent

Mint 40

#48D597

Supporting Colors

Black

#000000

Navy 90

#001E60

Mint 70

#097A49

Grey 70

#53565A

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

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

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

#72767A

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 20

#EDF0F2

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

Grey 10

#F8F9F9

Used for low-contrast backgrounds on white.

White

#FFFFFF

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

Semantic

Success

Mint 70

#097A49

Info

Navy 70

#0047BB

Danger

Red 70

#B50D12

Warning

Yellow 60

#A66102

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

#313336

#3F4145

#53565A

#72767A

#8E9399

#ACB0B5

#D0D4D9

#EDF0F2

#F8F9F9

Red

100

#471819

#691518

#8F0E13

#B50D12

#DE1B21

#FA5056

#FC9094

#FCC7C9

#FCE8E9

#FFF5F5

Pink

100

#451726

#661430

#8C0E38

#B30C44

#DB1A5B

#F74F87

#FA8EB2

#FCC7D9

#FCE8EF

#FCF5F7

Purple

100

#371C52

#4D2378

#642B9E

#7E40BD

#9557D4

#B277ED

#CDA3F7

#E2CDF7

#F2EBFA

#FAF7FC

Indigo

100

#222261

#2B2B94

#3939BD

#4F4FDB

#6666E3

#8787FA

#ADADFF

#D1D1FF

#EDEDFF

#F7F7FF

Navy

100

#001238

#001E60

#00308A

#0047BB

#005BED

#4289F5

#8CB6F5

#C0D7FA

#E6F0FF

#F5F8FC

Blue

100

#0C2B3B

#093D57

#064E73

#066594

#0D7DB5

#239CD9

#53BFF5

#B0DEF5

#E1F2FA

#F2F9FC

Teal

100

#082E2B

#06403B

#07524B

#056960

#038277

#0AA396

#1EC7B9

#ABE0DC

#D7F5F2

#EDFAF9

Mint

100

#0A2E1E

#094028

#075433

#097A49

#12995F

#27B875

#48D597

#ABE0C9

#DAF5E9

#EDFAF3

Green

100

#1E2B0A

#283D09

#344F0B

#3F6605

#4E8003

#689E18

#8CC63F

#C6DBA7

#E4F2CE

#F2FAE6

Yellow

100

#36240C

#4D310B

#663E07

#854E03

#A66102

#C97D12

#E6A243

#F5CC93

#FAECD9

#FFF8ED

Orange

100

#3D1E14

#5E2413

#80280D

#A6310D

#C94218

#E8663F

#F2997E

#F5CCBF

#FCE9E3

#FAF6F5

White

White

#FFFFFF

Black

Black

#000000

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);
}