← Palettes · [email protected]

Shopify Polaris

The Shopify Polaris color palette as shipped by `@shopify/polaris-tokens`. Thirteen base color scales (gray, azure, blue, cyan, green, lime, magenta, orange, purple, red, rose, teal, yellow) each at 16 stops (1..16) where 1 is the lightest and 16 the deepest. Plus alpha-only scales for black and white at 16 stops apiece. The light theme is the Polaris base theme; the dark theme overrides selected role values to invert the canvas. Role mappings are derived from the canonical `themes/base/color.ts` (light) and `themes/dark.ts` (dark) sources in polaris-tokens.

218 swatches 16 light roles 16 dark roles design-systemshopifypolarisrole-based

Swatches

gray

gray-1

#FFFFFF

gray-2

#FDFDFD

gray-3

#FAFAFA

gray-4

#F7F7F7

gray-5

#F3F3F3

gray-6

#F1F1F1

gray-7

#EBEBEB

gray-8

#E3E3E3

gray-9

#D4D4D4

gray-10

#CCCCCC

gray-11

#B5B5B5

gray-12

#8A8A8A

gray-13

#616161

gray-14

#4A4A4A

gray-15

#303030

gray-16

#1A1A1A

azure

azure-1

#FBFDFF

azure-2

#F2F9FF

azure-3

#EAF4FF

azure-4

#E0F0FF

azure-5

#D5EBFF

azure-6

#CAE6FF

azure-7

#C0E1FF

azure-8

#A8D8FF

azure-9

#91D0FF

azure-10

#51C0FF

azure-11

#0094D5

azure-12

#007CB4

azure-13

#00679B

azure-14

#00527C

azure-15

#003A5A

azure-16

#002133

blue

blue-1

#FCFDFF

blue-2

#F6F8FF

blue-3

#F0F2FF

blue-4

#EAEDFF

blue-5

#E2E7FF

blue-6

#DBE1FF

blue-7

#D5DCFF

blue-8

#C5D0FF

blue-9

#BAC7FF

blue-10

#97ADFF

blue-11

#4188FF

blue-12

#0071E9

blue-13

#005BD3

blue-14

#004299

blue-15

#002E6A

blue-16

#001633

cyan

cyan-1

#FAFFFE

cyan-2

#E7FCF8

cyan-3

#D7FBF3

cyan-4

#C0F9EF

cyan-5

#A5F7E9

cyan-6

#90F4E3

cyan-7

#92EDDE

cyan-8

#82E3D1

cyan-9

#74DBC8

cyan-10

#17C7A7

cyan-11

#13A389

cyan-12

#0E8470

cyan-13

#086B5A

cyan-14

#095346

cyan-15

#06382F

cyan-16

#05241E

green

green-1

#FAFFFB

green-2

#E6FEEA

green-3

#CDFED4

green-4

#AFFEBF

green-5

#92FCAC

green-6

#6EF799

green-7

#52F490

green-8

#2CED83

green-9

#11DF7B

green-10

#18BF79

green-11

#0D9C6A

green-12

#047B5D

green-13

#035E4C

green-14

#014B40

green-15

#073630

green-16

#022622

lime

lime-1

#FAFFFA

lime-2

#E4FFE5

lime-3

#D0FFD1

lime-4

#BBFEBE

lime-5

#9DFEA0

lime-6

#77FE7A

lime-7

#38FE3E

lime-8

#28F22F

lime-9

#25E82B

lime-10

#20CF27

lime-11

#18A81D

lime-12

#118715

lime-13

#0C710F

lime-14

#0B550D

lime-15

#033D05

lime-16

#032104

magenta

magenta-1

#FFFDFF

magenta-2

#FFF5FF

magenta-3

#FDEFFD

magenta-4

#FEE7FE

magenta-5

#FCDFFC

magenta-6

#FBD7FB

magenta-7

#FBCFFB

magenta-8

#F9BEF9

magenta-9

#F8B1F8

magenta-10

#F68DF6

magenta-11

#E156E1

magenta-12

#C530C5

magenta-13

#9F269F

magenta-14

#791A79

magenta-15

#561056

magenta-16

#340634

orange

orange-1

#FFFDFA

orange-2

#FFF7EE

orange-3

#FFF1E3

orange-4

#FFEBD5

orange-5

#FFE4C6

orange-6

#FFDDB6

orange-7

#FFD6A4

orange-8

