Color

136 primitives, 54 used.

Each color is a whole scale in each theme. The lanes show what its tokens paint: backgrounds, edges and rings, and text. A filled step is in use; an empty slot waits for one. Under each scale, one row per token: its color, its name, the step it points at and the value. Point at a row to find its step. A row links to the token's guidance in Foundations.

Gray

22 tokens in light, 17 tokens in dark.

Backgrounds

0#FFFFFF

50#F7F7F7

100#EDEDED

200

300

400

500#595959

600

700

800

900#141414

950

surface.defaultgray.light.0via neutral.0#FFFFFFsurface.raisedgray.light.0via neutral.0#FFFFFFaction.secondarygray.light.0via neutral.0#FFFFFFsurface.canvasgray.light.50via neutral.50#F7F7F7surface.sunkengray.light.100via neutral.100#EDEDEDaction.secondary.hovergray.light.100via neutral.100#EDEDEDcategory.5.subtlegray.light.100via neutral.100#EDEDEDdisabled.surfacegray.light.100via neutral.100#EDEDEDcategory.5gray.light.500via neutral.500#595959surface.inversegray.light.900via neutral.900#141414

Edges and rings

0

50

100

200#D6D6D6

300

400

500#595959

600

700

800

900

950

border.defaultgray.light.200via neutral.200#D6D6D6disabled.bordergray.light.200via neutral.200#D6D6D6border.stronggray.light.500via neutral.500#595959

Text

0#FFFFFFAa

50

100

200

300

400

500#595959Aa

600

700#333333Aa

800

900#141414Aa

950

text.inversegray.light.0#FFFFFFtext.on-actiongray.light.0#FFFFFFtext.on-dangergray.light.0#FFFFFFtext.on-darkgray.light.0#FFFFFFtext.mutedgray.light.500via neutral.500#595959disabled.textgray.light.500via neutral.500#595959text.secondarygray.light.700via neutral.700#333333text.primarygray.light.900via neutral.900#141414text.on-lightgray.light.900#141414

Backgrounds

0#0A0A0A

50#141414

100#222222

200

300

400

500

600

700#D6D6D6

800

900#F7F7F7

950

surface.canvasgray.dark.0via neutral.0#0A0A0Asurface.defaultgray.dark.50via neutral.50#141414action.secondarygray.dark.50via neutral.50#141414surface.raisedgray.dark.100via neutral.100#222222surface.sunkengray.dark.100via neutral.100#222222action.secondary.hovergray.dark.100via neutral.100#222222category.5.subtlegray.dark.100via neutral.100#222222disabled.surfacegray.dark.100via neutral.100#222222category.5gray.dark.700via neutral.700#D6D6D6surface.inversegray.dark.900via neutral.900#F7F7F7

Edges and rings

0

50

100#222222

200#333333

300

400

500#949494

600

700

800

900

950

border.defaultgray.dark.100via neutral.100#222222disabled.bordergray.dark.200via neutral.200#333333border.stronggray.dark.500via neutral.500#949494

Text

0

50

100

200

300

400

500#949494Aa

600#B4B4B4Aa

700

800

900#F7F7F7Aa

950

text.mutedgray.dark.500via neutral.500#949494disabled.textgray.dark.500via neutral.500#949494text.secondarygray.dark.600via neutral.600#B4B4B4text.primarygray.dark.900via neutral.900#F7F7F7

From the light scale, fixed colors

text.inversegray.light.900#141414text.on-actiongray.light.900#141414text.on-dangergray.light.900#141414text.on-lightgray.light.900#141414text.on-darkgray.light.0#FFFFFF

Blue

8 tokens in light, 8 tokens in dark.

Backgrounds

50

100#E2EDFF

200

300

400

500

600#0B4FC0

700#013895

800

900

950

surface.selectedblue.light.100#E2EDFFcategory.1.subtleblue.light.100#E2EDFFaction.primaryblue.light.600#0B4FC0category.1blue.light.600#0B4FC0action.primary.hoverblue.light.700#013895

