Skip to main content

Color

180 primitives, 66 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 deep​

20 tokens in light, 15 tokens in dark.

Backgrounds

0#FFFFFF
50#F8FAFC
100#F1F5F9
200
300
400
500
600
700
800
900#0F172A
950
surface.defaultslate-deep.light.0via neutral.0#FFFFFFsurface.raisedslate-deep.light.0via neutral.0#FFFFFFaction.secondaryslate-deep.light.0via neutral.0#FFFFFFsurface.canvasslate-deep.light.50via neutral.50#F8FAFCsurface.sunkenslate-deep.light.100via neutral.100#F1F5F9action.secondary.hoverslate-deep.light.100via neutral.100#F1F5F9disabled.surfaceslate-deep.light.100via neutral.100#F1F5F9surface.inverseslate-deep.light.900via neutral.900#0F172A

Edges and rings

0
50
100
200#E2E8F0
300
400
500#64748B
600
700
800
900
950
border.defaultslate-deep.light.200via neutral.200#E2E8F0disabled.borderslate-deep.light.200via neutral.200#E2E8F0border.strongslate-deep.light.500via neutral.500#64748B

Text

0#FFFFFFAa
50
100
200
300
400
500#64748BAa
600#4B5A6FAa
700#334155Aa
800
900#0F172AAa
950
text.inverseslate-deep.light.0#FFFFFFtext.on-actionslate-deep.light.0#FFFFFFtext.on-dangerslate-deep.light.0#FFFFFFtext.on-darkslate-deep.light.0#FFFFFFdisabled.textslate-deep.light.500via neutral.500#64748Btext.mutedslate-deep.light.600via neutral.600#4B5A6Ftext.secondaryslate-deep.light.700via neutral.700#334155text.primaryslate-deep.light.900via neutral.900#0F172Atext.on-lightslate-deep.light.900#0F172A

Backgrounds

0#020617
50#0F172A
100#1E293B
200
300
400
500
600
700
800
900#F8FAFC
950
surface.canvasslate-deep.dark.0via neutral.0#020617surface.defaultslate-deep.dark.50via neutral.50#0F172Aaction.secondaryslate-deep.dark.50via neutral.50#0F172Asurface.raisedslate-deep.dark.100via neutral.100#1E293Bsurface.sunkenslate-deep.dark.100via neutral.100#1E293Baction.secondary.hoverslate-deep.dark.100via neutral.100#1E293Bdisabled.surfaceslate-deep.dark.100via neutral.100#1E293Bsurface.inverseslate-deep.dark.900via neutral.900#F8FAFC

Edges and rings

0
50
100#1E293B
200#334155
300
400#96A3B5
500
600
700
800
900
950
border.defaultslate-deep.dark.100via neutral.100#1E293Bdisabled.borderslate-deep.dark.200via neutral.200#334155border.strongslate-deep.dark.400via neutral.400#96A3B5

Text

0
50
100
200
300
400#96A3B5Aa
500#CBD5E1Aa
600
700
800
900#F8FAFCAa
950
text.mutedslate-deep.dark.400via neutral.400#96A3B5text.secondaryslate-deep.dark.500via neutral.500#CBD5E1disabled.textslate-deep.dark.500via neutral.500#CBD5E1text.primaryslate-deep.dark.900via neutral.900#F8FAFC

From the light scale, fixed colors

text.inverseslate-deep.light.900#0F172Atext.on-actionslate-deep.light.900#0F172Atext.on-dangerslate-deep.light.900#0F172Atext.on-lightslate-deep.light.900#0F172Atext.on-darkslate-deep.light.0#FFFFFF

Teal​

8 tokens in light, 8 tokens in dark.

Backgrounds

50
100#DEF3F0
200
300
400
500
600#0F766E
700#015852
800
900
950
surface.selectedasterteal.light.100#DEF3F0category.1.subtleteal.light.100#DEF3F0action.primaryasterteal.light.600#0F766Ecategory.1teal.light.600#0F766Eaction.primary.hoverasterteal.light.700#015852

Edges and rings

