Colors

The following are the design system most basic tokens for color styling. Refer to the Themes section for more guidelines on color roles and usage.

Primary

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__black

#000000
rgba(0,0,0,1)

21:1

1:1

--uxa-color__white

#ffffff
rgba(255,255,255,1)

1:1

21:1

--uxa-color__primary

#0073e7
rgba(0,115,231,1)

4.52:1

4.64:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__black

#000000
rgba(0,0,0,1)

1.73:1

1:1

--uxa-color__white

#ffffff
rgba(255,255,255,1)

12.12:1

21:1

--uxa-color__primary

#0073e7
rgba(0,115,231,1)

2.68:1

4.64:1

Neutrals (grayscale)

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__gray-05

#fafafa
rgba(250,250,250,1)

1.04:1

20.15:1

--uxa-color__gray-10

#f1f2f3
rgba(241,242,243,1)

1.12:1

18.8:1

--uxa-color__gray-20

#e8eaeb
rgba(232,234,235,1)

1.2:1

17.5:1

--uxa-color__gray-25

#dcdedf
rgba(220,222,223,1)

1.34:1

15.69:1

--uxa-color__gray-30

#cfd0d1
rgba(207,208,209,1)

1.53:1

13.76:1

--uxa-color__gray-40

#bdbec0
rgba(189,190,192,1)

1.83:1

11.46:1

--uxa-color__gray-50

#a3a5a8
rgba(163,165,168,1)

2.43:1

8.65:1

--uxa-color__gray-60

#8a8d8f
rgba(138,141,143,1)

3.29:1

6.39:1

--uxa-color__gray-70

#747577
rgba(116,117,119,1)

4.57:1

4.6:1

--uxa-color__gray-75

#656668
rgba(101,102,104,1)

5.74:1

3.66:1

--uxa-color__gray-80

#4c4e50
rgba(76,78,80,1)

8.52:1

2.47:1

--uxa-color__gray-90

#323435
rgba(50,52,53,1)

13.15:1

1.6:1

--uxa-color__gray-95

#1c1d1e
rgba(28,29,30,1)

18.01:1

1.17:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__gray-05

#101629
rgba(16,22,41,1)

1.57:1

1.1:1

--uxa-color__gray-10

#1d2238
rgba(29,34,56,1)

1.38:1

1.26:1

--uxa-color__gray-20

#24293f
rgba(36,41,63,1)

1.26:1

1.38:1

--uxa-color__gray-25

#2a2f45
rgba(42,47,69,1)

1.15:1

1.51:1

--uxa-color__gray-30

#33384c
rgba(51,56,76,1)

1:1

1.73:1

--uxa-color__gray-40

#44495b
rgba(68,73,91,1)

1.32:1

2.29:1

--uxa-color__gray-50

#5a5e6f
rgba(90,94,111,1)

1.88:1

3.25:1

--uxa-color__gray-60

#737584
rgba(115,117,132,1)

2.68:1

4.65:1

--uxa-color__gray-70

#888b99
rgba(136,139,153,1)

3.63:1

6.3:1

--uxa-color__gray-75

#9ea1ad
rgba(158,161,173,1)

4.79:1

8.3:1

--uxa-color__gray-80

#b9bec9
rgba(185,190,201,1)

6.6:1

11.44:1

--uxa-color__gray-90

#dce0e8
rgba(220,224,232,1)

9.23:1

16:1

--uxa-color__gray-95

#eceff5
rgba(236,239,245,1)

10.56:1

18.31:1

Status

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__status-success

#1aa364
rgba(26,163,100,1)

3.2:1

6.56:1

--uxa-color__status-warning

#ffc002
rgba(255,192,2,1)

1.63:1

12.91:1

--uxa-color__status-error

#e5004c
rgba(229,0,76,1)

4.71:1

4.46:1

--uxa-color__status-info

#0064ca
rgba(0,100,202,1)

5.69:1

3.69:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__status-success

#28bc6c
rgba(40,188,108,1)

4.96:1

8.61:1

--uxa-color__status-warning

#fcdb1f
rgba(252,219,31,1)

