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

Emerald 60

#00853F

Secondary Accent

Green 40

#8CC63F

Neutral

Body Text

Grey 100

#242424

Muted Text

Grey 60

#757575

Muted Icon

Grey 50

#919191

Layout

Grey 40

#B0B0B0

Layout

Grey 30

#D5D5D5

Layout

Grey 20

#EEEEEE

Layout

Grey 10

#F8F8F8

Layout

White

#FFFFFF

Semantic

Success

Green 60

#4E8003

Info

Navy 60

#2973E3

Danger

Red 60

#DE1B21

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

#242424

#333333

#424242

#616161

#757575

#919191

#B0B0B0

#D5D5D5

#EEEEEE

#F8F8F8

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

#172945

#173A6E

#10489C

#0E5BCF

#2973E3

#5394F5

#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

Emerald

100

#0A2E1B

#094023

#07542B

#056B35

#00853F

#0AA653

#1EC96E

#ABE0C4

#DAF5E6

#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: #242424,
    90: #333333,
    80: #424242,
    70: #616161,
    60: #757575,
    50: #919191,
    40: #b0b0b0,
    30: #d5d5d5,
    20: #eeeeee,
    10: #f8f8f8,
  ),
  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: #172945,
    90: #173a6e,
    80: #10489c,
    70: #0e5bcf,
    60: #2973e3,
    50: #5394f5,
    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,
  ),
  emerald: (
    100: #0a2e1b,
    90: #094023,
    80: #07542b,
    70: #056b35,
    60: #00853F,
    50: #0aa653,
    40: #1ec96e,
    30: #abe0c4,
    20: #daf5e6,
    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);
}