50
100
200
300
400
500
600#0F766E
700
800
900
950
border.focusasterteal.light.600#0F766Eborder.selectedasterteal.light.600#0F766E

Text

50
100
200
300
400
500
600
700#015852Aa
800
900
950
text.linkasterteal.light.700#015852

Backgrounds

50
100#012C28
200
300
400
500
600#7FCFC6
700#A1DCD4
800
900
950
surface.selectedasterteal.dark.100#012C28category.1.subtleteal.dark.100#012C28action.primaryasterteal.dark.600#7FCFC6category.1teal.dark.600#7FCFC6action.primary.hoverasterteal.dark.700#A1DCD4

Edges and rings

50
100
200
300
400
500
600#7FCFC6
700
800
900
950
border.focusasterteal.dark.600#7FCFC6border.selectedasterteal.dark.600#7FCFC6

Text

50
100
200
300
400
500
600
700#A1DCD4Aa
800
900
950
text.linkasterteal.dark.700#A1DCD4

Purple​

8 tokens in light, 8 tokens in dark.

Backgrounds

50
100#EDEAFE
200
300
400
500
600#6D28D9
700#5212AA
800
900
950
category.2.subtlepurple.light.100#EDEAFEsurface.selectedbirchpurple.light.100#EDEAFEcategory.2purple.light.600#6D28D9action.primarybirchpurple.light.600#6D28D9action.primary.hoverbirchpurple.light.700#5212AA

Edges and rings

50
100
200
300
400
500
600#6D28D9
700
800
900
950
border.focusbirchpurple.light.600#6D28D9border.selectedbirchpurple.light.600#6D28D9

Text

50
100
200
300
400
500
600
700#5212AAAa
800
900
950
text.linkbirchpurple.light.700#5212AA

Backgrounds

50
100#271745
200
300
400
500
600#B79DF7
700#C9B7FC
800
900
950
category.2.subtlepurple.dark.100#271745surface.selectedbirchpurple.dark.100#271745category.2purple.dark.600#B79DF7action.primarybirchpurple.dark.600#B79DF7action.primary.hoverbirchpurple.dark.700#C9B7FC

Edges and rings

50
100
200
300
400
500
600#B79DF7
700
800
900
950
border.focusbirchpurple.dark.600#B79DF7border.selectedbirchpurple.dark.600#B79DF7

Text

50
100
200
300
400
500
600
700#C9B7FCAa
800
900
950
text.linkbirchpurple.dark.700#C9B7FC

Orange​

8 tokens in light, 8 tokens in dark.

Backgrounds

50
100#FEEBE4
200
300
400
500
600#C2410C
700#942D02
800
900
950
category.3.subtleorange.light.100#FEEBE4surface.selectedcoralorange.light.100#FEEBE4category.3orange.light.600#C2410Caction.primarycoralorange.light.600#C2410Caction.primary.hovercoralorange.light.700#942D02

Edges and rings

50
100
200
300
400
500
600#C2410C
700
800
900
950
border.focuscoralorange.light.600#C2410Cborder.selectedcoralorange.light.600#C2410C

Text

50
100
200
300
400
500
600
700#942D02Aa
800
900
950
text.linkcoralorange.light.700#942D02

Backgrounds

50
100#3F1702
200
300
400
500
600#F7A67F
700#FCBD9F
800
900
950
category.3.subtleorange.dark.100#3F1702surface.selectedcoralorange.dark.100#3F1702category.3orange.dark.600#F7A67Faction.primarycoralorange.dark.600#F7A67Faction.primary.hovercoralorange.dark.700#FCBD9F

Edges and rings

50
100
200
300
400
500
600#F7A67F
700
800
900
950
border.focuscoralorange.dark.600#F7A67Fborder.selectedcoralorange.dark.600#F7A67F

Text

50
100
200
300
400
500
600
700#FCBD9FAa
800
900
950
text.linkcoralorange.dark.700#FCBD9F

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.5.subtlegreen.light.100#DBF7DFcategory.5green.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#012A14
200
300
400
500
600#5CC283
700
800
900
950
status.success.subtlegreen.dark.100#012A14category.5.subtlegreen.dark.100#012A14category.5green.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​

