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.

Stone

22 tokens in light, 17 tokens in dark.

Backgrounds

0#FFFFFF

50#FFFDF8

100#F6F2EA

200

300

400

500#7A7062

600

700

800

900#1F1B16

950

surface.defaultstone.light.0via neutral.0#FFFFFFsurface.raisedstone.light.0via neutral.0#FFFFFFaction.secondarystone.light.0via neutral.0#FFFFFFsurface.canvasstone.light.50via neutral.50#FFFDF8surface.sunkenstone.light.100via neutral.100#F6F2EAaction.secondary.hoverstone.light.100via neutral.100#F6F2EAcategory.5.subtlestone.light.100via neutral.100#F6F2EAdisabled.surfacestone.light.100via neutral.100#F6F2EAcategory.5stone.light.500via neutral.500#7A7062surface.inversestone.light.900via neutral.900#1F1B16

Edges and rings

0

50

100

200#E4DDD0

300

400

500#7A7062

600

700

800

900

950

border.defaultstone.light.200via neutral.200#E4DDD0disabled.borderstone.light.200via neutral.200#E4DDD0border.strongstone.light.500via neutral.500#7A7062

Text

0#FFFFFFAa

50

100

200

300

400

500#7A7062Aa

600#61594DAa

700#4A4339Aa

800

900#1F1B16Aa

950

text.inversestone.light.0#FFFFFFtext.on-actionstone.light.0#FFFFFFtext.on-dangerstone.light.0#FFFFFFtext.on-darkstone.light.0#FFFFFFdisabled.textstone.light.500via neutral.500#7A7062text.mutedstone.light.600via neutral.600#61594Dtext.secondarystone.light.700via neutral.700#4A4339text.primarystone.light.900via neutral.900#1F1B16text.on-lightstone.light.900#1F1B16

Backgrounds

0#14110D

50#1F1B16

100#2E2A24

200

300

400

500

600

700#E4DDD0

800

900#FFFDF8

950

surface.canvasstone.dark.0via neutral.0#14110Dsurface.defaultstone.dark.50via neutral.50#1F1B16action.secondarystone.dark.50via neutral.50#1F1B16surface.raisedstone.dark.100via neutral.100#2E2A24surface.sunkenstone.dark.100via neutral.100#2E2A24action.secondary.hoverstone.dark.100via neutral.100#2E2A24category.5.subtlestone.dark.100via neutral.100#2E2A24disabled.surfacestone.dark.100via neutral.100#2E2A24category.5stone.dark.700via neutral.700#E4DDD0surface.inversestone.dark.900via neutral.900#FFFDF8

Edges and rings

0

50

100#2E2A24

200#4A4339

300

400#A39A8B

500

600

700

800

900

950

border.defaultstone.dark.100via neutral.100#2E2A24disabled.borderstone.dark.200via neutral.200#4A4339border.strongstone.dark.400via neutral.400#A39A8B

Text

0

50

100

200

300

400#A39A8BAa

500#CFC6B6Aa

600

700

800

900#FFFDF8Aa

950

text.mutedstone.dark.400via neutral.400#A39A8Btext.secondarystone.dark.500via neutral.500#CFC6B6disabled.textstone.dark.500via neutral.500#CFC6B6text.primarystone.dark.900via neutral.900#FFFDF8

From the light scale, fixed colors

text.inversestone.light.900#1F1B16text.on-actionstone.light.900#1F1B16text.on-dangerstone.light.900#1F1B16text.on-lightstone.light.900#1F1B16text.on-darkstone.light.0#FFFFFF

Navy

8 tokens in light, 8 tokens in dark.

Backgrounds

50

100#E0E9F5

200

300

400

500

600#1E3A5F

700#122948

800

900

950

surface.selectednavy.light.100#E0E9F5category.1.subtlenavy.light.100#E0E9F5action.primarynavy.light.600#1E3A5Fcategory.1navy.light.600#1E3A5Faction.primary.hovernavy.light.700#122948

Edges and rings

50

100

200

300

400

500

600#1E3A5F

700

800

900

950

border.focusnavy.light.600#1E3A5Fborder.selectednavy.light.600#1E3A5F

Text

50

100

200

300

400

500

600

700#122948Aa

800

900

950

text.linknavy.light.700#122948

Backgrounds

50

100#202B3B

200

300

400

500

600#8FA6C4

700#ACBDD5

800

900

950

surface.selectednavy.dark.100#202B3Bcategory.1.subtlenavy.dark.100#202B3Baction.primarynavy.dark.600#8FA6C4category.1navy.dark.600#8FA6C4action.primary.hovernavy.dark.700#ACBDD5

Edges and rings

50

100

200

300

400

500

600#8FA6C4

700

800

900

950

border.focusnavy.dark.600#8FA6C4border.selectednavy.dark.600#8FA6C4

Text

50

100

200

300

400

500

600

700#ACBDD5Aa

800

900

950

text.linknavy.dark.700#ACBDD5

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#02351B

200

300

400

500

600#5CC283

700

800

900

950

status.success.subtlegreen.dark.100#02351Bcategory.3.subtlegreen.dark.100#02351Bcategory.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#402B00

200

300

400

500

600#F2B84B

700

800

900

950

status.warning.subtleamber.dark.100#402B00category.4.subtleamber.dark.100#402B00category.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#4D181A