#FFC879

orange-9

#FFB800

orange-10

#E5A500

orange-11

#B28400

orange-12

#956F00

orange-13

#7C5800

orange-14

#5E4200

orange-15

#412D00

orange-16

#251A00

purple

purple-1

#FDFDFF

purple-2

#F8F7FF

purple-3

#F3F1FF

purple-4

#EFECFF

purple-5

#E9E5FF

purple-6

#E4DEFF

purple-7

#DFD9FF

purple-8

#D4CCFF

purple-9

#C7BCFF

purple-10

#AA95FF

purple-11

#9474FF

purple-12

#8051FF

purple-13

#7126FF

purple-14

#5700D1

purple-15

#3B0093

purple-16

#1C004F

red

red-1

#FFFAFB

red-2

#FFF6F8

red-3

#FFECEF

red-4

#FEE8EB

red-5

#FEE1E6

red-6

#FED9DF

red-7

#FED1D7

red-8

#FEC1C7

red-9

#FDACB1

red-10

#F78086

red-11

#E22C38

red-12

#C70A24

red-13

#A30A24

red-14

#8E0B21

red-15

#5F0716

red-16

#2F040B

rose

rose-1

#FFFDFD

rose-2

#FFF6F8

rose-3

#FFEFF3

rose-4

#FFE8EE

rose-5

#FFE1E8

rose-6

#FFD9E3

rose-7

#FED1DD

rose-8

#FEC1D2

rose-9

#FEB5CA

rose-10

#FE8EB1

rose-11

#FD4B92

rose-12

#E30C76

rose-13

#B9075F

rose-14

#8D0448

rose-15

#640231

rose-16

#3E011C

teal

teal-1

#F8FFFE

teal-2

#E8FCFA

teal-3

#D7FAF7

teal-4

#C3F7F2

teal-5

#AAF6EF

teal-6

#89F5EC

teal-7

#70F0E5

teal-8

#5AE6DB

teal-9

#2CE0D4

teal-10

#1EC7BC

teal-11

#00A198

teal-12

#12837C

teal-13

#0C6A64

teal-14

#0C534F

teal-15

#033C39

teal-16

#062C29

yellow

yellow-1

#FFFDF6

yellow-2

#FFF8DB

yellow-3

#FFF4BF

yellow-4

#FFEF9D

yellow-5

#FFEB78

yellow-6

#FFE600

yellow-7

#F7DF00

yellow-8

#EAD300

yellow-9

#E1CB00

yellow-10

#C5B200

yellow-11

#998A00

yellow-12

#827500

yellow-13

#695F00

yellow-14

#4F4700

yellow-15

#332E00

yellow-16

#1F1C00

black-alpha

black-alpha-5

#0000000D

black-alpha-7

#00000014

black-alpha-11

#0000004A

white-alpha

white-alpha-5

#FFFFFF0D

white-alpha-6

#FFFFFF0F

white-alpha-7

#FFFFFF14

white-alpha-8

#FFFFFF1C

white-alpha-9

#FFFFFF24

white-alpha-10

#FFFFFF2B

white-alpha-11

#FFFFFF38

Mode role mappings

Light mode (16 roles)

accent → magenta-13

accent-hover → magenta-14

background → gray-6

border → gray-8

brand → green-13

error → red-13

primary → blue-13

primary-hover → blue-14

success → green-13

surface → gray-1

surface-elevated → gray-1

text-primary → gray-16

text-secondary → gray-13

text-tertiary → gray-12

warning → orange-13

warning-hover → orange-14

Dark mode (16 roles)

accent → magenta-11

accent-hover → magenta-10

background → gray-16

border → gray-14

brand → gray-1

error → red-10

primary → blue-11

primary-hover → blue-10

success → green-10

surface → gray-15

surface-elevated → gray-14

text-primary → gray-8

text-secondary → gray-11

text-tertiary → gray-14

warning → orange-9

warning-hover → orange-10

Provenance

Source: https://github.com/Shopify/polaris/blob/main/polaris-tokens/src/themes/base/color.ts
License: MIT
Attribution: Polaris Design System tokens, Copyright (c) Shopify Inc., licensed under MIT. Hex values converted from rgba() definitions in polaris-tokens/src/colors.ts; role mappings derived from polaris-tokens/src/themes/base/color.ts and themes/dark.ts.
Imported: 2026-05-17 (upstream version @shopify/[email protected])