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.

Slate

22 tokens in light, 17 tokens in dark.

Backgrounds

0#FFFFFF

50#F7F8FA

100#EEF1F5

200

300

400

500#6B7585

600

700

800

900#161B23

950

surface.defaultslate.light.0via neutral.0#FFFFFFsurface.raisedslate.light.0via neutral.0#FFFFFFaction.secondaryslate.light.0via neutral.0#FFFFFFsurface.canvasslate.light.50via neutral.50#F7F8FAsurface.sunkenslate.light.100via neutral.100#EEF1F5action.secondary.hoverslate.light.100via neutral.100#EEF1F5category.5.subtleslate.light.100via neutral.100#EEF1F5disabled.surfaceslate.light.100via neutral.100#EEF1F5category.5slate.light.500via neutral.500#6B7585surface.inverseslate.light.900via neutral.900#161B23

Edges and rings

0

50

100

200#DDE2EA

300

400

500#6B7585

600

700

800

900

950

border.defaultslate.light.200via neutral.200#DDE2EAdisabled.borderslate.light.200via neutral.200#DDE2EAborder.strongslate.light.500via neutral.500#6B7585

Text

0#FFFFFFAa

50

100

200

300

400

500#6B7585Aa

600#535D6DAa

700#3D4655Aa

800

900#161B23Aa

950

text.inverseslate.light.0#FFFFFFtext.on-actionslate.light.0#FFFFFFtext.on-dangerslate.light.0#FFFFFFtext.on-darkslate.light.0#FFFFFFdisabled.textslate.light.500via neutral.500#6B7585text.mutedslate.light.600via neutral.600#535D6Dtext.secondaryslate.light.700via neutral.700#3D4655text.primaryslate.light.900via neutral.900#161B23text.on-lightslate.light.900#161B23

Backgrounds

0#0D1117

50#161B23

100#262D38

200

300

400

500

600

700#DDE2EA

800

900#F7F8FA

950

surface.canvasslate.dark.0via neutral.0#0D1117surface.defaultslate.dark.50via neutral.50#161B23action.secondaryslate.dark.50via neutral.50#161B23surface.raisedslate.dark.100via neutral.100#262D38surface.sunkenslate.dark.100via neutral.100#262D38action.secondary.hoverslate.dark.100via neutral.100#262D38category.5.subtleslate.dark.100via neutral.100#262D38disabled.surfaceslate.dark.100via neutral.100#262D38category.5slate.dark.700via neutral.700#DDE2EAsurface.inverseslate.dark.900via neutral.900#F7F8FA

Edges and rings

0

50

100#262D38

200#3D4655

300

400#969FAD

500

600

700

800

900

950

border.defaultslate.dark.100via neutral.100#262D38disabled.borderslate.dark.200via neutral.200#3D4655border.strongslate.dark.400via neutral.400#969FAD

Text

0

50

100

200

300

400#969FADAa

500#C4CBD6Aa

600

700

800

900#F7F8FAAa

950

text.mutedslate.dark.400via neutral.400#969FADtext.secondaryslate.dark.500via neutral.500#C4CBD6disabled.textslate.dark.500via neutral.500#C4CBD6text.primaryslate.dark.900via neutral.900#F7F8FA

From the light scale, fixed colors

text.inverseslate.light.900#161B23text.on-actionslate.light.900#161B23text.on-dangerslate.light.900#161B23text.on-lightslate.light.900#161B23text.on-darkslate.light.0#FFFFFF

Violet

8 tokens in light, 8 tokens in dark.

Backgrounds

50

100#E8ECFF

200

300

400

500

600#4B3FD9

700#3729AA

800

900

950

surface.selectedviolet.light.100#E8ECFFcategory.1.subtleviolet.light.100#E8ECFFaction.primaryviolet.light.600#4B3FD9category.1violet.light.600#4B3FD9action.primary.hoverviolet.light.700#3729AA

Edges and rings

50

100

200

300

400

500

600#4B3FD9

700

800

900

950

border.focusviolet.light.600#4B3FD9border.selectedviolet.light.600#4B3FD9

Text

50

100

200

300

400

500

600

700#3729AAAa

800

900

950

text.linkviolet.light.700#3729AA

Backgrounds

50

100#2A244F

200

300

400

500

600#A9A3F6

700#BEBBFB

800

900

950

surface.selectedviolet.dark.100#2A244Fcategory.1.subtleviolet.dark.100#2A244Faction.primaryviolet.dark.600#A9A3F6category.1violet.dark.600#A9A3F6action.primary.hoverviolet.dark.700#BEBBFB

Edges and rings

50

100

200

300

400

500

600#A9A3F6

700

800

900

950

border.focusviolet.dark.600#A9A3F6border.selectedviolet.dark.600#A9A3F6

Text

50

100

200

300

400

500

600

700#BEBBFBAa

800

900

950

text.linkviolet.dark.700#BEBBFB

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#01351A

200

300

400

500

600#5CC283

700

800

900

950

status.success.subtlegreen.dark.100#01351Acategory.3.subtlegreen.dark.100#01351Acategory.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#3F2B02