4 tokens in light, 2 tokens in dark.

Backgrounds

50
100#FEE8CF
200
300
400
500
600
700
800
900
950
status.warning.subtleamber.light.100#FEE8CF

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#332201
200
300
400
500
600
700
800
900
950
status.warning.subtleamber.dark.100#332201

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#410C11
200
300
400
500
600#F28B8B
700#FAA9A8
800
900
950
status.danger.subtlered.dark.100#410C11action.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.4.subtleblue.light.100#D3E4FFcategory.4blue.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#0D2244
200
300
400
500
600#8AB4F8
700
800
900
950
status.info.subtleblue.dark.100#0D2244category.4.subtleblue.dark.100#0D2244category.4blue.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-deep.light​

PrimitiveValueSampleUsed by
color.slate-deep.light.0#FFFFFFcolor.text.on-dark (every mode, aster)
color.neutral.0 (light, aster)
color.text.on-dark (every mode, birch)
color.neutral.0 (light, birch)
color.text.on-dark (every mode, coral)
color.neutral.0 (light, coral)
color.slate-deep.light.50#F8FAFCcolor.neutral.50 (light, aster)
color.neutral.50 (light, birch)
color.neutral.50 (light, coral)
color.slate-deep.light.100#F1F5F9color.neutral.100 (light, aster)
color.neutral.100 (light, birch)
color.neutral.100 (light, coral)
color.slate-deep.light.200#E2E8F0color.neutral.200 (light, aster)
color.neutral.200 (light, birch)
color.neutral.200 (light, coral)
color.slate-deep.light.300#CBD5E1color.neutral.300 (light, aster)
color.neutral.300 (light, birch)
color.neutral.300 (light, coral)
color.slate-deep.light.400#96A3B5color.neutral.400 (light, aster)
color.neutral.400 (light, birch)
color.neutral.400 (light, coral)
color.slate-deep.light.500#64748Bcolor.neutral.500 (light, aster)
color.neutral.500 (light, birch)
color.neutral.500 (light, coral)
color.slate-deep.light.600#4B5A6Fcolor.neutral.600 (light, aster)
color.neutral.600 (light, birch)
color.neutral.600 (light, coral)
color.slate-deep.light.700#334155color.neutral.700 (light, aster)
color.neutral.700 (light, birch)
color.neutral.700 (light, coral)
color.slate-deep.light.800#1E293Bcolor.neutral.800 (light, aster)
color.neutral.800 (light, birch)
color.neutral.800 (light, coral)
color.slate-deep.light.900#0F172Acolor.text.on-light (every mode, aster)
color.neutral.900 (light, aster)
color.text.on-light (every mode, birch)
color.neutral.900 (light, birch)
color.text.on-light (every mode, coral)
color.neutral.900 (light, coral)
color.slate-deep.light.950#020617color.neutral.950 (light, aster)
color.neutral.950 (light, birch)
color.neutral.950 (light, coral)

color.slate-deep.dark​

PrimitiveValueSampleUsed by
color.slate-deep.dark.0#020617color.neutral.0 (dark, aster)
color.neutral.0 (dark, birch)
color.neutral.0 (dark, coral)
color.slate-deep.dark.50#0F172Acolor.neutral.50 (dark, aster)
color.neutral.50 (dark, birch)
color.neutral.50 (dark, coral)
color.slate-deep.dark.100#1E293Bcolor.neutral.100 (dark, aster)
color.neutral.100 (dark, birch)
color.neutral.100 (dark, coral)
color.slate-deep.dark.200#334155color.neutral.200 (dark, aster)
color.neutral.200 (dark, birch)
color.neutral.200 (dark, coral)
color.slate-deep.dark.300#64748Bcolor.neutral.300 (dark, aster)
color.neutral.300 (dark, birch)
color.neutral.300 (dark, coral)
color.slate-deep.dark.400#96A3B5color.neutral.400 (dark, aster)
color.neutral.400 (dark, birch)
color.neutral.400 (dark, coral)
color.slate-deep.dark.500#CBD5E1color.neutral.500 (dark, aster)
color.neutral.500 (dark, birch)
color.neutral.500 (dark, coral)
color.slate-deep.dark.600#D6DEE8color.neutral.600 (dark, aster)
color.neutral.600 (dark, birch)
color.neutral.600 (dark, coral)
color.slate-deep.dark.700#E2E8F0color.neutral.700 (dark, aster)
color.neutral.700 (dark, birch)
color.neutral.700 (dark, coral)
color.slate-deep.dark.800#F1F5F9color.neutral.800 (dark, aster)
color.neutral.800 (dark, birch)
color.neutral.800 (dark, coral)
color.slate-deep.dark.900#F8FAFCcolor.neutral.900 (dark, aster)
color.neutral.900 (dark, birch)
color.neutral.900 (dark, coral)
color.slate-deep.dark.950#FFFFFFcolor.neutral.950 (dark, aster)
color.neutral.950 (dark, birch)
color.neutral.950 (dark, coral)