8.88:1

15.39:1

--uxa-color__status-error

#e5004c
rgba(229,0,76,1)

2.57:1

4.46:1

--uxa-color__status-info

#3398ff
rgba(51,152,255,1)

4.12:1

7.15:1

Additional (extended palette)

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__severity-normal

#008535
rgba(0,133,53,1)

4.71:1

4.46:1

--uxa-color__severity-minor

#fcdb1f
rgba(252,219,31,1)

1.36:1

15.39:1

--uxa-color__severity-major

#f48b34
rgba(244,139,52,1)

2.42:1

8.67:1

--uxa-color__severity-critical

#e30901
rgba(227,9,1,1)

4.88:1

4.3:1

--uxa-color__severity-warning

#008efc
rgba(0,142,252,1)

3.31:1

6.35:1

--uxa-color__severity-unknown

#8c26d6
rgba(140,38,214,1)

6.3:1

3.34:1

--uxa-color__severity-none

#35434d
rgba(53,67,77,1)

10.53:1

1.99:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__severity-normal

#67ef9b
rgba(103,239,155,1)

8.35:1

14.47:1

--uxa-color__severity-minor

#ffff5e
rgba(255,255,94,1)

11.37:1

19.72:1

--uxa-color__severity-major

#ff8a00
rgba(255,138,0,1)

5.17:1

8.96:1

--uxa-color__severity-critical

#ff7588
rgba(255,117,136,1)

4.73:1

8.19:1

--uxa-color__severity-warning

#61b0ff
rgba(97,176,255,1)

5.35:1

9.28:1

--uxa-color__severity-unknown

#dc79ff
rgba(220,121,255,1)

4.78:1

8.29:1

--uxa-color__severity-none

#b3bcd4
rgba(179,188,212,1)

6.48:1

11.23:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__plum

#b21646
rgba(178,22,70,1)

6.82:1

3.08:1

--uxa-color__cherry-red

#d7235a
rgba(215,35,90,1)

4.94:1

4.25:1

--uxa-color__red

#ff454f
rgba(255,69,79,1)

3.4:1

6.17:1

--uxa-color__salmon-red

#ff4b63
rgba(255,75,99,1)

3.28:1

6.4:1

--uxa-color__flamingo

#f37787
rgba(243,119,135,1)

2.67:1

7.86:1

--uxa-color__salmon-pink

#ffa0ad
rgba(255,160,173,1)

1.91:1

11:1

--uxa-color__carnation-pink

#fccad0
rgba(252,202,208,1)

1.44:1

14.63:1

--uxa-color__bubble-gum

#ffa1ce
rgba(255,161,206,1)

1.85:1

11.36:1

--uxa-color__barbie-pink

#e56da7
rgba(229,109,167,1)

2.95:1

7.13:1

--uxa-color__hot-pink

#ff62ad
rgba(255,98,173,1)

2.76:1

7.61:1

--uxa-color__neon-pink

#ef187f
rgba(239,24,127,1)

4.14:1

5.08:1

--uxa-color__magenta

#eb23c2
rgba(235,35,194,1)

3.8:1

5.53:1

--uxa-color__taffy

#e967cb
rgba(233,103,203,1)

2.87:1

7.31:1

--uxa-color__fuchsia

#c6179d
rgba(198,23,157,1)

5.24:1

4.01:1

--uxa-color__purple

#9b1e83
rgba(155,30,131,1)

7.28:1

2.88:1

--uxa-color__pale-purple

#b53ddc
rgba(181,61,220,1)

4.51:1

4.66:1

--uxa-color__mauve

#d5adfd
rgba(213,173,253,1)

1.85:1

11.37:1

--uxa-color__indigo

#7425ad
rgba(116,37,173,1)

8.17:1

2.57:1

--uxa-color__pale-eggplant

#5216ac
rgba(82,22,172,1)

10.38:1

2.02:1

--uxa-color__violet

#5540bf
rgba(85,64,191,1)

7.43:1

2.83:1

--uxa-color__iris

#6055f1
rgba(96,85,241,1)

5.19:1

