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.

Taupe

22 tokens in light, 17 tokens in dark.

Backgrounds

0#FFFFFF

50#FFF8F3

100#FCEFE6

200

300

400

500#8A6F63

600

700

800

900#1F1411

950

surface.defaulttaupe.light.0via neutral.0#FFFFFFsurface.raisedtaupe.light.0via neutral.0#FFFFFFaction.secondarytaupe.light.0via neutral.0#FFFFFFsurface.canvastaupe.light.50via neutral.50#FFF8F3surface.sunkentaupe.light.100via neutral.100#FCEFE6action.secondary.hovertaupe.light.100via neutral.100#FCEFE6category.5.subtletaupe.light.100via neutral.100#FCEFE6disabled.surfacetaupe.light.100via neutral.100#FCEFE6category.5taupe.light.500via neutral.500#8A6F63surface.inversetaupe.light.900via neutral.900#1F1411

Edges and rings

0

50

100

200#F2DCCF

300

400

500#8A6F63

600

700

800

900

950

border.defaulttaupe.light.200via neutral.200#F2DCCFdisabled.bordertaupe.light.200via neutral.200#F2DCCFborder.strongtaupe.light.500via neutral.500#8A6F63

Text

0#FFFFFFAa

50

100

200

300

400

500#8A6F63Aa

600#6B544AAa

700#4D3A33Aa

800

900#1F1411Aa

950

text.inversetaupe.light.0#FFFFFFtext.on-actiontaupe.light.0#FFFFFFtext.on-dangertaupe.light.0#FFFFFFtext.on-darktaupe.light.0#FFFFFFdisabled.texttaupe.light.500via neutral.500#8A6F63text.mutedtaupe.light.600via neutral.600#6B544Atext.secondarytaupe.light.700via neutral.700#4D3A33text.primarytaupe.light.900via neutral.900#1F1411text.on-lighttaupe.light.900#1F1411

Backgrounds

0#120B09

50#1F1411

100#33241F

200

300

400

500

600

700#F2DCCF

800

900#FFF8F3

950

surface.canvastaupe.dark.0via neutral.0#120B09surface.defaulttaupe.dark.50via neutral.50#1F1411action.secondarytaupe.dark.50via neutral.50#1F1411surface.raisedtaupe.dark.100via neutral.100#33241Fsurface.sunkentaupe.dark.100via neutral.100#33241Faction.secondary.hovertaupe.dark.100via neutral.100#33241Fcategory.5.subtletaupe.dark.100via neutral.100#33241Fdisabled.surfacetaupe.dark.100via neutral.100#33241Fcategory.5taupe.dark.700via neutral.700#F2DCCFsurface.inversetaupe.dark.900via neutral.900#FFF8F3

Edges and rings

0

50

100#33241F

200#4D3A33

300

400#B5988A

500

600

700

800

900

950

border.defaulttaupe.dark.100via neutral.100#33241Fdisabled.bordertaupe.dark.200via neutral.200#4D3A33border.strongtaupe.dark.400via neutral.400#B5988A

Text

0

50

100

200

300

400#B5988AAa

500#E2C4B3Aa

600

700

800

900#FFF8F3Aa

950

text.mutedtaupe.dark.400via neutral.400#B5988Atext.secondarytaupe.dark.500via neutral.500#E2C4B3disabled.texttaupe.dark.500via neutral.500#E2C4B3text.primarytaupe.dark.900via neutral.900#FFF8F3

From the light scale, fixed colors

text.inversetaupe.light.900#1F1411text.on-actiontaupe.light.900#1F1411text.on-dangertaupe.light.900#1F1411text.on-lighttaupe.light.900#1F1411text.on-darktaupe.light.0#FFFFFF

Pink

8 tokens in light, 8 tokens in dark.

Backgrounds

50

100#FFEAF0

200

300

400

500

600#D61F7A

700#A6025B

800

900

950

surface.selectedpink.light.100#FFEAF0category.1.subtlepink.light.100#FFEAF0action.primarypink.light.600#D61F7Acategory.1pink.light.600#D61F7Aaction.primary.hoverpink.light.700#A6025B

Edges and rings

50

100

200

300

400

500

600#D61F7A

700

800

900

950

border.focuspink.light.600#D61F7Aborder.selectedpink.light.600#D61F7A

Text

50

100