color.teal.light​

PrimitiveValueSampleUsed by
color.teal.light.50#F0FCFANot used yet
color.teal.light.100#DEF3F0color.surface.selected (light, aster)
color.category.1.subtle (light, aster)
color.category.1.subtle (light, birch)
color.category.1.subtle (light, coral)
color.teal.light.200#C9E7E3Not used yet
color.teal.light.300#BADED9Not used yet
color.teal.light.400#7EB6AFNot used yet
color.teal.light.500#3D8B83Not used yet
color.teal.light.600#0F766Ecolor.border.focus (light, aster)
color.border.selected (light, aster)
color.action.primary (light, aster)
color.category.1 (light, aster)
color.category.1 (light, birch)
color.category.1 (light, coral)
color.teal.light.700#015852color.text.link (light, aster)
color.action.primary.hover (light, aster)
color.teal.light.800#003C37Not used yet
color.teal.light.900#012421Not used yet
color.teal.light.950#000E0DNot used yet

color.teal.dark​

PrimitiveValueSampleUsed by
color.teal.dark.50#001A18Not used yet
color.teal.dark.100#012C28color.surface.selected (dark, aster)
color.category.1.subtle (dark, aster)
color.category.1.subtle (dark, birch)
color.category.1.subtle (dark, coral)
color.teal.dark.200#0C443FNot used yet
color.teal.dark.300#255F59Not used yet
color.teal.dark.400#3F7F78Not used yet
color.teal.dark.500#5CA39BNot used yet
color.teal.dark.600#7FCFC6color.border.focus (dark, aster)
color.border.selected (dark, aster)
color.action.primary (dark, aster)
color.category.1 (dark, aster)
color.category.1 (dark, birch)
color.category.1 (dark, coral)
color.teal.dark.700#A1DCD4color.text.link (dark, aster)
color.action.primary.hover (dark, aster)
color.teal.dark.800#BCE6E1Not used yet
color.teal.dark.900#D3F0ECNot used yet
color.teal.dark.950#EAF9F7Not used yet

color.purple.light​

PrimitiveValueSampleUsed by
color.purple.light.50#F8F7FFNot used yet
color.purple.light.100#EDEAFEcolor.category.2.subtle (light, aster)
color.surface.selected (light, birch)
color.category.2.subtle (light, birch)
color.category.2.subtle (light, coral)
color.purple.light.200#DFD9FFNot used yet
color.purple.light.300#D4CCFENot used yet
color.purple.light.400#AA91FFNot used yet
color.purple.light.500#8050E9Not used yet
color.purple.light.600#6D28D9color.category.2 (light, aster)
color.border.focus (light, birch)
color.border.selected (light, birch)
color.action.primary (light, birch)
color.category.2 (light, birch)
color.category.2 (light, coral)
color.purple.light.700#5212AAcolor.text.link (light, birch)
color.action.primary.hover (light, birch)
color.purple.light.800#38017BNot used yet
color.purple.light.900#22014ENot used yet
color.purple.light.950#0D0027Not used yet

color.purple.dark​