4.05:1

--uxa-color__ultramarine

#3939c6
rgba(57,57,198,1)

8.35:1

2.51:1

--uxa-color__dark-blue

#231ca5
rgba(35,28,165,1)

12.22:1

1.72:1

--uxa-color__dark-ultramarine

#271782
rgba(39,23,130,1)

14.3:1

1.47:1

--uxa-color__steelblue

#014272
rgba(1,66,114,1)

10.62:1

1.98:1

--uxa-color__cerulean

#1668c1
rgba(22,104,193,1)

5.54:1

3.79:1

--uxa-color__sapphire

#0974a9
rgba(9,116,169,1)

5.1:1

4.12:1

--uxa-color__arctic-blue

#0b8eac
rgba(11,142,172,1)

3.78:1

5.56:1

--uxa-color__pacific-blue

#1fb8db
rgba(31,184,219,1)

2.32:1

9.05:1

--uxa-color__skyblue

#00abf3
rgba(0,171,243,1)

2.55:1

8.24:1

--uxa-color__aqua

#29ceff
rgba(41,206,255,1)

1.83:1

11.47:1

--uxa-color__pale-aqua

#43e4ff
rgba(67,228,255,1)

1.52:1

13.85:1

--uxa-color__light-blue

#9edbfa
rgba(158,219,250,1)

1.49:1

14.1:1

--uxa-color__light-cyan

#b8f5f8
rgba(184,245,248,1)

1.2:1

17.53:1

--uxa-color__aquamarine

#2fd6c3
rgba(47,214,195,1)

1.81:1

11.63:1

--uxa-color__pale-green

#1ffbba
rgba(31,251,186,1)

1.35:1

15.58:1

--uxa-color__mint

#84e0b6
rgba(132,224,182,1)

1.56:1

13.44:1

--uxa-color__pale-emerald

#33c180
rgba(51,193,128,1)

2.29:1

9.19:1

--uxa-color__emerald

#00a989
rgba(0,169,137,1)

2.94:1

7.15:1

--uxa-color__sea-green

#078374
rgba(7,131,116,1)

4.6:1

4.56:1

--uxa-color__forest-green

#00645a
rgba(0,100,90,1)

7.07:1

2.97:1

--uxa-color__leaf-green

#05854f
rgba(5,133,79,1)

4.64:1

4.53:1

--uxa-color__olive

#5bba36
rgba(91,186,54,1)

2.43:1

8.63:1

--uxa-color__lime

#75da4d
rgba(117,218,77,1)

1.75:1

12:1

--uxa-color__dark-green

#576b1a
rgba(87,107,26,1)

5.96:1

3.53:1

--uxa-color__avocado

#809900
rgba(128,153,0,1)

3.19:1

6.58:1

--uxa-color__oilve-oil

#a79425
rgba(167,148,37,1)

2.99:1

7.02:1

--uxa-color__acid-green

#c9cc29
rgba(201,204,41,1)

1.71:1

12.3:1

--uxa-color__citron

#dbe599
rgba(219,229,153,1)

1.33:1

15.8:1

--uxa-color__yellow-green

#f0fe94
rgba(240,254,148,1)

1.09:1

19.34:1

--uxa-color__canary-yellow

#fff200
rgba(255,242,0,1)

1.17:1

18:1

--uxa-color__pale-lemon

#fde159
rgba(253,225,89,1)

1.3:1

16.18:1

--uxa-color__yellow

#fcdb1f
rgba(252,219,31,1)

1.36:1

15.39:1

--uxa-color__orange

#ffce00
rgba(255,206,0,1)

1.48:1

14.2:1

--uxa-color__goldenrod

#ffb000
rgba(255,176,0,1)

1.81:1

11.58:1

--uxa-color__pale-amber

#ffb24d
rgba(255,178,77,1)

1.77:1

11.84:1

--uxa-color__orange-juice

#ff8000
rgba(255,128,0,1)

2.5:1

8.39:1

--uxa-color__copper

#e57828
rgba(229,120,40,1)

2.96:1

7.11:1

--uxa-color__ochre