200

300

400

500

600

700#A6025BAa

800

900

950

text.linkpink.light.700#A6025B

Backgrounds

50

100#451731

200

300

400

500

600#F59ACA

700#FBB4D8

800

900

950

surface.selectedpink.dark.100#451731category.1.subtlepink.dark.100#451731action.primarypink.dark.600#F59ACAcategory.1pink.dark.600#F59ACAaction.primary.hoverpink.dark.700#FBB4D8

Edges and rings

50

100

200

300

400

500

600#F59ACA

700

800

900

950

border.focuspink.dark.600#F59ACAborder.selectedpink.dark.600#F59ACA

Text

50

100

200

300

400

500

600

700#FBB4D8Aa

800

900

950

text.linkpink.dark.700#FBB4D8

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#013118

200

300

400

500

600#5CC283

700

800

900

950

status.success.subtlegreen.dark.100#013118category.3.subtlegreen.dark.100#013118category.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#3B2701

200

300

400

500

600#F2B84B

700

800

900

950

status.warning.subtleamber.dark.100#3B2701category.4.subtleamber.dark.100#3B2701category.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#481316

200

300

400

500

600#F28B8B

700#FAA9A8

800

900

950

status.danger.subtlered.dark.100#481316action.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

Blue

6 tokens in light, 4 tokens in dark.

Backgrounds

50

100#D3E4FF

200

300

400

500

600#083C93

700

800

900

950

status.info.subtleblue.light.100#D3E4FFcategory.2.subtleblue.light.100#D3E4FFcategory.2blue.light.600#083C93

Edges and rings

50

100

200

300

400

500

600#083C93

700

800

900

950

status.infoblue.light.600#083C93

Text

50

100#D3E4FFAa

200

300

400

500

600

700

800#001A4EAa

900

950

text.info-on-darkblue.light.100#D3E4FFtext.info-on-lightblue.light.800#001A4E

Backgrounds

50

100#13284B

200

300

400

500

600#8AB4F8

700

800

900

950

status.info.subtleblue.dark.100#13284Bcategory.2.subtleblue.dark.100#13284Bcategory.2blue.dark.600#8AB4F8

Edges and rings

50

100

200

300

400

500

600#8AB4F8

700

800

900

950

status.infoblue.dark.600#8AB4F8

From the light scale, fixed colors

text.info-on-lightblue.light.800#001A4Etext.info-on-darkblue.light.100#D3E4FF

Every color

color.taupe.light

Primitive	Value	Sample	Used by
color.taupe.light.0	#FFFFFF		color.text.on-dark (every mode) color.neutral.0 (light)
color.taupe.light.50	#FFF8F3		color.neutral.50 (light)
color.taupe.light.100	#FCEFE6		color.neutral.100 (light)
color.taupe.light.200	#F2DCCF		color.neutral.200 (light)
color.taupe.light.300	#E2C4B3		color.neutral.300 (light)
color.taupe.light.400	#B5988A		color.neutral.400 (light)
color.taupe.light.500	#8A6F63		color.neutral.500 (light)
color.taupe.light.600	#6B544A		color.neutral.600 (light)
color.taupe.light.700	#4D3A33		color.neutral.700 (light)
color.taupe.light.800	#33241F		color.neutral.800 (light)
color.taupe.light.900	#1F1411		color.text.on-light (every mode) color.neutral.900 (light)
color.taupe.light.950	#120B09		color.neutral.950 (light)

color.taupe.dark

Primitive	Value	Sample	Used by
color.taupe.dark.0	#120B09		color.neutral.0 (dark)
color.taupe.dark.50	#1F1411		color.neutral.50 (dark)
color.taupe.dark.100	#33241F		color.neutral.100 (dark)
color.taupe.dark.200	#4D3A33		color.neutral.200 (dark)
color.taupe.dark.300	#8A6F63		color.neutral.300 (dark)
color.taupe.dark.400	#B5988A		color.neutral.400 (dark)
color.taupe.dark.500	#E2C4B3		color.neutral.500 (dark)
color.taupe.dark.600	#EAD0C1		color.neutral.600 (dark)
color.taupe.dark.700	#F2DCCF		color.neutral.700 (dark)
color.taupe.dark.800	#FCEFE6		color.neutral.800 (dark)
color.taupe.dark.900	#FFF8F3		color.neutral.900 (dark)
color.taupe.dark.950	#FFFFFF		color.neutral.950 (dark)

