Chi Documentation

Colors

Chi offers a wide variety of colors 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 below is marked accordingly.

Grey
100
#242424
AAA
90
#333333
AAA
80
#424242
AAA
70
#616161
AAA+
60
#757575
AAA+
50
#919191
AAA+
40
#B0B0B0
AAA
30
#D5D5D5
AAA
20
#EEEEEE
AAA
10
#F8F8F8
AAA
Red
100
#471819
AAA
90
#691518
AAA
80
#8F0E13
AAA
70
#B50D12
AAA+
60
#DE1B21
AAA+
50
#FA5056
AAA+
40
#FC9094
AAA
30
#FCC7C9
AAA
20
#FCE8E9
AAA
10
#FFF5F5
AAA
Pink
100
#451726
AAA
90
#661430
AAA
80
#8C0E38
AAA
70
#B30C44
AAA+
60
#DB1A5B
AAA+
50
#F74F87
AAA+
40
#FA8EB2
AAA
30
#FCC7D9
AAA
20
#FCE8EF
AAA
10
#FCF5F7
AAA
Purple
100
#371C52
AAA
90
#4D2378
AAA
80
#642B9E
AAA
70
#7E40BD
AAA+
60
#9557D4
AAA+
50
#B277ED
AAA+
40
#CDA3F7
AAA
30
#E2CDF7
AAA
20
#F2EBFA
AAA
10
#FAF7FC
AAA
Indigo
100
#222261
AAA
90
#2B2B94
AAA
80
#3939BD
AAA
70
#4F4FDB
AAA+
60
#6666E3
AAA+
50
#8787FA
AAA+
40
#ADADFF
AAA
30
#D1D1FF
AAA
20
#EDEDFF
AAA
10
#F7F7FF
AAA
Navy
100
#172945
AAA
90
#173A6E
AAA
80
#10489C
AAA
70
#0E5BCF
AAA+
60
#2973E3
AAA+
50
#5394F5
AAA+
40
#8CB6F5
AAA
30
#C0D7FA
AAA
20
#E6F0FF
AAA
10
#F5F8FC
AAA
Blue
100
#0C2B3B
AAA
90
#093D57
AAA
80
#064E73
AAA
70
#066594
AAA+
60
#0D7DB5
AAA+
50
#239CD9
AAA+
40
#53BFF5
AAA
30
#B0DEF5
AAA
20
#E1F2FA
AAA
10
#F2F9FC
AAA
Teal
100
#082E2B
AAA
90
#06403B
AAA
80
#07524B
AAA
70
#056960
AAA+
60
#038277
AAA+
50
#0AA396
AAA+
40
#1EC7B9
AAA
30
#ABE0DC
AAA
20
#D7F5F2
AAA
10
#EDFAF9
AAA
Emerald
100
#0A2E1B
AAA
90
#094023
AAA
80
#07542B
AAA
70
#056B35
AAA+
60
#03853F
AAA+
50
#0AA653
AAA+
40
#1EC96E
AAA
30
#ABE0C4
AAA
20
#DAF5E6
AAA
10
#EDFAF3
AAA
Green
100
#1E2B0A
AAA
90
#283D09
AAA
80
#344F0B
AAA
70
#3F6605
AAA+
60
#4E8003
AAA+
50
#689E18
AAA+
40
#7EC219
AAA
30
#C6DBA7
AAA
20
#E4F2CE
AAA
10
#F2FAE6
AAA
Yellow
100
#36240C
AAA
90
#4D310B
AAA
80
#663E07
AAA
70
#854E03
AAA+
60
#A66102
AAA+
50
#C97D12
AAA+
40
#E6A243
AAA
30
#F5CC93
AAA
20
#FAECD9
AAA
10
#FFF8ED
AAA
Orange
100
#3D1E14
AAA
90
#5E2413
AAA
80
#80280D
AAA
70
#A6310D
AAA+
60
#C94218
AAA+
50
#E8663F
AAA+
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: #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: #03853f,
    50: #0aa653,
    40: #1ec96e,
    30: #abe0c4,
    20: #daf5e6,
    10: #edfaf3,
  ),
  green: (
    100: #1e2b0a,
    90: #283d09,
    80: #344f0b,
    70: #3f6605,
    60: #4e8003,
    50: #689e18,
    40: #7ec219,
    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/css/variables';
@import '@centurylink/chi/src/css/mixins';

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