PrimitiveValueSampleUsed by
color.purple.dark.50#190831Not used yet
color.purple.dark.100#271745color.category.2.subtle (dark, aster)
color.surface.selected (dark, birch)
color.category.2.subtle (dark, birch)
color.category.2.subtle (dark, coral)
color.purple.dark.200#3C2A5FNot used yet
color.purple.dark.300#53417DNot used yet
color.purple.dark.400#705BA0Not used yet
color.purple.dark.500#9079C7Not used yet
color.purple.dark.600#B79DF7color.category.2 (dark, aster)
color.border.focus (dark, birch)
color.border.selected (dark, birch)
color.action.primary (dark, birch)
color.category.2 (dark, birch)
color.category.2 (dark, coral)
color.purple.dark.700#C9B7FCcolor.text.link (dark, birch)
color.action.primary.hover (dark, birch)
color.purple.dark.800#D9CCFFNot used yet
color.purple.dark.900#E7E0FENot used yet
color.purple.dark.950#F6F3FFNot used yet

color.orange.light​

PrimitiveValueSampleUsed by
color.orange.light.50#FFF8F5Not used yet
color.orange.light.100#FEEBE4color.category.3.subtle (light, aster)
color.category.3.subtle (light, birch)
color.surface.selected (light, coral)
color.category.3.subtle (light, coral)
color.orange.light.200#FED9CDNot used yet
color.orange.light.300#FFCBBBNot used yet
color.orange.light.400#F29578Not used yet
color.orange.light.500#D35E38Not used yet
color.orange.light.600#C2410Ccolor.category.3 (light, aster)
color.category.3 (light, birch)
color.border.focus (light, coral)
color.border.selected (light, coral)
color.action.primary (light, coral)
color.category.3 (light, coral)
color.orange.light.700#942D02color.text.link (light, coral)
color.action.primary.hover (light, coral)
color.orange.light.800#661D01Not used yet
color.orange.light.900#410F01Not used yet
color.orange.light.950#1F0400Not used yet

color.orange.dark​

PrimitiveValueSampleUsed by
color.orange.dark.50#270B00Not used yet
color.orange.dark.100#3F1702color.category.3.subtle (dark, aster)
color.category.3.subtle (dark, birch)
color.surface.selected (dark, coral)
color.category.3.subtle (dark, coral)
color.orange.dark.200#5A2C13Not used yet
color.orange.dark.300#784328Not used yet
color.orange.dark.400#9D5F41Not used yet
color.orange.dark.500#C57F5DNot used yet
color.orange.dark.600#F7A67Fcolor.category.3 (dark, aster)
color.category.3 (dark, birch)
color.border.focus (dark, coral)
color.border.selected (dark, coral)
color.action.primary (dark, coral)
color.category.3 (dark, coral)
color.orange.dark.700#FCBD9Fcolor.text.link (dark, coral)
color.action.primary.hover (dark, coral)
color.orange.dark.800#FFD0B9Not used yet
color.orange.dark.900#FFE1D4Not used yet
color.orange.dark.950#FFF2ECNot used yet

color.green.light​

PrimitiveValueSampleUsed by
color.green.light.50#F1FDF2Not used yet
color.green.light.100#DBF7DFcolor.text.success-on-dark (every mode, aster)
color.status.success.subtle (light, aster)
color.category.5.subtle (light, aster)
color.text.success-on-dark (every mode, birch)
color.status.success.subtle (light, birch)
color.category.5.subtle (light, birch)
color.text.success-on-dark (every mode, coral)
color.status.success.subtle (light, coral)
color.category.5.subtle (light, coral)
color.green.light.200#CBE9CFNot used yet
color.green.light.300#BCE0C1Not used yet
color.green.light.400#82BA8BNot used yet
color.green.light.500#448F54Not used yet
color.green.light.600#1F7A3Acolor.status.success (light, aster)
color.category.5 (light, aster)
color.status.success (light, birch)
color.category.5 (light, birch)
color.status.success (light, coral)
color.category.5 (light, coral)
color.green.light.700#0B5C27Not used yet
color.green.light.800#023E17color.text.success-on-light (every mode, aster)
color.text.success-on-light (every mode, birch)
color.text.success-on-light (every mode, coral)
color.green.light.900#01260BNot used yet
color.green.light.950#001003Not used yet