200

300

400

500

600#F2B84B

700

800

900

950

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

200

300

400

500

600#F28B8B

700#FAA9A8

800

900

950

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

200

300

400

500

600#8AB4F8

700

800

900

950

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

Primitive	Value	Sample	Used by
color.slate.light.0	#FFFFFF		color.text.on-dark (every mode) color.neutral.0 (light)
color.slate.light.50	#F7F8FA		color.neutral.50 (light)
color.slate.light.100	#EEF1F5		color.neutral.100 (light)
color.slate.light.200	#DDE2EA		color.neutral.200 (light)
color.slate.light.300	#C4CBD6		color.neutral.300 (light)
color.slate.light.400	#969FAD		color.neutral.400 (light)
color.slate.light.500	#6B7585		color.neutral.500 (light)
color.slate.light.600	#535D6D		color.neutral.600 (light)
color.slate.light.700	#3D4655		color.neutral.700 (light)
color.slate.light.800	#262D38		color.neutral.800 (light)
color.slate.light.900	#161B23		color.text.on-light (every mode) color.neutral.900 (light)
color.slate.light.950	#0D1117		color.neutral.950 (light)

color.slate.dark

Primitive	Value	Sample	Used by
color.slate.dark.0	#0D1117		color.neutral.0 (dark)
color.slate.dark.50	#161B23		color.neutral.50 (dark)
color.slate.dark.100	#262D38		color.neutral.100 (dark)
color.slate.dark.200	#3D4655		color.neutral.200 (dark)
color.slate.dark.300	#6B7585		color.neutral.300 (dark)
color.slate.dark.400	#969FAD		color.neutral.400 (dark)
color.slate.dark.500	#C4CBD6		color.neutral.500 (dark)
color.slate.dark.600	#D0D6E0		color.neutral.600 (dark)
color.slate.dark.700	#DDE2EA		color.neutral.700 (dark)
color.slate.dark.800	#EEF1F5		color.neutral.800 (dark)
color.slate.dark.900	#F7F8FA		color.neutral.900 (dark)
color.slate.dark.950	#FFFFFF		color.neutral.950 (dark)

color.violet.light

Primitive	Value	Sample	Used by
color.violet.light.50	#F7F8FE		Not used yet
color.violet.light.100	#E8ECFF		color.surface.selected (light) color.category.1.subtle (light)
color.violet.light.200	#D6DCFE		Not used yet
color.violet.light.300	#C8D0FF		Not used yet
color.violet.light.400	#919BFF		Not used yet
color.violet.light.500	#5F60E9		Not used yet
color.violet.light.600	#4B3FD9		color.border.focus (light) color.border.selected (light) color.action.primary (light) color.category.1 (light)
color.violet.light.700	#3729AA		color.text.link (light) color.action.primary.hover (light)
color.violet.light.800	#24147C		Not used yet
color.violet.light.900	#140455		Not used yet
color.violet.light.950	#06002C		Not used yet

color.violet.dark

Primitive	Value	Sample	Used by
color.violet.dark.50	#1C173D		Not used yet
color.violet.dark.100	#2A244F		color.surface.selected (dark) color.category.1.subtle (dark)
color.violet.dark.200	#3C3768		Not used yet
color.violet.dark.300	#514C84		Not used yet
color.violet.dark.400	#6A65A5		Not used yet
color.violet.dark.500	#8681C9		Not used yet
color.violet.dark.600	#A9A3F6		color.border.focus (dark) color.border.selected (dark) color.action.primary (dark) color.category.1 (dark)
color.violet.dark.700	#BEBBFB		color.text.link (dark) color.action.primary.hover (dark)
color.violet.dark.800	#D1CFFE		Not used yet
color.violet.dark.900	#E3E2FE		Not used yet
color.violet.dark.950	#F4F4FE		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	#012510		Not used yet
color.green.dark.100	#01351A		color.status.success.subtle (dark) color.category.3.subtle (dark)
color.green.dark.200	#034A27		Not used yet
color.green.dark.300	#136238		Not used yet
color.green.dark.400	#2A7E4D		Not used yet
color.green.dark.500	#419C65		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	#2B1C00		Not used yet
color.amber.dark.100	#3F2B02		color.status.warning.subtle (dark) color.category.4.subtle (dark)
color.amber.dark.200	#5A3F01		Not used yet
color.amber.dark.300	#795501		Not used yet
color.amber.dark.400	#9E710D		Not used yet
color.amber.dark.500	#C4912C		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	#3A0A0E		Not used yet
color.red.dark.100	#4C171A		color.status.danger.subtle (dark)
color.red.dark.200	#65282A		Not used yet
color.red.dark.300	#803B3D		Not used yet
color.red.dark.400	#A15253		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	#0A1D3C		Not used yet
color.blue.dark.100	#162C4F		color.status.info.subtle (dark) color.category.2.subtle (dark)
color.blue.dark.200	#274068		Not used yet
color.blue.dark.300	#3A5684		Not used yet
color.blue.dark.400	#5171A6		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