color.pink.light

Primitive	Value	Sample	Used by
color.pink.light.50	#FEF8FA		Not used yet
color.pink.light.100	#FFEAF0		color.surface.selected (light) color.category.1.subtle (light)
color.pink.light.200	#FED9E4		Not used yet
color.pink.light.300	#FFCBDB		Not used yet
color.pink.light.400	#FE8BB5		Not used yet
color.pink.light.500	#E64A8D		Not used yet
color.pink.light.600	#D61F7A		color.border.focus (light) color.border.selected (light) color.action.primary (light) color.category.1 (light)
color.pink.light.700	#A6025B		color.text.link (light) color.action.primary.hover (light)
color.pink.light.800	#73013E		Not used yet
color.pink.light.900	#4A0025		Not used yet
color.pink.light.950	#24000F		Not used yet

color.pink.dark

Primitive	Value	Sample	Used by
color.pink.dark.50	#310821		Not used yet
color.pink.dark.100	#451731		color.surface.selected (dark) color.category.1.subtle (dark)
color.pink.dark.200	#5F2A47		Not used yet
color.pink.dark.300	#7C4061		Not used yet
color.pink.dark.400	#9F5A7F		Not used yet
color.pink.dark.500	#C676A1		Not used yet
color.pink.dark.600	#F59ACA		color.border.focus (dark) color.border.selected (dark) color.action.primary (dark) color.category.1 (dark)
color.pink.dark.700	#FBB4D8		color.text.link (dark) color.action.primary.hover (dark)
color.pink.dark.800	#FEC9E3		Not used yet
color.pink.dark.900	#FFDDED		Not used yet
color.pink.dark.950	#FEF1F7		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	#01210E		Not used yet
color.green.dark.100	#013118		color.status.success.subtle (dark) color.category.3.subtle (dark)
color.green.dark.200	#014724		Not used yet
color.green.dark.300	#0E5F35		Not used yet
color.green.dark.400	#287C4C		Not used yet
color.green.dark.500	#409B64		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	#261901		Not used yet
color.amber.dark.100	#3B2701		color.status.warning.subtle (dark) color.category.4.subtle (dark)
color.amber.dark.200	#563C00		Not used yet
color.amber.dark.300	#765301		Not used yet
color.amber.dark.400	#9C6F08		Not used yet
color.amber.dark.500	#C3902B		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	#35060A		Not used yet
color.red.dark.100	#481316		color.status.danger.subtle (dark)
color.red.dark.200	#612527		Not used yet
color.red.dark.300	#7D393A		Not used yet
color.red.dark.400	#9F5051		Not used yet
color.red.dark.500	#C46B6B		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.blue.light

Primitive	Value	Sample	Used by
color.blue.light.50	#F4F7FE		Not used yet
color.blue.light.100	#D3E4FF		color.text.info-on-dark (every mode) color.status.info.subtle (light) color.category.2.subtle (light)
color.blue.light.200	#C3D9FE		Not used yet
color.blue.light.300	#B2CCF8		Not used yet
color.blue.light.400	#6F95D6		Not used yet
color.blue.light.500	#2C5AAA		Not used yet
color.blue.light.600	#083C93		color.status.info (light) color.category.2 (light)
color.blue.light.700	#012A72		Not used yet
color.blue.light.800	#001A4E		color.text.info-on-light (every mode)
color.blue.light.900	#000D31		Not used yet
color.blue.light.950	#000316		Not used yet

color.blue.dark

Primitive	Value	Sample	Used by
color.blue.dark.50	#071938		Not used yet
color.blue.dark.100	#13284B		color.status.info.subtle (dark) color.category.2.subtle (dark)
color.blue.dark.200	#243C64		Not used yet
color.blue.dark.300	#385481		Not used yet
color.blue.dark.400	#4F6FA3		Not used yet
color.blue.dark.500	#6A8EC9		Not used yet
color.blue.dark.600	#8AB4F8		color.status.info (dark) color.category.2 (dark)
color.blue.dark.700	#A7C8FC		Not used yet
color.blue.dark.800	#C1D8FE		Not used yet
color.blue.dark.900	#D9E7FE		Not used yet
color.blue.dark.950	#F0F6FF		Not used yet