#c06f00
rgba(192,111,0,1)

3.77:1

5.57:1

--uxa-color__golden-brown

#8f6400
rgba(143,100,0,1)

5.23:1

4.02:1

--uxa-color__dark-olive

#766a23
rgba(118,106,35,1)

5.42:1

3.87:1

--uxa-color__camel

#b18953
rgba(177,137,83,1)

3.15:1

6.67:1

--uxa-color__khaki

#e9c699
rgba(233,198,153,1)

1.6:1

13.15:1

--uxa-color__champagne

#fce7a6
rgba(252,231,166,1)

1.22:1

17.21:1

--uxa-color__warm-gray

#787573
rgba(120,117,115,1)

4.53:1

4.64:1

--uxa-color__cool-gray

#737582
rgba(115,117,130,1)

4.52:1

4.64:1

Sample Token Value Contrast

AA standards: Text 14px or smaller must meet a 4.5:1 contrast ratio.
Bigger text and some UI elements require a 3:1 contrast.

--uxa-color__plum

#b21646
rgba(178,22,70,1)

1.78:1

3.08:1

--uxa-color__cherry-red

#d7235a
rgba(215,35,90,1)

2.45:1

4.25:1

--uxa-color__red

#ff454f
rgba(255,69,79,1)

3.56:1

6.17:1

--uxa-color__salmon-red

#ff4b63
rgba(255,75,99,1)

3.69:1

6.4:1

--uxa-color__flamingo

#f37787
rgba(243,119,135,1)

4.53:1

7.86:1

--uxa-color__salmon-pink

#ffa0ad
rgba(255,160,173,1)

6.34:1

11:1

--uxa-color__carnation-pink

#fccad0
rgba(252,202,208,1)

8.44:1

14.63:1

--uxa-color__bubble-gum

#ffa1ce
rgba(255,161,206,1)

6.55:1

11.36:1

--uxa-color__barbie-pink

#e56da7
rgba(229,109,167,1)

4.11:1

7.13:1

--uxa-color__hot-pink

#ff62ad
rgba(255,98,173,1)

4.39:1

7.61:1

--uxa-color__neon-pink

#ef187f
rgba(239,24,127,1)

2.93:1

5.08:1

--uxa-color__magenta

#eb23c2
rgba(235,35,194,1)

3.19:1

5.53:1

--uxa-color__taffy

#e967cb
rgba(233,103,203,1)

4.22:1

7.31:1

--uxa-color__fuchsia

#c6179d
rgba(198,23,157,1)

2.31:1

4.01:1

--uxa-color__purple

#9b1e83
rgba(155,30,131,1)

1.66:1

2.88:1

--uxa-color__pale-purple

#b53ddc
rgba(181,61,220,1)

2.69:1

4.66:1

--uxa-color__mauve

#d5adfd
rgba(213,173,253,1)

6.56:1

11.37:1

--uxa-color__indigo

#7425ad
rgba(116,37,173,1)

1.48:1

2.57:1

--uxa-color__pale-eggplant

#5216ac
rgba(82,22,172,1)

1.17:1

2.02:1

--uxa-color__violet

#5540bf
rgba(85,64,191,1)

1.63:1

2.83:1

--uxa-color__iris

#6055f1
rgba(96,85,241,1)

2.33:1

4.05:1

--uxa-color__ultramarine

#3939c6
rgba(57,57,198,1)

1.45:1

2.51:1

--uxa-color__dark-blue

#231ca5
rgba(35,28,165,1)

1.01:1

1.72:1

--uxa-color__dark-ultramarine

#271782
rgba(39,23,130,1)

1.18:1

1.47:1

--uxa-color__steelblue

#014272
rgba(1,66,114,1)

1.14:1

1.98:1

--uxa-color__cerulean

#1668c1
rgba(22,104,193,1)

2.19:1

3.79:1

--uxa-color__sapphire

#0974a9
rgba(9,116,169,1)

2.37:1

4.12:1

--uxa-color__arctic-blue

#0b8eac
rgba(11,142,172,1)

3.21:1

5.56:1

--uxa-color__pacific-blue