Edges and rings

50

100

200

300

400

500

600#0B4FC0

700

800

900

950

border.focusblue.light.600#0B4FC0border.selectedblue.light.600#0B4FC0

Text

50

100

200

300

400

500

600

700#013895Aa

800

900

950

text.linkblue.light.700#013895

Backgrounds

50

100#102547

200

300

400

500

600#8AB4F8

700#A7C8FC

800

900

950

surface.selectedblue.dark.100#102547category.1.subtleblue.dark.100#102547action.primaryblue.dark.600#8AB4F8category.1blue.dark.600#8AB4F8action.primary.hoverblue.dark.700#A7C8FC

Edges and rings

50

100

200

300

400

500

600#8AB4F8

700

800

900

950

border.focusblue.dark.600#8AB4F8border.selectedblue.dark.600#8AB4F8

Text

50

100

200

300

400

500

600

700#A7C8FCAa

800

900

950

text.linkblue.dark.700#A7C8FC

Green

6 tokens in light, 4 tokens in dark.

Backgrounds

50

100#DBF7DF

200

300

400

500

600#1F7A3A

700

800

900

950

status.success.subtlegreen.light.100#DBF7DFcategory.3.subtlegreen.light.100#DBF7DFcategory.3green.light.600#1F7A3A

Edges and rings

50

100

200

300

400

500

600#1F7A3A

700

800

900

950

status.successgreen.light.600#1F7A3A

Text

50

100#DBF7DFAa

200

300

400

500

600

700

800#023E17Aa

900

950

text.success-on-darkgreen.light.100#DBF7DFtext.success-on-lightgreen.light.800#023E17

Backgrounds

50

100#012E16

200

300

400

500

600#5CC283

700

800

900

950

status.success.subtlegreen.dark.100#012E16category.3.subtlegreen.dark.100#012E16category.3green.dark.600#5CC283

Edges and rings

50

100

200

300

400

500

600#5CC283

700

800

900

950

status.successgreen.dark.600#5CC283

From the light scale, fixed colors

text.success-on-lightgreen.light.800#023E17text.success-on-darkgreen.light.100#DBF7DF

Amber

6 tokens in light, 4 tokens in dark.

Backgrounds

50

100#FEE8CF

200

300

400

500

600#8A5600

700

800

900

950

status.warning.subtleamber.light.100#FEE8CFcategory.4.subtleamber.light.100#FEE8CFcategory.4amber.light.600#8A5600

Edges and rings

50

100

200

300

400

500

600#8A5600

700

800

900

950

status.warningamber.light.600#8A5600

Text

50

100#FEE8CFAa

200

300

400

500

600

700

800#462A02Aa

900

950

text.warning-on-darkamber.light.100#FEE8CFtext.warning-on-lightamber.light.800#462A02

Backgrounds

50

100#372500

200

300

400

500

600#F2B84B

700

800

900

950

status.warning.subtleamber.dark.100#372500category.4.subtleamber.dark.100#372500category.4amber.dark.600#F2B84B

Edges and rings

50

100

200

300

400

500

600#F2B84B

700

800

900

950

status.warningamber.dark.600#F2B84B

From the light scale, fixed colors

text.warning-on-lightamber.light.800#462A02text.warning-on-darkamber.light.100#FEE8CF

Red

6 tokens in light, 4 tokens in dark.

Backgrounds

50

100#FFDBD8

200

300

400

500

600#C42B2B

700#981519

800

900

950

status.danger.subtlered.light.100#FFDBD8action.dangerred.light.600#C42B2Baction.danger.hoverred.light.700#981519

Edges and rings

50

100

200

300

400

500

600#C42B2B

700

800

900

950

status.dangerred.light.600#C42B2B

Text

50

100#FFDBD8Aa

200

300

400

500

600

700

800#6D0008Aa

900

950

text.danger-on-darkred.light.100#FFDBD8text.danger-on-lightred.light.800#6D0008

