Material Design 3 "Color" tokens: Palettes
Browse tokens
Color
Baseline palette
Baseline – Primary
| Token | Value |
|---|---|
Primary 100md.ref.palette.primary100 | #FFFFFF md.ref.palette.primary100 |
Primary 99md.ref.palette.primary99 | #FFFBFE md.ref.palette.primary99 |
Primary 98md.ref.palette.primary98 | #FEF7FF md.ref.palette.primary98 |
Primary 95md.ref.palette.primary95 | #F6EDFF md.ref.palette.primary95 |
Primary 90md.ref.palette.primary90 | #EADDFF md.ref.palette.primary90 |
Primary 80md.ref.palette.primary80 | #D0BCFF md.ref.palette.primary80 |
Primary 70md.ref.palette.primary70 | #B69DF8 md.ref.palette.primary70 |
Primary 60md.ref.palette.primary60 | #9A82DB md.ref.palette.primary60 |
Primary 50md.ref.palette.primary50 | #7F67BE md.ref.palette.primary50 |
Primary 40md.ref.palette.primary40 | #6750A4 md.ref.palette.primary40 |
Primary 30md.ref.palette.primary30 | #4F378B md.ref.palette.primary30 |
Primary 20md.ref.palette.primary20 | #381E72 md.ref.palette.primary20 |
Primary 10md.ref.palette.primary10 | #21005D md.ref.palette.primary10 |
Primary 0md.ref.palette.primary0 | #000000 md.ref.palette.primary0 |
Baseline – Secondary
| Token | Value |
|---|---|
Secondary 100md.ref.palette.secondary100 | #FFFFFF md.ref.palette.secondary100 |
Secondary 99md.ref.palette.secondary99 | #FFFBFE md.ref.palette.secondary99 |
Secondary 98md.ref.palette.secondary98 | #FEF7FF md.ref.palette.secondary98 |
Secondary 95md.ref.palette.secondary95 | #F6EDFF md.ref.palette.secondary95 |
Secondary 90md.ref.palette.secondary90 | #E8DEF8 md.ref.palette.secondary90 |
Secondary 80md.ref.palette.secondary80 | #CCC2DC md.ref.palette.secondary80 |
Secondary 70md.ref.palette.secondary70 | #B0A7C0 md.ref.palette.secondary70 |
Secondary 60md.ref.palette.secondary60 | #958DA5 md.ref.palette.secondary60 |
Secondary 50md.ref.palette.secondary50 | #7A7289 md.ref.palette.secondary50 |
Secondary 40md.ref.palette.secondary40 | #625B71 md.ref.palette.secondary40 |
Secondary 30md.ref.palette.secondary30 | #4A4458 md.ref.palette.secondary30 |
Secondary 20md.ref.palette.secondary20 | #332D41 md.ref.palette.secondary20 |
Secondary 10md.ref.palette.secondary10 | #1D192B md.ref.palette.secondary10 |
Secondary 0md.ref.palette.secondary0 | #000000 md.ref.palette.secondary0 |
Baseline – Tertiary
| Token | Value |
|---|---|
Tertiary 100md.ref.palette.tertiary100 | #FFFFFF md.ref.palette.tertiary100 |
Tertiary 99md.ref.palette.tertiary99 | #FFFBFA md.ref.palette.tertiary99 |
Tertiary 98md.ref.palette.tertiary98 | #FFF8F8 md.ref.palette.tertiary98 |
Tertiary 95md.ref.palette.tertiary95 | #FFECF1 md.ref.palette.tertiary95 |
Tertiary 90md.ref.palette.tertiary90 | #FFD8E4 md.ref.palette.tertiary90 |
Tertiary 80md.ref.palette.tertiary80 | #EFB8C8 md.ref.palette.tertiary80 |
Tertiary 70md.ref.palette.tertiary70 | #D29DAC md.ref.palette.tertiary70 |
Tertiary 60md.ref.palette.tertiary60 | #B58392 md.ref.palette.tertiary60 |
Tertiary 50md.ref.palette.tertiary50 | #986977 md.ref.palette.tertiary50 |
Tertiary 40md.ref.palette.tertiary40 | #7D5260 md.ref.palette.tertiary40 |
Tertiary 30md.ref.palette.tertiary30 | #633B48 md.ref.palette.tertiary30 |
Tertiary 20md.ref.palette.tertiary20 | #492532 md.ref.palette.tertiary20 |
Tertiary 10md.ref.palette.tertiary10 | #31111D md.ref.palette.tertiary10 |
Tertiary 0md.ref.palette.tertiary0 | #000000 md.ref.palette.tertiary0 |
Baseline – Error
| Token | Value |
|---|---|
Error 100md.ref.palette.error100 | #FFFFFF md.ref.palette.error100 |
Error 99md.ref.palette.error99 | #FFFBF9 md.ref.palette.error99 |
Error 98md.ref.palette.error98 | #FFF8F7 md.ref.palette.error98 |
Error 95md.ref.palette.error95 | #FCEEEE md.ref.palette.error95 |
Error 90md.ref.palette.error90 | #F9DEDC md.ref.palette.error90 |
Error 80md.ref.palette.error80 | #F2B8B5 md.ref.palette.error80 |
Error 70md.ref.palette.error70 | #EC928E md.ref.palette.error70 |
Error 60md.ref.palette.error60 | #E46962 md.ref.palette.error60 |
Error 50md.ref.palette.error50 | #DC362E md.ref.palette.error50 |
Error 40md.ref.palette.error40 | #B3261E md.ref.palette.error40 |
Error 30md.ref.palette.error30 | #8C1D18 md.ref.palette.error30 |
Error 20md.ref.palette.error20 | #601410 md.ref.palette.error20 |
Error 10md.ref.palette.error10 | #410E0B md.ref.palette.error10 |
Error 0md.ref.palette.error0 | #000000 md.ref.palette.error0 |
Baseline – Neutral
| Token | Value |
|---|---|
Neutral 100md.ref.palette.neutral100 | #FFFFFF md.ref.palette.neutral100 |
Neutral 99md.ref.palette.neutral99 | #FFFBFF md.ref.palette.neutral99 |
Neutral 98md.ref.palette.neutral98 | #FEF7FF md.ref.palette.neutral98 |
Neutral 96md.ref.palette.neutral96 | #F7F2FA md.ref.palette.neutral96 |
Neutral 95md.ref.palette.neutral95 | #F5EFF7 md.ref.palette.neutral95 |
Neutral 94md.ref.palette.neutral94 | #F3EDF7 md.ref.palette.neutral94 |
Neutral 92md.ref.palette.neutral92 | #ECE6F0 md.ref.palette.neutral92 |
Neutral 90md.ref.palette.neutral90 | #E6E0E9 md.ref.palette.neutral90 |
Neutral 87md.ref.palette.neutral87 | #DED8E1 md.ref.palette.neutral87 |
Neutral 80md.ref.palette.neutral80 | #CAC5CD md.ref.palette.neutral80 |
Neutral 70md.ref.palette.neutral70 | #AEA9B1 md.ref.palette.neutral70 |
Neutral 60md.ref.palette.neutral60 | #938F96 md.ref.palette.neutral60 |
Neutral 50md.ref.palette.neutral50 | #79767D md.ref.palette.neutral50 |
Neutral 40md.ref.palette.neutral40 | #605D64 md.ref.palette.neutral40 |
Neutral 30md.ref.palette.neutral30 | #48464C md.ref.palette.neutral30 |
Neutral 24md.ref.palette.neutral24 | #3B383E md.ref.palette.neutral24 |
Neutral 22md.ref.palette.neutral22 | #36343B md.ref.palette.neutral22 |
Neutral 20md.ref.palette.neutral20 | #322F35 md.ref.palette.neutral20 |
Neutral 17md.ref.palette.neutral17 | #2B2930 md.ref.palette.neutral17 |
Neutral 12md.ref.palette.neutral12 | #211F26 md.ref.palette.neutral12 |
Neutral 10md.ref.palette.neutral10 | #1D1B20 md.ref.palette.neutral10 |
Neutral 6md.ref.palette.neutral6 | #141218 md.ref.palette.neutral6 |
Neutral 4md.ref.palette.neutral4 | #0F0D13 md.ref.palette.neutral4 |
Neutral 0md.ref.palette.neutral0 | #000000 md.ref.palette.neutral0 |
Baseline – Neutral variant
| Token | Value |
|---|---|
Neutral Variant 100md.ref.palette.neutral-variant100 | #FFFFFF md.ref.palette.neutral-variant100 |
Neutral Variant 99md.ref.palette.neutral-variant99 | #FFFBFE md.ref.palette.neutral-variant99 |
Neutral Variant 98md.ref.palette.neutral-variant98 | #FDF7FF md.ref.palette.neutral-variant98 |
Neutral Variant 95md.ref.palette.neutral-variant95 | #F5EEFA md.ref.palette.neutral-variant95 |
Neutral Variant 90md.ref.palette.neutral-variant90 | #E7E0EC md.ref.palette.neutral-variant90 |
Neutral Variant 80md.ref.palette.neutral-variant80 | #CAC4D0 md.ref.palette.neutral-variant80 |
Neutral Variant 70md.ref.palette.neutral-variant70 | #AEA9B4 md.ref.palette.neutral-variant70 |
Neutral Variant 60md.ref.palette.neutral-variant60 | #938F99 md.ref.palette.neutral-variant60 |
Neutral Variant 50md.ref.palette.neutral-variant50 | #79747E md.ref.palette.neutral-variant50 |
Neutral Variant 40md.ref.palette.neutral-variant40 | #605D66 md.ref.palette.neutral-variant40 |
Neutral Variant 30md.ref.palette.neutral-variant30 | #49454F md.ref.palette.neutral-variant30 |
Neutral Variant 20md.ref.palette.neutral-variant20 | #322F37 md.ref.palette.neutral-variant20 |
Neutral Variant 10md.ref.palette.neutral-variant10 | #1D1A22 md.ref.palette.neutral-variant10 |
Neutral Variant 0md.ref.palette.neutral-variant0 | #000000 md.ref.palette.neutral-variant0 |
Static palette
Static – Black white
| Token | Value |
|---|---|
Whitemd.ref.palette.white | #FFFFFF md.ref.palette.white |
Blackmd.ref.palette.black | #000000 md.ref.palette.black |
Static – Blue
| Token | Value |
|---|---|
Blue 100md.ref.palette.blue100 | #FFFFFF md.ref.palette.blue100 |
Blue 98md.ref.palette.blue98 | #F5FAFF md.ref.palette.blue98 |
Blue 95md.ref.palette.blue95 | #E7F2FF md.ref.palette.blue95 |
Blue 90md.ref.palette.blue90 | #D0E4FF md.ref.palette.blue90 |
Blue 80md.ref.palette.blue80 | #A1C9FF md.ref.palette.blue80 |
Blue 70md.ref.palette.blue70 | #76ACFF md.ref.palette.blue70 |
Blue 60md.ref.palette.blue60 | #4E8FF8 md.ref.palette.blue60 |
Blue 50md.ref.palette.blue50 | #3271EA md.ref.palette.blue50 |
Blue 40md.ref.palette.blue40 | #1157CE md.ref.palette.blue40 |
Blue 30md.ref.palette.blue30 | #04409F md.ref.palette.blue30 |
Blue 20md.ref.palette.blue20 | #012C6F md.ref.palette.blue20 |
Blue 10md.ref.palette.blue10 | #001944 md.ref.palette.blue10 |
Blue 0md.ref.palette.blue0 | #000000 md.ref.palette.blue0 |
Static – Yellow
| Token | Value |
|---|---|
Yellow 100md.ref.palette.yellow100 | #FFFFFF md.ref.palette.yellow100 |
Yellow 98md.ref.palette.yellow98 | #FFFADE md.ref.palette.yellow98 |
Yellow 95md.ref.palette.yellow95 | #FFF2B4 md.ref.palette.yellow95 |
Yellow 90md.ref.palette.yellow90 | #FFE07C md.ref.palette.yellow90 |
Yellow 80md.ref.palette.yellow80 | #FCBD00 md.ref.palette.yellow80 |
Yellow 70md.ref.palette.yellow70 | #EF9800 md.ref.palette.yellow70 |
Yellow 60md.ref.palette.yellow60 | #D37B00 md.ref.palette.yellow60 |
Yellow 50md.ref.palette.yellow50 | #B16300 md.ref.palette.yellow50 |
Yellow 40md.ref.palette.yellow40 | #8F4E06 md.ref.palette.yellow40 |
Yellow 30md.ref.palette.yellow30 | #6D3A01 md.ref.palette.yellow30 |
Yellow 20md.ref.palette.yellow20 | #4D2600 md.ref.palette.yellow20 |
Yellow 10md.ref.palette.yellow10 | #2F1400 md.ref.palette.yellow10 |
Yellow 0md.ref.palette.yellow0 | #000000 md.ref.palette.yellow0 |
Static – Red
| Token | Value |
|---|---|
Red 100md.ref.palette.red100 | #FFFFFF md.ref.palette.red100 |
Red 98md.ref.palette.red98 | #FFF8F8 md.ref.palette.red98 |
Red 95md.ref.palette.red95 | #FFECEE md.ref.palette.red95 |
Red 90md.ref.palette.red90 | #FFDADC md.ref.palette.red90 |
Red 80md.ref.palette.red80 | #FFB3AE md.ref.palette.red80 |
Red 70md.ref.palette.red70 | #FF8983 md.ref.palette.red70 |
Red 60md.ref.palette.red60 | #F55E57 md.ref.palette.red60 |
Red 50md.ref.palette.red50 | #DB372D md.ref.palette.red50 |
Red 40md.ref.palette.red40 | #B3251E md.ref.palette.red40 |
Red 30md.ref.palette.red30 | #8A1A16 md.ref.palette.red30 |
Red 20md.ref.palette.red20 | #60150F md.ref.palette.red20 |
Red 10md.ref.palette.red10 | #3A0907 md.ref.palette.red10 |
Red 0md.ref.palette.red0 | #000000 md.ref.palette.red0 |
Static – Purple
| Token | Value |
|---|---|
Purple 100md.ref.palette.purple100 | #FFFFFF md.ref.palette.purple100 |
Purple 98md.ref.palette.purple98 | #FDF8FF md.ref.palette.purple98 |
Purple 95md.ref.palette.purple95 | #F7ECFE md.ref.palette.purple95 |
Purple 90md.ref.palette.purple90 | #EEDCFE md.ref.palette.purple90 |
Purple 80md.ref.palette.purple80 | #D9BAFD md.ref.palette.purple80 |
Purple 70md.ref.palette.purple70 | #C597FF md.ref.palette.purple70 |
Purple 60md.ref.palette.purple60 | #AD72FF md.ref.palette.purple60 |
Purple 50md.ref.palette.purple50 | #9254EA md.ref.palette.purple50 |
Purple 40md.ref.palette.purple40 | #7438D2 md.ref.palette.purple40 |
Purple 30md.ref.palette.purple30 | #5629A4 md.ref.palette.purple30 |
Purple 20md.ref.palette.purple20 | #400B84 md.ref.palette.purple20 |
Purple 10md.ref.palette.purple10 | #280255 md.ref.palette.purple10 |
Purple 0md.ref.palette.purple0 | #000000 md.ref.palette.purple0 |
Static – Blue variant
| Token | Value |
|---|---|
Blue Variant 100md.ref.palette.blue-variant100 | #FFFFFF md.ref.palette.blue-variant100 |
Blue Variant 98md.ref.palette.blue-variant98 | #F4FAFF md.ref.palette.blue-variant98 |
Blue Variant 95md.ref.palette.blue-variant95 | #E0F4FF md.ref.palette.blue-variant95 |
Blue Variant 90md.ref.palette.blue-variant90 | #BDE9FF md.ref.palette.blue-variant90 |
Blue Variant 80md.ref.palette.blue-variant80 | #67D4FF md.ref.palette.blue-variant80 |
Blue Variant 70md.ref.palette.blue-variant70 | #00BBEA md.ref.palette.blue-variant70 |
Blue Variant 60md.ref.palette.blue-variant60 | #009DC9 md.ref.palette.blue-variant60 |
Blue Variant 50md.ref.palette.blue-variant50 | #0081A8 md.ref.palette.blue-variant50 |
Blue Variant 40md.ref.palette.blue-variant40 | #006788 md.ref.palette.blue-variant40 |
Blue Variant 30md.ref.palette.blue-variant30 | #004D68 md.ref.palette.blue-variant30 |
Blue Variant 20md.ref.palette.blue-variant20 | #003549 md.ref.palette.blue-variant20 |
Blue Variant 10md.ref.palette.blue-variant10 | #001F2D md.ref.palette.blue-variant10 |
Blue Variant 0md.ref.palette.blue-variant0 | #000000 md.ref.palette.blue-variant0 |
Static – Cyan
| Token | Value |
|---|---|
Cyan 100md.ref.palette.cyan100 | #FFFFFF md.ref.palette.cyan100 |
Cyan 98md.ref.palette.cyan98 | #F0FBFF md.ref.palette.cyan98 |
Cyan 95md.ref.palette.cyan95 | #D8F6FF md.ref.palette.cyan95 |
Cyan 90md.ref.palette.cyan90 | #ACEDFF md.ref.palette.cyan90 |
Cyan 80md.ref.palette.cyan80 | #60D5F3 md.ref.palette.cyan80 |
Cyan 70md.ref.palette.cyan70 | #00BBDF md.ref.palette.cyan70 |
Cyan 60md.ref.palette.cyan60 | #009EBB md.ref.palette.cyan60 |
Cyan 50md.ref.palette.cyan50 | #00839B md.ref.palette.cyan50 |
Cyan 40md.ref.palette.cyan40 | #00687C md.ref.palette.cyan40 |
Cyan 30md.ref.palette.cyan30 | #004E5D md.ref.palette.cyan30 |
Cyan 20md.ref.palette.cyan20 | #003641 md.ref.palette.cyan20 |
Cyan 10md.ref.palette.cyan10 | #001F26 md.ref.palette.cyan10 |
Cyan 0md.ref.palette.cyan0 | #000000 md.ref.palette.cyan0 |
Static – Grey
| Token | Value |
|---|---|
Grey 100md.ref.palette.grey100 | #FFFFFF md.ref.palette.grey100 |
Grey 98md.ref.palette.grey98 | #F9F9F9 md.ref.palette.grey98 |
Grey 95md.ref.palette.grey95 | #F2F2F2 md.ref.palette.grey95 |
Grey 90md.ref.palette.grey90 | #E3E3E3 md.ref.palette.grey90 |
Grey 80md.ref.palette.grey80 | #C7C7C7 md.ref.palette.grey80 |
Grey 70md.ref.palette.grey70 | #ABABAB md.ref.palette.grey70 |
Grey 60md.ref.palette.grey60 | #919191 md.ref.palette.grey60 |
Grey 50md.ref.palette.grey50 | #777777 md.ref.palette.grey50 |
Grey 40md.ref.palette.grey40 | #5E5E5E md.ref.palette.grey40 |
Grey 30md.ref.palette.grey30 | #474747 md.ref.palette.grey30 |
Grey 20md.ref.palette.grey20 | #303030 md.ref.palette.grey20 |
Grey 10md.ref.palette.grey10 | #1B1B1C md.ref.palette.grey10 |
Grey 0md.ref.palette.grey0 | #000000 md.ref.palette.grey0 |
Static – Green
| Token | Value |
|---|---|
Green 100md.ref.palette.green100 | #FFFFFF md.ref.palette.green100 |
Green 98md.ref.palette.green98 | #F2FCEF md.ref.palette.green98 |
Green 95md.ref.palette.green95 | #DDF8D8 md.ref.palette.green95 |
Green 90md.ref.palette.green90 | #BEEFBB md.ref.palette.green90 |
Green 80md.ref.palette.green80 | #80DA88 md.ref.palette.green80 |
Green 70md.ref.palette.green70 | #44C265 md.ref.palette.green70 |
Green 60md.ref.palette.green60 | #1AA64A md.ref.palette.green60 |
Green 50md.ref.palette.green50 | #128937 md.ref.palette.green50 |
Green 40md.ref.palette.green40 | #006C35 md.ref.palette.green40 |
Green 30md.ref.palette.green30 | #00522C md.ref.palette.green30 |
Green 20md.ref.palette.green20 | #00381F md.ref.palette.green20 |
Green 10md.ref.palette.green10 | #002110 md.ref.palette.green10 |
Green 0md.ref.palette.green0 | #000000 md.ref.palette.green0 |
Static – Grey variant
| Token | Value |
|---|---|
Grey Variant 100md.ref.palette.grey-variant100 | #FFFFFF md.ref.palette.grey-variant100 |
Grey Variant 98md.ref.palette.grey-variant98 | #F7FAF7 md.ref.palette.grey-variant98 |
Grey Variant 95md.ref.palette.grey-variant95 | #EFF2EF md.ref.palette.grey-variant95 |
Grey Variant 90md.ref.palette.grey-variant90 | #E1E3E1 md.ref.palette.grey-variant90 |
Grey Variant 80md.ref.palette.grey-variant80 | #C4C7C5 md.ref.palette.grey-variant80 |
Grey Variant 70md.ref.palette.grey-variant70 | #A9ACAA md.ref.palette.grey-variant70 |
Grey Variant 60md.ref.palette.grey-variant60 | #8E918F md.ref.palette.grey-variant60 |
Grey Variant 50md.ref.palette.grey-variant50 | #747775 md.ref.palette.grey-variant50 |
Grey Variant 40md.ref.palette.grey-variant40 | #5C5F5E md.ref.palette.grey-variant40 |
Grey Variant 30md.ref.palette.grey-variant30 | #444746 md.ref.palette.grey-variant30 |
Grey Variant 20md.ref.palette.grey-variant20 | #2D312F md.ref.palette.grey-variant20 |
Grey Variant 10md.ref.palette.grey-variant10 | #191D1C md.ref.palette.grey-variant10 |
Grey Variant 0md.ref.palette.grey-variant0 | #000000 md.ref.palette.grey-variant0 |
Static – Orange
| Token | Value |
|---|---|
Orange 100md.ref.palette.orange100 | #FFFFFF md.ref.palette.orange100 |
Orange 98md.ref.palette.orange98 | #FFF8F4 md.ref.palette.orange98 |
Orange 95md.ref.palette.orange95 | #FFEDE1 md.ref.palette.orange95 |
Orange 90md.ref.palette.orange90 | #FFDCC3 md.ref.palette.orange90 |
Orange 80md.ref.palette.orange80 | #FFB683 md.ref.palette.orange80 |
Orange 70md.ref.palette.orange70 | #FF8D41 md.ref.palette.orange70 |
Orange 60md.ref.palette.orange60 | #E86E00 md.ref.palette.orange60 |
Orange 50md.ref.palette.orange50 | #C05A01 md.ref.palette.orange50 |
Orange 40md.ref.palette.orange40 | #9A4600 md.ref.palette.orange40 |
Orange 30md.ref.palette.orange30 | #753403 md.ref.palette.orange30 |
Orange 20md.ref.palette.orange20 | #522302 md.ref.palette.orange20 |
Orange 10md.ref.palette.orange10 | #321200 md.ref.palette.orange10 |
Orange 0md.ref.palette.orange0 | #000000 md.ref.palette.orange0 |
Static – Pink
| Token | Value |
|---|---|
Pink 100md.ref.palette.pink100 | #FFFFFF md.ref.palette.pink100 |
Pink 98md.ref.palette.pink98 | #FFF7FC md.ref.palette.pink98 |
Pink 95md.ref.palette.pink95 | #FFECF6 md.ref.palette.pink95 |
Pink 90md.ref.palette.pink90 | #FFD8EF md.ref.palette.pink90 |
Pink 80md.ref.palette.pink80 | #FFAEE4 md.ref.palette.pink80 |
Pink 70md.ref.palette.pink70 | #FF7DD2 md.ref.palette.pink70 |
Pink 60md.ref.palette.pink60 | #F94AAB md.ref.palette.pink60 |
Pink 50md.ref.palette.pink50 | #DC258D md.ref.palette.pink50 |
Pink 40md.ref.palette.pink40 | #B60D6E md.ref.palette.pink40 |
Pink 30md.ref.palette.pink30 | #8D0053 md.ref.palette.pink30 |
Pink 20md.ref.palette.pink20 | #620438 md.ref.palette.pink20 |
Pink 10md.ref.palette.pink10 | #3D0023 md.ref.palette.pink10 |
Pink 0md.ref.palette.pink0 | #000000 md.ref.palette.pink0 |