color.green.dark​

PrimitiveValueSampleUsed by
color.green.dark.50#001A0ANot used yet
color.green.dark.100#012A14color.status.success.subtle (dark, aster)
color.category.5.subtle (dark, aster)
color.status.success.subtle (dark, birch)
color.category.5.subtle (dark, birch)
color.status.success.subtle (dark, coral)
color.category.5.subtle (dark, coral)
color.green.dark.200#024121Not used yet
color.green.dark.300#065B31Not used yet
color.green.dark.400#247948Not used yet
color.green.dark.500#3E9A63Not used yet
color.green.dark.600#5CC283color.status.success (dark, aster)
color.category.5 (dark, aster)
color.status.success (dark, birch)
color.category.5 (dark, birch)
color.status.success (dark, coral)
color.category.5 (dark, coral)
color.green.dark.700#8AD3A2Not used yet
color.green.dark.800#ADE2BDNot used yet
color.green.dark.900#CBEFD5Not used yet
color.green.dark.950#E8FBEDNot used yet

color.amber.light​

PrimitiveValueSampleUsed by
color.amber.light.50#FFF7EFNot used yet
color.amber.light.100#FEE8CFcolor.text.warning-on-dark (every mode, aster)
color.status.warning.subtle (light, aster)
color.text.warning-on-dark (every mode, birch)
color.status.warning.subtle (light, birch)
color.text.warning-on-dark (every mode, coral)
color.status.warning.subtle (light, coral)
color.amber.light.200#F1DBC3Not used yet
color.amber.light.300#EACFB3Not used yet
color.amber.light.400#C7A074Not used yet
color.amber.light.500#9E6E32Not used yet
color.amber.light.600#8A5600color.status.warning (light, aster)
color.status.warning (light, birch)
color.status.warning (light, coral)
color.amber.light.700#673F01Not used yet
color.amber.light.800#462A02color.text.warning-on-light (every mode, aster)
color.text.warning-on-light (every mode, birch)
color.text.warning-on-light (every mode, coral)
color.amber.light.900#2B1800Not used yet
color.amber.light.950#130800Not used yet

color.amber.dark​

PrimitiveValueSampleUsed by
color.amber.dark.50#1F1301Not used yet
color.amber.dark.100#332201color.status.warning.subtle (dark, aster)
color.status.warning.subtle (dark, birch)
color.status.warning.subtle (dark, coral)
color.amber.dark.200#503700Not used yet
color.amber.dark.300#704F03Not used yet
color.amber.dark.400#986C06Not used yet
color.amber.dark.500#C18E28Not used yet
color.amber.dark.600#F2B84Bcolor.status.warning (dark, aster)
color.status.warning (dark, birch)
color.status.warning (dark, coral)
color.amber.dark.700#F6CA7FNot used yet
color.amber.dark.800#FAD9A3Not used yet
color.amber.dark.900#FDE7C3Not used yet
color.amber.dark.950#FFF4E2Not used yet

color.red.light​

PrimitiveValueSampleUsed by
color.red.light.50#FEF7F7Not used yet
color.red.light.100#FFDBD8color.text.danger-on-dark (every mode, aster)
color.status.danger.subtle (light, aster)
color.text.danger-on-dark (every mode, birch)
color.status.danger.subtle (light, birch)
color.text.danger-on-dark (every mode, coral)
color.status.danger.subtle (light, coral)
color.red.light.200#FED7D2Not used yet
color.red.light.300#FEC8C2Not used yet
color.red.light.400#F68C82Not used yet
color.red.light.500#D64F48Not used yet
color.red.light.600#C42B2Bcolor.action.danger (light, aster)
color.status.danger (light, aster)
color.action.danger (light, birch)
color.status.danger (light, birch)
color.action.danger (light, coral)
color.status.danger (light, coral)
color.red.light.700#981519color.action.danger.hover (light, aster)
color.action.danger.hover (light, birch)
color.action.danger.hover (light, coral)
color.red.light.800#6D0008color.text.danger-on-light (every mode, aster)
color.text.danger-on-light (every mode, birch)
color.text.danger-on-light (every mode, coral)
color.red.light.900#450003Not used yet
color.red.light.950#210001Not used yet