Backgrounds

50

100#451014

200

300

400

500

600#F28B8B

700#FAA9A8

800

900

950

status.danger.subtlered.dark.100#451014action.dangerred.dark.600#F28B8Baction.danger.hoverred.dark.700#FAA9A8

Edges and rings

50

100

200

300

400

500

600#F28B8B

700

800

900

950

status.dangerred.dark.600#F28B8B

From the light scale, fixed colors

text.danger-on-lightred.light.800#6D0008text.danger-on-darkred.light.100#FFDBD8

Black

1 tokens in light, 1 tokens in dark.

Backgrounds

scrim#0000008C

surface.scrimblack.light.scrim#0000008C

Backgrounds

scrim#000000B3

surface.scrimblack.dark.scrim#000000B3

Teal

6 tokens in light, 4 tokens in dark.

Backgrounds

50

100#CDF4F0

200

300

400

500

600#0B5B55

700

800

900

950

status.info.subtleteal.light.100#CDF4F0category.2.subtleteal.light.100#CDF4F0category.2teal.light.600#0B5B55

Edges and rings

50

100

200

300

400

500

600#0B5B55

700

800

900

950

status.infoteal.light.600#0B5B55

Text

50

100#CDF4F0Aa

200

300

400

500

600

700

800#022C29Aa

900

950

text.info-on-darkteal.light.100#CDF4F0text.info-on-lightteal.light.800#022C29

Backgrounds

50

100#012F2C

200

300

400

500

600#7FCFC6

700

800

900

950

status.info.subtleteal.dark.100#012F2Ccategory.2.subtleteal.dark.100#012F2Ccategory.2teal.dark.600#7FCFC6

Edges and rings

50

100

200

300

400

500

600#7FCFC6

700

800

900

950

status.infoteal.dark.600#7FCFC6

From the light scale, fixed colors

text.info-on-lightteal.light.800#022C29text.info-on-darkteal.light.100#CDF4F0

Every color

color.gray.light

Primitive	Value	Sample	Used by
color.gray.light.0	#FFFFFF		color.text.on-dark (every mode) color.neutral.0 (light)
color.gray.light.50	#F7F7F7		color.neutral.50 (light)
color.gray.light.100	#EDEDED		color.neutral.100 (light)
color.gray.light.200	#D6D6D6		color.neutral.200 (light)
color.gray.light.300	#949494		color.neutral.300 (light)
color.gray.light.400	#767676		color.neutral.400 (light)
color.gray.light.500	#595959		color.neutral.500 (light)
color.gray.light.600	#464646		color.neutral.600 (light)
color.gray.light.700	#333333		color.neutral.700 (light)
color.gray.light.800	#222222		color.neutral.800 (light)
color.gray.light.900	#141414		color.text.on-light (every mode) color.neutral.900 (light)
color.gray.light.950	#0A0A0A		color.neutral.950 (light)

color.gray.dark

Primitive	Value	Sample	Used by
color.gray.dark.0	#0A0A0A		color.neutral.0 (dark)
color.gray.dark.50	#141414		color.neutral.50 (dark)
color.gray.dark.100	#222222		color.neutral.100 (dark)
color.gray.dark.200	#333333		color.neutral.200 (dark)
color.gray.dark.300	#595959		color.neutral.300 (dark)
color.gray.dark.400	#767676		color.neutral.400 (dark)
color.gray.dark.500	#949494		color.neutral.500 (dark)
color.gray.dark.600	#B4B4B4		color.neutral.600 (dark)
color.gray.dark.700	#D6D6D6		color.neutral.700 (dark)
color.gray.dark.800	#EDEDED		color.neutral.800 (dark)
color.gray.dark.900	#F7F7F7		color.neutral.900 (dark)
color.gray.dark.950	#FFFFFF		color.neutral.950 (dark)

color.blue.light

