loading

v33.0.2

select option

Color Palette

Our product colors

Check out the color usage guidelines for how to use color to make products easier to use.

blue-10

#edf4f7

blue-20

#e3eef3

blue-30 (was blue-lightest)

#cce0ea

blue-40 (was blue-light)

#9ec6de

blue-50

#68a2d3

blue-60 (was blue)

#3a81c2

blue-70 (was blue-dark)

#1668af

blue-80 (was blue-darkest)

#00528e

blue-90

#003c6b

blue-100

#00294b

turquoise-10

#f8fefe

turquoise-20

#e8fbfb

turquoise-30

#c9f5f6

turquoise-40

#9ce9ea

turquoise-50

#68d7d9

turquoise-60

#38c2c4

turquoise-70

#15a1a6

turquoise-80

#037e87

turquoise-90

#005f6b

turquoise-100

#004453

green-10

#f6faf8

green-20

#eaf5ef

green-30 (was green-lightest)

#d1e9db

green-40

#a8d8bc

green-50 (was green-light)

#79c298

green-60 (was green)

#49a471

green-70 (was green-dark)

#2a8652

green-80 (was green-darkest)

#156d3b

green-90

#045624

green-100

#004316

lime-10

#fafdee

lime-20

#f5fcd5

lime-30

#ebfcac

lime-40

#ddfb74

lime-50

#c9ec56

lime-60

#b1d636

lime-70

#94b524

lime-80

#738c12

lime-90

#536507

lime-100

#384202

yellow-10

#fffef7

yellow-20

#fffced

yellow-30 (was yellow-lightest)

#fef8da

yellow-40 (was yellow-light)

#fcefb6

yellow-50 (was yellow)

#fbe284

yellow-60 (was yellow-dark)

#f8d648

yellow-70 (was yellow-darkest)

#ddb31f

yellow-80

#b48804

yellow-90

#825a00

yellow-100

#4d2f00

orange-10

#fffaf8

orange-20

#fff3ec

orange-30 (was orange-lightest)

#fbdbca

orange-40 (was orange-light)

#f7bea0

orange-50 (was orange)

#f79864

orange-60 (was orange-dark)

#ea711a

orange-70

#c65400

orange-80 (was orange-darkest)

#a03b00

orange-90

#772900

orange-100

#4f1a00

red-10

#fff9f9

red-20

#ffeaea

red-30 (was red-lightest)

#f6c6c6

red-40 (was red-light)

#eea2a2

red-50 (was red)

#ec6a6a

red-60 (was red-dark)

#e23333

red-70 (was red-darkest)

#c52220

red-80

#aa0e16

red-90

#890112

red-100

#610011

brown-10

#FAF8F6

brown-20

#F9F4F0

brown-30

#F5E7D9

brown-40

#EEDBCA

brown-50

#E4C4A6

brown-60

#BA8D63

brown-70

#966E4A

brown-80

#6D4B33

brown-90

#4D3222

brown-100

#321E13

gray-10 (was gray-lightest-1)

#fcfcfc

gray-20 (was gray-lightest-2)

#f7f7f7

gray-30 (was gray-lightest-3)

#ecebeb

gray-40 (was gray-light-1)

#d6d5d5

gray-50 (was gray-light-2)

#bbb9b9

gray-60 (was gray-light-3)

#9d9a99

gray-70 (was gray)

#797675

gray-80 (was gray-dark-1)

#5b5958

gray-90 (was gray-dark-2)

#3d3b3b

gray-100 (was gray-dark-3)

#222120

black

#000000

white

#ffffff

blue-10

#edf4f7

blue-20

#e3eef3

blue-30 (was blue-lightest)

#cce0ea

blue-40 (was blue-light)

#9ec6de

blue-50

#68a2d3

blue-60 (was blue)

#3a81c2

blue-70 (was blue-dark)

#1668af

blue-80 (was blue-darkest)

#00528e

blue-90

#003c6b

blue-100

#00294b

turquoise-10

#f8fefe

turquoise-20

#e8fbfb

turquoise-30

#c9f5f6

turquoise-40

#9ce9ea

turquoise-50

#68d7d9

turquoise-60

#38c2c4

turquoise-70

#15a1a6

turquoise-80

#037e87

turquoise-90

#005f6b

turquoise-100

#004453

green-10

#f6faf8

green-20

#eaf5ef

green-30 (was green-lightest)

#d1e9db

green-40

#a8d8bc

green-50 (was green-light)

#79c298

green-60 (was green)

#49a471

green-70 (was green-dark)

#2a8652

green-80 (was green-darkest)

#156d3b

green-90

#045624

green-100

#004316

lime-10

#fafdee

lime-20

#f5fcd5

lime-30

#ebfcac

lime-40

#ddfb74

lime-50

#c9ec56

lime-60

#b1d636

lime-70

#94b524

lime-80

#738c12

lime-90

#536507

lime-100

#384202

yellow-10

#fffef7

yellow-20

#fffced

yellow-30 (was yellow-lightest)

#fef8da

yellow-40 (was yellow-light)

#fcefb6

yellow-50 (was yellow)

#fbe284

yellow-60 (was yellow-dark)

#f8d648

yellow-70 (was yellow-darkest)

#ddb31f

yellow-80

#b48804

yellow-90

#825a00

yellow-100

#4d2f00

orange-10

#fffaf8

orange-20

#fff3ec

orange-30 (was orange-lightest)

#fbdbca

orange-40 (was orange-light)

#f7bea0

orange-50 (was orange)

#f79864

orange-60 (was orange-dark)

#ea711a

orange-70

#c65400

orange-80 (was orange-darkest)

#a03b00

orange-90

#772900

orange-100

#4f1a00

red-10

#fff9f9

red-20

#ffeaea

red-30 (was red-lightest)

#f6c6c6

red-40 (was red-light)

#eea2a2

red-50 (was red)

#ec6a6a

red-60 (was red-dark)

#e23333

red-70 (was red-darkest)

#c52220

red-80

#aa0e16

red-90

#890112

red-100

#610011

brown-10

#FAF8F6

brown-20

#F9F4F0

brown-30

#F5E7D9

brown-40

#EEDBCA

brown-50

#E4C4A6

brown-60

#BA8D63

brown-70

#966E4A

brown-80

#6D4B33

brown-90

#4D3222

brown-100

#321E13

gray-10 (was gray-lightest-1)

#fcfcfc

gray-20 (was gray-lightest-2)

#f7f7f7

gray-30 (was gray-lightest-3)

#ecebeb

gray-40 (was gray-light-1)

#d6d5d5

gray-50 (was gray-light-2)

#bbb9b9

gray-60 (was gray-light-3)

#9d9a99

gray-70 (was gray)

#797675

gray-80 (was gray-dark-1)

#5b5958

gray-90 (was gray-dark-2)

#3d3b3b

gray-100 (was gray-dark-3)

#222120

black

#000000

white

#ffffff

Is this page helpful?