color.red.dark​

PrimitiveValueSampleUsed by
color.red.dark.50#2E0105Not used yet
color.red.dark.100#410C11color.status.danger.subtle (dark, aster)
color.status.danger.subtle (dark, birch)
color.status.danger.subtle (dark, coral)
color.red.dark.200#5B1F22Not used yet
color.red.dark.300#783436Not used yet
color.red.dark.400#9C4D4ENot used yet
color.red.dark.500#C26969Not used yet
color.red.dark.600#F28B8Bcolor.action.danger (dark, aster)
color.status.danger (dark, aster)
color.action.danger (dark, birch)
color.status.danger (dark, birch)
color.action.danger (dark, coral)
color.status.danger (dark, coral)
color.red.dark.700#FAA9A8color.action.danger.hover (dark, aster)
color.action.danger.hover (dark, birch)
color.action.danger.hover (dark, coral)
color.red.dark.800#FEC3C1Not used yet
color.red.dark.900#FEDBDANot used yet
color.red.dark.950#FEF2F1Not used yet

color.black.light​

PrimitiveValueSampleUsed by
color.black.light.scrim#0000008Ccolor.surface.scrim (light, aster)
color.surface.scrim (light, birch)
color.surface.scrim (light, coral)

color.black.dark​

PrimitiveValueSampleUsed by
color.black.dark.scrim#000000B3color.surface.scrim (dark, aster)
color.surface.scrim (dark, birch)
color.surface.scrim (dark, coral)

color.blue.light​

PrimitiveValueSampleUsed by
color.blue.light.50#F4F7FENot used yet
color.blue.light.100#D3E4FFcolor.text.info-on-dark (every mode, aster)
color.status.info.subtle (light, aster)
color.category.4.subtle (light, aster)
color.text.info-on-dark (every mode, birch)
color.status.info.subtle (light, birch)
color.category.4.subtle (light, birch)
color.text.info-on-dark (every mode, coral)
color.status.info.subtle (light, coral)
color.category.4.subtle (light, coral)
color.blue.light.200#C3D9FENot used yet
color.blue.light.300#B2CCF8Not used yet
color.blue.light.400#6F95D6Not used yet
color.blue.light.500#2C5AAANot used yet
color.blue.light.600#083C93color.status.info (light, aster)
color.category.4 (light, aster)
color.status.info (light, birch)
color.category.4 (light, birch)
color.status.info (light, coral)
color.category.4 (light, coral)
color.blue.light.700#012A72Not used yet
color.blue.light.800#001A4Ecolor.text.info-on-light (every mode, aster)
color.text.info-on-light (every mode, birch)
color.text.info-on-light (every mode, coral)
color.blue.light.900#000D31Not used yet
color.blue.light.950#000316Not used yet

color.blue.dark​

PrimitiveValueSampleUsed by
color.blue.dark.50#031331Not used yet
color.blue.dark.100#0D2244color.status.info.subtle (dark, aster)
color.category.4.subtle (dark, aster)
color.status.info.subtle (dark, birch)
color.category.4.subtle (dark, birch)
color.status.info.subtle (dark, coral)
color.category.4.subtle (dark, coral)
color.blue.dark.200#1F375ENot used yet
color.blue.dark.300#344F7CNot used yet
color.blue.dark.400#4C6CA0Not used yet
color.blue.dark.500#688CC8Not used yet
color.blue.dark.600#8AB4F8color.status.info (dark, aster)
color.category.4 (dark, aster)
color.status.info (dark, birch)
color.category.4 (dark, birch)
color.status.info (dark, coral)
color.category.4 (dark, coral)
color.blue.dark.700#A7C8FCNot used yet
color.blue.dark.800#C1D8FENot used yet
color.blue.dark.900#D9E7FENot used yet
color.blue.dark.950#F0F6FFNot used yet