About Polaris
Polaris, Shopify’s design system, ships semantic color tokens such as --p-color-brand-* across surface, text, and border roles, with a full light and dark scale.
How to use
Use Polaris tokens instead of raw hex to keep merchandising UIs consistent. The token scale spans 1 to 16 for fine-grained emphasis control.
Official documentation ↗
Azure
#51C0FF
Shades
1 #FBF 2 #F2F 3 #EAF 4 #E0F 5 #D5E 6 #CAE 7 #C0E 8 #A8D 9 #91D 10 #51C 11 #009 12 #007 13 #006 14 #005 15 #003 16 #002
Blue
#97ADFF
Shades
1 #FCF 2 #F6F 3 #F0F 4 #EAE 5 #E2E 6 #DBE 7 #D5D 8 #C5D 9 #BAC 10 #97A 11 #418 12 #007 13 #005 14 #004 15 #002 16 #001
Teal
#1EC7BC
Shades
1 #F8F 2 #E8F 3 #D7F 4 #C3F 5 #AAF 6 #89F 7 #70F 8 #5AE 9 #2CE 10 #1EC 11 #00A 12 #128 13 #0C6 14 #0C5 15 #033 16 #062
Green
#18BF79
Shades
1 #FAF 2 #E6F 3 #CDF 4 #AFF 5 #92F 6 #6EF 7 #52F 8 #2CE 9 #11D 10 #18B 11 #0D9 12 #047 13 #035 14 #014 15 #073 16 #022
Lime
#20CF27
Shades
1 #FAF 2 #E4F 3 #D0F 4 #BBF 5 #9DF 6 #77F 7 #38F 8 #28F 9 #25E 10 #20C 11 #18A 12 #118 13 #0C7 14 #0B5 15 #033 16 #032
Yellow
#C5B200
Shades
1 #FFF 2 #FFF 3 #FFF 4 #FFE 5 #FFE 6 #FFE 7 #F7D 8 #EAD 9 #E1C 10 #C5B 11 #998 12 #827 13 #695 14 #4F4 15 #332 16 #1F1
Orange
#E5A500
Shades
1 #FFF 2 #FFF 3 #FFF 4 #FFE 5 #FFE 6 #FFD 7 #FFD 8 #FFC 9 #FFB 10 #E5A 11 #B28 12 #956 13 #7C5 14 #5E4 15 #412 16 #251
Red
#F78086
Shades
1 #FFF 2 #FFF 3 #FFE 4 #FEE 5 #FEE 6 #FED 7 #FED 8 #FEC 9 #FDA 10 #F78 11 #E22 12 #C70 13 #A30 14 #8E0 15 #5F0 16 #2F0
Magenta
#F68DF6
Shades
1 #FFF 2 #FFF 3 #FDE 4 #FEE 5 #FCD 6 #FBD 7 #FBC 8 #F9B 9 #F8B 10 #F68 11 #E15 12 #C53 13 #9F2 14 #791 15 #561 16 #340
Purple
#AA95FF
Shades
1 #FDF 2 #F8F 3 #F3F 4 #EFE 5 #E9E 6 #E4D 7 #DFD 8 #D4C 9 #C7B 10 #AA9 11 #947 12 #805 13 #712 14 #570 15 #3B0 16 #1C0
Rose
#FE8EB1
Shades
1 #FFF 2 #FFF 3 #FFE 4 #FFE 5 #FFE 6 #FFD 7 #FED 8 #FEC 9 #FEB 10 #FE8 11 #FD4 12 #E30 13 #B90 14 #8D0 15 #640 16 #3E0
Gray
#CCCCCC
Shades
1 #FFF 2 #FDF 3 #FAF 4 #F7F 5 #F3F 6 #F1F 7 #EBE 8 #E3E 9 #D4D 10 #CCC 11 #B5B 12 #8A8 13 #616 14 #4A4 15 #303 16 #1A1
No matching colors
Source: Shopify Polaris · polaris-tokens 9.4.2