Primitive	Value	Sample	Used by
color.blue.light.50	#F5F8FE		Not used yet
color.blue.light.100	#E2EDFF		color.surface.selected (light) color.category.1.subtle (light)
color.blue.light.200	#CBDEFF		Not used yet
color.blue.light.300	#B8D3FF		Not used yet
color.blue.light.400	#73A2F3		Not used yet
color.blue.light.500	#316BD2		Not used yet
color.blue.light.600	#0B4FC0		color.border.focus (light) color.border.selected (light) color.action.primary (light) color.category.1 (light)
color.blue.light.700	#013895		color.text.link (light) color.action.primary.hover (light)
color.blue.light.800	#002567		Not used yet
color.blue.light.900	#001442		Not used yet
color.blue.light.950	#000620		Not used yet

color.blue.dark

Primitive	Value	Sample	Used by
color.blue.dark.50	#051634		Not used yet
color.blue.dark.100	#102547		color.surface.selected (dark) color.category.1.subtle (dark)
color.blue.dark.200	#223A61		Not used yet
color.blue.dark.300	#36527F		Not used yet
color.blue.dark.400	#4E6EA2		Not used yet
color.blue.dark.500	#698DC9		Not used yet
color.blue.dark.600	#8AB4F8		color.border.focus (dark) color.border.selected (dark) color.action.primary (dark) color.category.1 (dark)
color.blue.dark.700	#A7C8FC		color.text.link (dark) color.action.primary.hover (dark)
color.blue.dark.800	#C1D8FE		Not used yet
color.blue.dark.900	#D9E7FE		Not used yet
color.blue.dark.950	#F0F6FF		Not used yet

color.green.light

Primitive	Value	Sample	Used by
color.green.light.50	#F1FDF2		Not used yet
color.green.light.100	#DBF7DF		color.text.success-on-dark (every mode) color.status.success.subtle (light) color.category.3.subtle (light)
color.green.light.200	#CBE9CF		Not used yet
color.green.light.300	#BCE0C1		Not used yet
color.green.light.400	#82BA8B		Not used yet
color.green.light.500	#448F54		Not used yet
color.green.light.600	#1F7A3A		color.status.success (light) color.category.3 (light)
color.green.light.700	#0B5C27		Not used yet
color.green.light.800	#023E17		color.text.success-on-light (every mode)
color.green.light.900	#01260B		Not used yet
color.green.light.950	#001003		Not used yet

color.green.dark

Primitive	Value	Sample	Used by
color.green.dark.50	#001D0C		Not used yet
color.green.dark.100	#012E16		color.status.success.subtle (dark) color.category.3.subtle (dark)
color.green.dark.200	#004423		Not used yet
color.green.dark.300	#0A5D33		Not used yet
color.green.dark.400	#267A4A		Not used yet
color.green.dark.500	#3F9B64		Not used yet
color.green.dark.600	#5CC283		color.status.success (dark) color.category.3 (dark)
color.green.dark.700	#8AD3A2		Not used yet
color.green.dark.800	#ADE2BD		Not used yet
color.green.dark.900	#CBEFD5		Not used yet
color.green.dark.950	#E8FBED		Not used yet

color.amber.light

Primitive	Value	Sample	Used by
color.amber.light.50	#FFF7EF		Not used yet
color.amber.light.100	#FEE8CF		color.text.warning-on-dark (every mode) color.status.warning.subtle (light) color.category.4.subtle (light)
color.amber.light.200	#F1DBC3		Not used yet
color.amber.light.300	#EACFB3		Not used yet
color.amber.light.400	#C7A074		Not used yet
color.amber.light.500	#9E6E32		Not used yet
color.amber.light.600	#8A5600		color.status.warning (light) color.category.4 (light)
color.amber.light.700	#673F01		Not used yet
color.amber.light.800	#462A02		color.text.warning-on-light (every mode)
color.amber.light.900	#2B1800		Not used yet
color.amber.light.950	#130800		Not used yet

color.amber.dark

