Chi · Color

Color

Chi colors are designed to comply with WCAG AA+ accessibility standards. AA colors have a contrast ratio of 4.5:1 or higher, and AAA colors have a contrast ratio of at least 7:1. Each color has been marked 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

Body Text

Grey 100

#242526

Muted Text

Grey 60

#72767A

Muted Icon

Grey 50

#8E9399

Layout

Grey 40

#ACB0B5

Layout

Grey 30

#D0D4D9

Layout

Grey 20

#EDF0F2

Layout

Grey 10

#F8F9F9

Layout

White

#FFFFFF

Semantic

Success

Mint 70

#097A49

Info

Navy 70

#0047BB

Danger

Red 70

#B50D12

Warning

Yellow 70

#854E03

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,
  ),
  red: (
    100: #471819,
    90: #691518,
    80: #8f0e13,
    70: #b50d12,
    60: #de1b21,
    50: #fa5056,
    40: #fc9094,
    30: #fcc7c9,
    20: #fce8e9,
    10: #fff5f5,
  ),
  pink: (
    100: #451726,
    90: #661430,
    80: #8c0e38,
    70: #b30c44,
    60: #db1a5b,
    50: #f74f87,
    40: #fa8eb2,
    30: #fcc7d9,
    20: #fce8ef,
    10: #fcf5f7,
  ),
  purple: (
    100: #371c52,
    90: #4d2378,
    80: #642b9e,
    70: #7e40bd,
    60: #9557d4,
    50: #b277ed,
    40: #cda3f7,
    30: #e2cdf7,
    20: #f2ebfa,
    10: #faf7fc,
  ),
  indigo: (
    100: #222261,
    90: #2b2b94,
    80: #3939bd,
    70: #4f4fdb,
    60: #6666e3,
    50: #8787fa,
    40: #adadff,
    30: #d1d1ff,
    20: #ededff,
    10: #f7f7ff,
  ),
  navy: (
    100: #001238,
    90: #001e60,
    80: #00308a,
    70: #0047bb,
    60: #005bed,
    50: #4289f5,
    40: #8cb6f5,
    30: #c0d7fa,
    20: #e6f0ff,
    10: #f5f8fc,
  ),
  blue: (
    100: #0c2b3b,
    90: #093d57,
    80: #064e73,
    70: #066594,
    60: #0d7db5,
    50: #239cd9,
    40: #53bff5,
    30: #b0def5,
    20: #e1f2fa,
    10: #f2f9fc,
  ),
  teal: (
    100: #082e2b,
    90: #06403b,
    80: #07524b,
    70: #056960,
    60: #038277,
    50: #0aa396,
    40: #1ec7b9,
    30: #abe0dc,
    20: #d7f5f2,
    10: #edfaf9,
  ),
  mint: (
    100: #0a2e1e,
    90: #094028,
    80: #075433,
    70: #097a49,
    60: #12995f,
    50: #27b875,
    40: #48d597,
    30: #abe0c9,
    20: #daf5e9,
    10: #edfaf3,
  ),
  green: (
    100: #1e2b0a,
    90: #283d09,
    80: #344f0b,
    70: #3f6605,
    60: #4e8003,
    50: #689e18,
    40: #8CC63F,
    30: #c6dba7,
    20: #e4f2ce,
    10: #f2fae6,
  ),
  yellow: (
    100: #36240c,
    90: #4d310b,
    80: #663e07,
    70: #854e03,
    60: #a66102,
    50: #c97d12,
    40: #e6a243,
    30: #f5cc93,
    20: #faecd9,
    10: #fff8ed,
  ),
  orange: (
    100: #3d1e14,
    90: #5e2413,
    80: #80280d,
    70: #a6310d,
    60: #c94218,
    50: #e8663f,
    40: #f2997e,
    30: #f5ccbf,
    20: #fce9e3,
    10: #faf6f5,
  ),
  black: #000000,
  white: #ffffff
);

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(red, 60);
}