#1fb8db
rgba(31,184,219,1)

5.22:1

9.05:1

--uxa-color__skyblue

#00abf3
rgba(0,171,243,1)

4.75:1

8.24:1

--uxa-color__aqua

#29ceff
rgba(41,206,255,1)

6.61:1

11.47:1

--uxa-color__pale-aqua

#43e4ff
rgba(67,228,255,1)

7.99:1

13.85:1

--uxa-color__light-blue

#9edbfa
rgba(158,219,250,1)

8.13:1

14.1:1

--uxa-color__light-cyan

#b8f5f8
rgba(184,245,248,1)

10.11:1

17.53:1

--uxa-color__aquamarine

#2fd6c3
rgba(47,214,195,1)

6.71:1

11.63:1

--uxa-color__pale-green

#1ffbba
rgba(31,251,186,1)

8.99:1

15.58:1

--uxa-color__mint

#84e0b6
rgba(132,224,182,1)

7.75:1

13.44:1

--uxa-color__pale-emerald

#33c180
rgba(51,193,128,1)

5.3:1

9.19:1

--uxa-color__emerald

#00a989
rgba(0,169,137,1)

4.13:1

7.15:1

--uxa-color__sea-green

#078374
rgba(7,131,116,1)

2.63:1

4.56:1

--uxa-color__forest-green

#00645a
rgba(0,100,90,1)

1.71:1

2.97:1

--uxa-color__leaf-green

#05854f
rgba(5,133,79,1)

2.61:1

4.53:1

--uxa-color__olive

#5bba36
rgba(91,186,54,1)

4.98:1

8.63:1

--uxa-color__lime

#75da4d
rgba(117,218,77,1)

6.92:1

12:1

--uxa-color__dark-green

#576b1a
rgba(87,107,26,1)

2.03:1

3.53:1

--uxa-color__avocado

#809900
rgba(128,153,0,1)

3.8:1

6.58:1

--uxa-color__olive-oil

#a79425
rgba(167,148,37,1)

4.05:1

7.02:1

--uxa-color__acid-green

#c9cc29
rgba(201,204,41,1)

7.1:1

12.3:1

--uxa-color__citron

#dbe599
rgba(219,229,153,1)

9.12:1

15.8:1

--uxa-color__yellow-green

#f0fe94
rgba(240,254,148,1)

11.16:1

19.34:1

--uxa-color__canary-yellow

#fff200
rgba(255,242,0,1)

10.38:1

18:1

--uxa-color__pale-lemon

#fde159
rgba(253,225,89,1)

9.34:1

16.18:1

--uxa-color__yellow

#fcdb1f
rgba(252,219,31,1)

8.88:1

15.39:1

--uxa-color__orange

#ffce00
rgba(255,206,0,1)

8.19:1

14.2:1

--uxa-color__goldenrod

#ffb000
rgba(255,176,0,1)

6.68:1

11.58:1

--uxa-color__pale-amber

#ffb24d
rgba(255,178,77,1)

6.83:1

11.84:1

--uxa-color__orange-juice

#ff8000
rgba(255,128,0,1)

4.84:1

8.39:1

--uxa-color__copper

#e57828
rgba(229,120,40,1)

4.1:1

7.11:1

--uxa-color__ochre

#c06f00
rgba(192,111,0,1)

3.21:1

5.57:1

--uxa-color__golden-brown

#8f6400
rgba(143,100,0,1)

2.32:1

4.02:1

--uxa-color__dark-olive

#766a23
rgba(118,106,35,1)

2.23:1

3.87:1

--uxa-color__camel

#b18953
rgba(177,137,83,1)

3.85:1

6.67:1

--uxa-color__khaki

#e9c699
rgba(233,198,153,1)

7.59:1

13.15:1

--uxa-color__champagne

#fce7a6
rgba(252,231,166,1)

9.93:1

17.21:1

--uxa-color__warm-gray

#787573
rgba(120,117,115,1)

2.68:1

4.64:1

--uxa-color__cool-gray

#737582
rgba(115,117,130,1)

2.68:1

4.64:1