loading

v33.3.0

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

#EAF0F8

blue-20

#DFE8F4

blue-30

#C0D1E9

blue-40

#8BABD6

blue-50

#4176BC

blue-60

#2C67B5

blue-70

#285DA3

blue-80 (was blue-darkest)

#235291

blue-90

#1A3E6D

blue-100

#122948

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

#EBF7F6

green-20

#D6EFEC

green-30

#ADDFD9

green-40

#84D0C6

green-50

#5BC0B3

green-60

#32B0A0

green-70

#2D9E90

green-80

#237C70

green-90

#1E6A60

green-100

#144640

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

#FFEEE8

orange-20

#FAE5DE

orange-30

#F5CABD

orange-40

#EFB09C

orange-50

#EA957B

orange-60

#E57B5A

orange-70

#CE6F51

orange-80

#B76248

orange-90

#A0563F

orange-100

#733E2D

red-10

#F9E9EC

red-20

#F4D3D8

red-30

#E9A7B2

red-40

#DD7A8B

red-50

#D24E65

red-60

#C7223E

red-70

#B31F38

red-80

#9F1B32

red-90

#771425

red-100

#500E19

brown-10

#FBF8F7

brown-20

#F0EAE1

brown-30

#E2D5C2

brown-40

#CCB695

brown-50

#C5AB85

brown-60

#B69667

brown-70

#A4875D

brown-80

#7F6948

brown-90

#5B4B34

brown-100

#493C29

gray-10

#F4F4F4

gray-20

#EBECEC

gray-30

#DEDFDF

gray-40

#C4C4C4

gray-50

#A7AAAA

gray-60

#7B8080

gray-70

#656B6B

gray-80 (was gray-dark-1)

#394040

gray-90

#232B2B

gray-100

#1C2222

black

#000000

white

#ffffff

blue-10

#EAF0F8

blue-20

#DFE8F4

blue-30

#C0D1E9

blue-40

#8BABD6

blue-50

#4176BC

blue-60

#2C67B5

blue-70

#285DA3

blue-80 (was blue-darkest)

#235291

blue-90

#1A3E6D

blue-100

#122948

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

#EBF7F6

green-20

#D6EFEC

green-30

#ADDFD9

green-40

#84D0C6

green-50

#5BC0B3

green-60

#32B0A0

green-70

#2D9E90

green-80

#237C70

green-90

#1E6A60

green-100

#144640

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

#FFEEE8

orange-20

#FAE5DE

orange-30

#F5CABD

orange-40

#EFB09C

orange-50

#EA957B

orange-60

#E57B5A

orange-70

#CE6F51

orange-80

#B76248

orange-90

#A0563F

orange-100

#733E2D

red-10

#F9E9EC

red-20

#F4D3D8

red-30

#E9A7B2

red-40

#DD7A8B

red-50

#D24E65

red-60

#C7223E

red-70

#B31F38

red-80

#9F1B32

red-90

#771425

red-100

#500E19

brown-10

#FBF8F7

brown-20

#F0EAE1

brown-30

#E2D5C2

brown-40

#CCB695

brown-50

#C5AB85

brown-60

#B69667

brown-70

#A4875D

brown-80

#7F6948

brown-90

#5B4B34

brown-100

#493C29

gray-10

#F4F4F4

gray-20

#EBECEC

gray-30

#DEDFDF

gray-40

#C4C4C4

gray-50

#A7AAAA

gray-60

#7B8080

gray-70

#656B6B

gray-80 (was gray-dark-1)

#394040

gray-90

#232B2B

gray-100

#1C2222

black

#000000

white

#ffffff

Is this page helpful?