Primitive	Value	Sample	Used by
color.amber.dark.50	#231600		Not used yet
color.amber.dark.100	#372500		color.status.warning.subtle (dark) color.category.4.subtle (dark)
color.amber.dark.200	#533900		Not used yet
color.amber.dark.300	#735102		Not used yet
color.amber.dark.400	#9A6E04		Not used yet
color.amber.dark.500	#C28F2A		Not used yet
color.amber.dark.600	#F2B84B		color.status.warning (dark) color.category.4 (dark)
color.amber.dark.700	#F6CA7F		Not used yet
color.amber.dark.800	#FAD9A3		Not used yet
color.amber.dark.900	#FDE7C3		Not used yet
color.amber.dark.950	#FFF4E2		Not used yet

color.red.light

Primitive	Value	Sample	Used by
color.red.light.50	#FEF7F7		Not used yet
color.red.light.100	#FFDBD8		color.text.danger-on-dark (every mode) color.status.danger.subtle (light)
color.red.light.200	#FED7D2		Not used yet
color.red.light.300	#FEC8C2		Not used yet
color.red.light.400	#F68C82		Not used yet
color.red.light.500	#D64F48		Not used yet
color.red.light.600	#C42B2B		color.action.danger (light) color.status.danger (light)
color.red.light.700	#981519		color.action.danger.hover (light)
color.red.light.800	#6D0008		color.text.danger-on-light (every mode)
color.red.light.900	#450003		Not used yet
color.red.light.950	#210001		Not used yet

color.red.dark

Primitive	Value	Sample	Used by
color.red.dark.50	#320308		Not used yet
color.red.dark.100	#451014		color.status.danger.subtle (dark)
color.red.dark.200	#5E2225		Not used yet
color.red.dark.300	#7B3738		Not used yet
color.red.dark.400	#9E4F50		Not used yet
color.red.dark.500	#C46A6A		Not used yet
color.red.dark.600	#F28B8B		color.action.danger (dark) color.status.danger (dark)
color.red.dark.700	#FAA9A8		color.action.danger.hover (dark)
color.red.dark.800	#FEC3C1		Not used yet
color.red.dark.900	#FEDBDA		Not used yet
color.red.dark.950	#FEF2F1		Not used yet

color.black.light

Primitive	Value	Sample	Used by
color.black.light.scrim	#0000008C		color.surface.scrim (light)

color.black.dark

Primitive	Value	Sample	Used by
color.black.dark.scrim	#000000B3		color.surface.scrim (dark)

color.teal.light

Primitive	Value	Sample	Used by
color.teal.light.50	#F1FAF9		Not used yet
color.teal.light.100	#CDF4F0		color.text.info-on-dark (every mode) color.status.info.subtle (light) color.category.2.subtle (light)
color.teal.light.200	#C8E1DD		Not used yet
color.teal.light.300	#B8D5D1		Not used yet
color.teal.light.400	#79A6A0		Not used yet
color.teal.light.500	#36736D		Not used yet
color.teal.light.600	#0B5B55		color.status.info (light) color.category.2 (light)
color.teal.light.700	#02433F		Not used yet
color.teal.light.800	#022C29		color.text.info-on-light (every mode)
color.teal.light.900	#011A17		Not used yet
color.teal.light.950	#000907		Not used yet

color.teal.dark

Primitive	Value	Sample	Used by
color.teal.dark.50	#011E1B		Not used yet
color.teal.dark.100	#012F2C		color.status.info.subtle (dark) color.category.2.subtle (dark)
color.teal.dark.200	#104742		Not used yet
color.teal.dark.300	#27615B		Not used yet
color.teal.dark.400	#41817A		Not used yet
color.teal.dark.500	#5DA49C		Not used yet
color.teal.dark.600	#7FCFC6		color.status.info (dark) color.category.2 (dark)
color.teal.dark.700	#A1DCD4		Not used yet
color.teal.dark.800	#BCE6E1		Not used yet
color.teal.dark.900	#D3F0EC		Not used yet
color.teal.dark.950	#EAF9F7		Not used yet