200

300

400

500

600#F28B8B

700#FAA9A8

800

900

950

status.danger.subtlered.dark.100#4D181Aaction.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#172C4F

200

300

400

500

600#8AB4F8

700

800

900

950

status.info.subtleblue.dark.100#172C4Fcategory.2.subtleblue.dark.100#172C4Fcategory.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.stone.light

Primitive	Value	Sample	Used by
color.stone.light.0	#FFFFFF		color.text.on-dark (every mode) color.neutral.0 (light)
color.stone.light.50	#FFFDF8		color.neutral.50 (light)
color.stone.light.100	#F6F2EA		color.neutral.100 (light)
color.stone.light.200	#E4DDD0		color.neutral.200 (light)
color.stone.light.300	#CFC6B6		color.neutral.300 (light)
color.stone.light.400	#A39A8B		color.neutral.400 (light)
color.stone.light.500	#7A7062		color.neutral.500 (light)
color.stone.light.600	#61594D		color.neutral.600 (light)
color.stone.light.700	#4A4339		color.neutral.700 (light)
color.stone.light.800	#2E2A24		color.neutral.800 (light)
color.stone.light.900	#1F1B16		color.text.on-light (every mode) color.neutral.900 (light)
color.stone.light.950	#14110D		color.neutral.950 (light)

color.stone.dark

Primitive	Value	Sample	Used by
color.stone.dark.0	#14110D		color.neutral.0 (dark)
color.stone.dark.50	#1F1B16		color.neutral.50 (dark)
color.stone.dark.100	#2E2A24		color.neutral.100 (dark)
color.stone.dark.200	#4A4339		color.neutral.200 (dark)
color.stone.dark.300	#7A7062		color.neutral.300 (dark)
color.stone.dark.400	#A39A8B		color.neutral.400 (dark)
color.stone.dark.500	#CFC6B6		color.neutral.500 (dark)
color.stone.dark.600	#D9D1C3		color.neutral.600 (dark)
color.stone.dark.700	#E4DDD0		color.neutral.700 (dark)
color.stone.dark.800	#F6F2EA		color.neutral.800 (dark)
color.stone.dark.900	#FFFDF8		color.neutral.900 (dark)
color.stone.dark.950	#FFFFFF		color.neutral.950 (dark)

color.navy.light

Primitive	Value	Sample	Used by
color.navy.light.50	#F2F7FE		Not used yet
color.navy.light.100	#E0E9F5		color.surface.selected (light) color.category.1.subtle (light)
color.navy.light.200	#CAD7E8		Not used yet
color.navy.light.300	#BAC9DD		Not used yet
color.navy.light.400	#7B90AE		Not used yet
color.navy.light.500	#3B5679		Not used yet
color.navy.light.600	#1E3A5F		color.border.focus (light) color.border.selected (light) color.action.primary (light) color.category.1 (light)
color.navy.light.700	#122948		color.text.link (light) color.action.primary.hover (light)
color.navy.light.800	#081A32		Not used yet
color.navy.light.900	#020D1F		Not used yet
color.navy.light.950	#00030D		Not used yet

color.navy.dark

Primitive	Value	Sample	Used by
color.navy.dark.50	#141E2C		Not used yet
color.navy.dark.100	#202B3B		color.surface.selected (dark) color.category.1.subtle (dark)
color.navy.dark.200	#303D4F		Not used yet
color.navy.dark.300	#425266		Not used yet
color.navy.dark.400	#586A81		Not used yet
color.navy.dark.500	#71859F		Not used yet
color.navy.dark.600	#8FA6C4		color.border.focus (dark) color.border.selected (dark) color.action.primary (dark) color.category.1 (dark)
color.navy.dark.700	#ACBDD5		color.text.link (dark) color.action.primary.hover (dark)
color.navy.dark.800	#C4D1E3		Not used yet
color.navy.dark.900	#DBE4F0		Not used yet
color.navy.dark.950	#F1F6FC		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	#002611		Not used yet
color.green.dark.100	#02351B		color.status.success.subtle (dark) color.category.3.subtle (dark)
color.green.dark.200	#004B27		Not used yet
color.green.dark.300	#146338		Not used yet
color.green.dark.400	#2A7E4E		Not used yet
color.green.dark.500	#419D66		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	#2C1D01		Not used yet
color.amber.dark.100	#402B00		color.status.warning.subtle (dark) color.category.4.subtle (dark)
color.amber.dark.200	#5B3F02		Not used yet
color.amber.dark.300	#7A5602		Not used yet
color.amber.dark.400	#9E710E		Not used yet
color.amber.dark.500	#C4912D		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	#3A0A0F		Not used yet
color.red.dark.100	#4D181A		color.status.danger.subtle (dark)
color.red.dark.200	#65292B		Not used yet
color.red.dark.300	#813C3D		Not used yet
color.red.dark.400	#A25354		Not used yet
color.red.dark.500	#C66C6C		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	#0B1E3D		Not used yet
color.blue.dark.100	#172C4F		color.status.info.subtle (dark) color.category.2.subtle (dark)
color.blue.dark.200	#284068		Not used yet
color.blue.dark.300	#3B5784		Not used yet
color.blue.dark.400	#5172A6		Not used yet
color.blue.dark.500	#6B8FCB		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