Material Design 3

Static color schemes ​

Static color schemes are ideal for branded products that should have a consistent, uniform design

Baseline · Custom brand

Static color schemes

Baseline is the default static color scheme. It uses accessible color pairings and includes colors for both light and dark themes.

With the baseline color scheme, end-users see

  • An accessible UI with static colors

Mobile screenshot of music app.

Music app with the static baseline color scheme

Tablet screenshot of a news app.

News app with the static baseline color scheme

Baseline colors ​

Get baseline colors in Figma using the Material Theme Builder.

Color swatches showing the entire baseline color scheme and derivative accent colors.

Baseline scheme colors in light theme

Color swatches showing the entire baseline color scheme and derivative accent colors.

Baseline scheme colors in dark theme

Baseline color tokens ​

Design tokens

Token table

Machine-readable relationship table

Color tokens · 2 token sets · 289 tokens · live token table · DSDB COLOR.20543ce18892f7d9

  • Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
  • Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
  • Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
  • Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Color schemes · md.sys.color · 50 tokens

Color tokens for light and dark themes, medium and high contrast modes, 1P Baseline and 3P (Dynamic) schemes, and iOS overrides.

GroupTokenTypeReference chainResolved valueOther contexts
Primary colorsmd.sys.color.primaryColormd.ref.palette.primary40#6750A4Dark: #D0BCFF via md.ref.palette.primary80
Medium contrast: #4F378B via md.ref.palette.primary30
High contrast: #381E72 via md.ref.palette.primary20
Primary colorsmd.sys.color.on-primaryColormd.ref.palette.primary100#FFFFFFDark: #381E72 via md.ref.palette.primary20
Primary colorsmd.sys.color.primary-containerColormd.ref.palette.primary90#EADDFFDark: #4F378B via md.ref.palette.primary30
Medium contrast: #6750A4 via md.ref.palette.primary40
High contrast: #4F378B via md.ref.palette.primary30
Primary colorsmd.sys.color.on-primary-containerColormd.ref.palette.primary30#4F378BDark: #EADDFF via md.ref.palette.primary90
Medium contrast: #FFFFFF via md.ref.palette.primary100
High contrast: #FFFFFF via md.ref.palette.primary100
Secondary colorsmd.sys.color.secondaryColormd.ref.palette.secondary40#625B71Dark: #CCC2DC via md.ref.palette.secondary80
Medium contrast: #4A4458 via md.ref.palette.secondary30
High contrast: #332D41 via md.ref.palette.secondary20
Secondary colorsmd.sys.color.on-secondaryColormd.ref.palette.secondary100#FFFFFFDark: #332D41 via md.ref.palette.secondary20
Secondary colorsmd.sys.color.secondary-containerColormd.ref.palette.secondary90#E8DEF8Dark: #4A4458 via md.ref.palette.secondary30
Medium contrast: #625B71 via md.ref.palette.secondary40
High contrast: #4A4458 via md.ref.palette.secondary30
Secondary colorsmd.sys.color.on-secondary-containerColormd.ref.palette.secondary30#4A4458Dark: #E8DEF8 via md.ref.palette.secondary90
Medium contrast: #FFFFFF via md.ref.palette.secondary100
High contrast: #FFFFFF via md.ref.palette.secondary100
Tertiary colorsmd.sys.color.tertiaryColormd.ref.palette.tertiary40#7D5260Dark: #EFB8C8 via md.ref.palette.tertiary80
Medium contrast: #633B48 via md.ref.palette.tertiary30
High contrast: #492532 via md.ref.palette.tertiary20
Tertiary colorsmd.sys.color.on-tertiaryColormd.ref.palette.tertiary100#FFFFFFDark: #492532 via md.ref.palette.tertiary20
Tertiary colorsmd.sys.color.tertiary-containerColormd.ref.palette.tertiary90#FFD8E4Dark: #633B48 via md.ref.palette.tertiary30
Medium contrast: #7D5260 via md.ref.palette.tertiary40
High contrast: #633B48 via md.ref.palette.tertiary30
Tertiary colorsmd.sys.color.on-tertiary-containerColormd.ref.palette.tertiary30#633B48Dark: #FFD8E4 via md.ref.palette.tertiary90
Medium contrast: #FFFFFF via md.ref.palette.tertiary100
High contrast: #FFFFFF via md.ref.palette.tertiary100
Error colorsmd.sys.color.errorColormd.ref.palette.error40#B3261EDark: #F2B8B5 via md.ref.palette.error80
Medium contrast: #8C1D18 via md.ref.palette.error30
High contrast: #601410 via md.ref.palette.error20
Error colorsmd.sys.color.on-errorColormd.ref.palette.error100#FFFFFFDark: #601410 via md.ref.palette.error20
Error colorsmd.sys.color.error-containerColormd.ref.palette.error90#F9DEDCDark: #8C1D18 via md.ref.palette.error30
Medium contrast: #B3261E via md.ref.palette.error40
High contrast: #8C1D18 via md.ref.palette.error30
Error colorsmd.sys.color.on-error-containerColormd.ref.palette.error30#8C1D18Dark: #F9DEDC via md.ref.palette.error90
Medium contrast: #FFFFFF via md.ref.palette.error100
High contrast: #FFFFFF via md.ref.palette.error100
Surface colorsmd.sys.color.surfaceColormd.ref.palette.neutral98#FEF7FFDark: #141218 via md.ref.palette.neutral6
Surface colorsmd.sys.color.on-surfaceColormd.ref.palette.neutral10#1D1B20Dark: #E6E0E9 via md.ref.palette.neutral90
Medium contrast: #000000 via md.ref.palette.neutral0
High contrast: #000000 via md.ref.palette.neutral0
Surface colorsmd.sys.color.surface-variantColormd.ref.palette.neutral-variant90#E7E0ECDark: #49454F via md.ref.palette.neutral-variant30
Surface colorsmd.sys.color.on-surface-variantColormd.ref.palette.neutral-variant30#49454FDark: #CAC4D0 via md.ref.palette.neutral-variant80
Medium contrast: #322F37 via md.ref.palette.neutral-variant20
High contrast: #000000 via md.ref.palette.neutral-variant0
Surface colorsmd.sys.color.surface-container-highestColormd.ref.palette.neutral90#E6E0E9Dark: #36343B via md.ref.palette.neutral22
Surface colorsmd.sys.color.surface-container-highColormd.ref.palette.neutral92#ECE6F0Dark: #2B2930 via md.ref.palette.neutral17
Surface colorsmd.sys.color.surface-containerColormd.ref.palette.neutral94#F3EDF7Dark: #211F26 via md.ref.palette.neutral12
Surface colorsmd.sys.color.surface-container-lowColormd.ref.palette.neutral96#F7F2FADark: #1D1B20 via md.ref.palette.neutral10
Surface colorsmd.sys.color.surface-container-lowestColormd.ref.palette.neutral100#FFFFFFDark: #0F0D13 via md.ref.palette.neutral4
Surface colorsmd.sys.color.inverse-surfaceColormd.ref.palette.neutral20#322F35Dark: #E6E0E9 via md.ref.palette.neutral90
Surface colorsmd.sys.color.inverse-on-surfaceColormd.ref.palette.neutral95#F5EFF7Dark: #322F35 via md.ref.palette.neutral20
Medium contrast: #FFFFFF via md.ref.palette.neutral100
High contrast: #FFFFFF via md.ref.palette.neutral100
Surface colorsmd.sys.color.surface-tint (deprecated)Colormd.sys.color.primary → md.ref.palette.primary40#6750A4Dark: #D0BCFF via md.ref.palette.primary80
Medium contrast: #4F378B via md.ref.palette.primary30
High contrast: #381E72 via md.ref.palette.primary20
Surface colorsmd.sys.color.surface-tint-color (deprecated)Colormd.sys.color.primary → md.ref.palette.primary40#6750A4Dark: #D0BCFF via md.ref.palette.primary80
Medium contrast: #4F378B via md.ref.palette.primary30
High contrast: #381E72 via md.ref.palette.primary20
Outline colorsmd.sys.color.outlineColormd.ref.palette.neutral-variant50#79747EDark: #938F99 via md.ref.palette.neutral-variant60
Medium contrast: #49454F via md.ref.palette.neutral-variant30
High contrast: #322F37 via md.ref.palette.neutral-variant20
Outline colorsmd.sys.color.outline-variantColormd.ref.palette.neutral-variant80#CAC4D0Dark: #49454F via md.ref.palette.neutral-variant30
Medium contrast: #79747E via md.ref.palette.neutral-variant50
High contrast: #49454F via md.ref.palette.neutral-variant30
Add-ons › Add-on primary colorsmd.sys.color.primary-fixedColormd.ref.palette.primary90#EADDFFMedium contrast: #6750A4 via md.ref.palette.primary40
High contrast: #4F378B via md.ref.palette.primary30
Add-ons › Add-on primary colorsmd.sys.color.on-primary-fixedColormd.ref.palette.primary10#21005DMedium contrast: #FFFFFF via md.ref.palette.primary100
High contrast: #FFFFFF via md.ref.palette.primary100
Add-ons › Add-on primary colorsmd.sys.color.primary-fixed-dimColormd.ref.palette.primary80#D0BCFFMedium contrast: #4F378B via md.ref.palette.primary30
High contrast: #381E72 via md.ref.palette.primary20
Add-ons › Add-on primary colorsmd.sys.color.on-primary-fixed-variantColormd.ref.palette.primary30#4F378BMedium contrast: #FFFFFF via md.ref.palette.primary100
High contrast: #FFFFFF via md.ref.palette.primary100
Add-ons › Add-on primary colorsmd.sys.color.inverse-primaryColormd.ref.palette.primary80#D0BCFFDark: #6750A4 via md.ref.palette.primary40
Add-ons › Add-on secondary colorsmd.sys.color.secondary-fixedColormd.ref.palette.secondary90#E8DEF8Medium contrast: #625B71 via md.ref.palette.secondary40
High contrast: #4A4458 via md.ref.palette.secondary30
Add-ons › Add-on secondary colorsmd.sys.color.on-secondary-fixedColormd.ref.palette.secondary10#1D192BMedium contrast: #FFFFFF via md.ref.palette.secondary100
High contrast: #FFFFFF via md.ref.palette.secondary100
Add-ons › Add-on secondary colorsmd.sys.color.secondary-fixed-dimColormd.ref.palette.secondary80#CCC2DCMedium contrast: #4A4458 via md.ref.palette.secondary30
High contrast: #332D41 via md.ref.palette.secondary20
Add-ons › Add-on secondary colorsmd.sys.color.on-secondary-fixed-variantColormd.ref.palette.secondary30#4A4458Medium contrast: #FFFFFF via md.ref.palette.secondary100
High contrast: #FFFFFF via md.ref.palette.secondary100
Add-ons › Add-on tertiary colorsmd.sys.color.tertiary-fixedColormd.ref.palette.tertiary90#FFD8E4Medium contrast: #7D5260 via md.ref.palette.tertiary40
High contrast: #633B48 via md.ref.palette.tertiary30
Add-ons › Add-on tertiary colorsmd.sys.color.on-tertiary-fixedColormd.ref.palette.tertiary10#31111DMedium contrast: #FFFFFF via md.ref.palette.tertiary100
High contrast: #FFFFFF via md.ref.palette.tertiary100
Add-ons › Add-on tertiary colorsmd.sys.color.tertiary-fixed-dimColormd.ref.palette.tertiary80#EFB8C8Medium contrast: #633B48 via md.ref.palette.tertiary30
High contrast: #492532 via md.ref.palette.tertiary20
Add-ons › Add-on tertiary colorsmd.sys.color.on-tertiary-fixed-variantColormd.ref.palette.tertiary30#633B48Medium contrast: #FFFFFF via md.ref.palette.tertiary100
High contrast: #FFFFFF via md.ref.palette.tertiary100
Add-ons › Add-on surface colorsmd.sys.color.backgroundColormd.ref.palette.neutral98#FEF7FFDark: #141218 via md.ref.palette.neutral6
Add-ons › Add-on surface colorsmd.sys.color.on-backgroundColormd.ref.palette.neutral10#1D1B20Dark: #E6E0E9 via md.ref.palette.neutral90
Medium contrast: #000000 via md.ref.palette.neutral0
High contrast: #000000 via md.ref.palette.neutral0
Add-ons › Add-on surface colorsmd.sys.color.surface-brightColormd.ref.palette.neutral98#FEF7FFDark: #3B383E via md.ref.palette.neutral24
Add-ons › Add-on surface colorsmd.sys.color.surface-dimColormd.ref.palette.neutral87#DED8E1Dark: #141218 via md.ref.palette.neutral6
Add-ons › Add-on surface colorsmd.sys.color.scrimColormd.ref.palette.neutral0#000000—
Add-ons › Add-on surface colorsmd.sys.color.shadowColormd.ref.palette.neutral0#000000—

Palettes · md.ref.palette · 239 tokens

All tonal color tokens available in the default color scheme

GroupTokenTypeReference chainResolved valueOther contexts
Static palette › Static – Bluemd.ref.palette.blue98Color—#F5FAFF—
Static palette › Static – Bluemd.ref.palette.blue95Color—#E7F2FF—
Static palette › Static – Bluemd.ref.palette.blue90Color—#D0E4FF—
Static palette › Static – Bluemd.ref.palette.blue80Color—#A1C9FF—
Static palette › Static – Bluemd.ref.palette.blue70Color—#76ACFF—
Static palette › Static – Bluemd.ref.palette.blue60Color—#4E8FF8—
Static palette › Static – Bluemd.ref.palette.blue50Color—#3271EA—
Static palette › Static – Bluemd.ref.palette.blue40Color—#1157CE—
Static palette › Static – Bluemd.ref.palette.blue30Color—#04409F—
Static palette › Static – Bluemd.ref.palette.blue20Color—#012C6F—
Static palette › Static – Bluemd.ref.palette.blue10Color—#001944—
Static palette › Static – Bluemd.ref.palette.blue0Color—#000000—
Static palette › Static – Bluemd.ref.palette.blue100Color—#FFFFFF—
Static palette › Static – Yellowmd.ref.palette.yellow98Color—#FFFADE—
Static palette › Static – Yellowmd.ref.palette.yellow95Color—#FFF2B4—
Static palette › Static – Yellowmd.ref.palette.yellow90Color—#FFE07C—
Static palette › Static – Yellowmd.ref.palette.yellow80Color—#FCBD00—
Static palette › Static – Yellowmd.ref.palette.yellow70Color—#EF9800—
Static palette › Static – Yellowmd.ref.palette.yellow60Color—#D37B00—
Static palette › Static – Yellowmd.ref.palette.yellow50Color—#B16300—
Static palette › Static – Yellowmd.ref.palette.yellow40Color—#8F4E06—
Static palette › Static – Yellowmd.ref.palette.yellow30Color—#6D3A01—
Static palette › Static – Yellowmd.ref.palette.yellow20Color—#4D2600—
Static palette › Static – Yellowmd.ref.palette.yellow10Color—#2F1400—
Static palette › Static – Yellowmd.ref.palette.yellow0Color—#000000—
Static palette › Static – Yellowmd.ref.palette.yellow100Color—#FFFFFF—
Static palette › Static – Redmd.ref.palette.red98Color—#FFF8F8—
Static palette › Static – Redmd.ref.palette.red95Color—#FFECEE—
Static palette › Static – Redmd.ref.palette.red90Color—#FFDADC—
Static palette › Static – Redmd.ref.palette.red80Color—#FFB3AE—
Static palette › Static – Redmd.ref.palette.red70Color—#FF8983—
Static palette › Static – Redmd.ref.palette.red60Color—#F55E57—
Static palette › Static – Redmd.ref.palette.red50Color—#DB372D—
Static palette › Static – Redmd.ref.palette.red40Color—#B3251E—
Static palette › Static – Redmd.ref.palette.red30Color—#8A1A16—
Static palette › Static – Redmd.ref.palette.red20Color—#60150F—
Static palette › Static – Redmd.ref.palette.red10Color—#3A0907—
Static palette › Static – Redmd.ref.palette.red0Color—#000000—
Static palette › Static – Redmd.ref.palette.red100Color—#FFFFFF—
Static palette › Static – Purplemd.ref.palette.purple98Color—#FDF8FF—
Static palette › Static – Purplemd.ref.palette.purple95Color—#F7ECFE—
Static palette › Static – Purplemd.ref.palette.purple90Color—#EEDCFE—
Static palette › Static – Purplemd.ref.palette.purple80Color—#D9BAFD—
Static palette › Static – Purplemd.ref.palette.purple70Color—#C597FF—
Static palette › Static – Purplemd.ref.palette.purple60Color—#AD72FF—
Static palette › Static – Purplemd.ref.palette.purple50Color—#9254EA—
Static palette › Static – Purplemd.ref.palette.purple40Color—#7438D2—
Static palette › Static – Purplemd.ref.palette.purple30Color—#5629A4—
Static palette › Static – Purplemd.ref.palette.purple20Color—#400B84—
Static palette › Static – Purplemd.ref.palette.purple10Color—#280255—
Static palette › Static – Purplemd.ref.palette.purple0Color—#000000—
Static palette › Static – Purplemd.ref.palette.purple100Color—#FFFFFF—
Static palette › Static – Blue variantmd.ref.palette.blue-variant98Color—#F4FAFF—
Static palette › Static – Blue variantmd.ref.palette.blue-variant95Color—#E0F4FF—
Static palette › Static – Blue variantmd.ref.palette.blue-variant90Color—#BDE9FF—
Static palette › Static – Blue variantmd.ref.palette.blue-variant80Color—#67D4FF—
Static palette › Static – Blue variantmd.ref.palette.blue-variant70Color—#00BBEA—
Static palette › Static – Blue variantmd.ref.palette.blue-variant60Color—#009DC9—
Static palette › Static – Blue variantmd.ref.palette.blue-variant50Color—#0081A8—
Static palette › Static – Blue variantmd.ref.palette.blue-variant40Color—#006788—
Static palette › Static – Blue variantmd.ref.palette.blue-variant30Color—#004D68—
Static palette › Static – Blue variantmd.ref.palette.blue-variant20Color—#003549—
Static palette › Static – Blue variantmd.ref.palette.blue-variant10Color—#001F2D—
Static palette › Static – Blue variantmd.ref.palette.blue-variant0Color—#000000—
Static palette › Static – Blue variantmd.ref.palette.blue-variant100Color—#FFFFFF—
Static palette › Static – Cyanmd.ref.palette.cyan98Color—#F0FBFF—
Static palette › Static – Cyanmd.ref.palette.cyan95Color—#D8F6FF—
Static palette › Static – Cyanmd.ref.palette.cyan90Color—#ACEDFF—
Static palette › Static – Cyanmd.ref.palette.cyan80Color—#60D5F3—
Static palette › Static – Cyanmd.ref.palette.cyan70Color—#00BBDF—
Static palette › Static – Cyanmd.ref.palette.cyan60Color—#009EBB—
Static palette › Static – Cyanmd.ref.palette.cyan50Color—#00839B—
Static palette › Static – Cyanmd.ref.palette.cyan40Color—#00687C—
Static palette › Static – Cyanmd.ref.palette.cyan30Color—#004E5D—
Static palette › Static – Cyanmd.ref.palette.cyan20Color—#003641—
Static palette › Static – Cyanmd.ref.palette.cyan10Color—#001F26—
Static palette › Static – Cyanmd.ref.palette.cyan0Color—#000000—
Static palette › Static – Cyanmd.ref.palette.cyan100Color—#FFFFFF—
Static palette › Static – Greymd.ref.palette.grey98Color—#F9F9F9—
Static palette › Static – Greymd.ref.palette.grey95Color—#F2F2F2—
Static palette › Static – Greymd.ref.palette.grey90Color—#E3E3E3—
Static palette › Static – Greymd.ref.palette.grey80Color—#C7C7C7—
Static palette › Static – Greymd.ref.palette.grey70Color—#ABABAB—
Static palette › Static – Greymd.ref.palette.grey60Color—#919191—
Static palette › Static – Greymd.ref.palette.grey50Color—#777777—
Static palette › Static – Greymd.ref.palette.grey40Color—#5E5E5E—
Static palette › Static – Greymd.ref.palette.grey30Color—#474747—
Static palette › Static – Greymd.ref.palette.grey20Color—#303030—
Static palette › Static – Greymd.ref.palette.grey10Color—#1B1B1C—
Static palette › Static – Greymd.ref.palette.grey0Color—#000000—
Static palette › Static – Greymd.ref.palette.grey100Color—#FFFFFF—
Static palette › Static – Greenmd.ref.palette.green98Color—#F2FCEF—
Static palette › Static – Greenmd.ref.palette.green95Color—#DDF8D8—
Static palette › Static – Greenmd.ref.palette.green90Color—#BEEFBB—
Static palette › Static – Greenmd.ref.palette.green80Color—#80DA88—
Static palette › Static – Greenmd.ref.palette.green70Color—#44C265—
Static palette › Static – Greenmd.ref.palette.green60Color—#1AA64A—
Static palette › Static – Greenmd.ref.palette.green50Color—#128937—
Static palette › Static – Greenmd.ref.palette.green40Color—#006C35—
Static palette › Static – Greenmd.ref.palette.green30Color—#00522C—
Static palette › Static – Greenmd.ref.palette.green20Color—#00381F—
Static palette › Static – Greenmd.ref.palette.green10Color—#002110—
Static palette › Static – Greenmd.ref.palette.green0Color—#000000—
Static palette › Static – Greenmd.ref.palette.green100Color—#FFFFFF—
Static palette › Static – Grey variantmd.ref.palette.grey-variant98Color—#F7FAF7—
Static palette › Static – Grey variantmd.ref.palette.grey-variant95Color—#EFF2EF—
Static palette › Static – Grey variantmd.ref.palette.grey-variant90Color—#E1E3E1—
Static palette › Static – Grey variantmd.ref.palette.grey-variant80Color—#C4C7C5—
Static palette › Static – Grey variantmd.ref.palette.grey-variant70Color—#A9ACAA—
Static palette › Static – Grey variantmd.ref.palette.grey-variant60Color—#8E918F—
Static palette › Static – Grey variantmd.ref.palette.grey-variant50Color—#747775—
Static palette › Static – Grey variantmd.ref.palette.grey-variant40Color—#5C5F5E—
Static palette › Static – Grey variantmd.ref.palette.grey-variant30Color—#444746—
Static palette › Static – Grey variantmd.ref.palette.grey-variant20Color—#2D312F—
Static palette › Static – Grey variantmd.ref.palette.grey-variant10Color—#191D1C—
Static palette › Static – Grey variantmd.ref.palette.grey-variant0Color—#000000—
Static palette › Static – Grey variantmd.ref.palette.grey-variant100Color—#FFFFFF—
Static palette › Static – Orangemd.ref.palette.orange98Color—#FFF8F4—
Static palette › Static – Orangemd.ref.palette.orange95Color—#FFEDE1—
Static palette › Static – Orangemd.ref.palette.orange90Color—#FFDCC3—
Static palette › Static – Orangemd.ref.palette.orange80Color—#FFB683—
Static palette › Static – Orangemd.ref.palette.orange70Color—#FF8D41—
Static palette › Static – Orangemd.ref.palette.orange60Color—#E86E00—
Static palette › Static – Orangemd.ref.palette.orange50Color—#C05A01—
Static palette › Static – Orangemd.ref.palette.orange40Color—#9A4600—
Static palette › Static – Orangemd.ref.palette.orange30Color—#753403—
Static palette › Static – Orangemd.ref.palette.orange20Color—#522302—
Static palette › Static – Orangemd.ref.palette.orange10Color—#321200—
Static palette › Static – Orangemd.ref.palette.orange0Color—#000000—
Static palette › Static – Orangemd.ref.palette.orange100Color—#FFFFFF—
Static palette › Static – Pinkmd.ref.palette.pink98Color—#FFF7FC—
Static palette › Static – Pinkmd.ref.palette.pink95Color—#FFECF6—
Static palette › Static – Pinkmd.ref.palette.pink90Color—#FFD8EF—
Static palette › Static – Pinkmd.ref.palette.pink80Color—#FFAEE4—
Static palette › Static – Pinkmd.ref.palette.pink70Color—#FF7DD2—
Static palette › Static – Pinkmd.ref.palette.pink60Color—#F94AAB—
Static palette › Static – Pinkmd.ref.palette.pink50Color—#DC258D—
Static palette › Static – Pinkmd.ref.palette.pink40Color—#B60D6E—
Static palette › Static – Pinkmd.ref.palette.pink30Color—#8D0053—
Static palette › Static – Pinkmd.ref.palette.pink20Color—#620438—
Static palette › Static – Pinkmd.ref.palette.pink10Color—#3D0023—
Static palette › Static – Pinkmd.ref.palette.pink0Color—#000000—
Static palette › Static – Pinkmd.ref.palette.pink100Color—#FFFFFF—
Static palette › Static – Black whitemd.ref.palette.whiteColor—#FFFFFF—
Static palette › Static – Black whitemd.ref.palette.blackColor—#000000—
Baseline palette › Baseline – Primarymd.ref.palette.primary100Color—#FFFFFF—
Baseline palette › Baseline – Primarymd.ref.palette.primary99Color—#FFFBFE—
Baseline palette › Baseline – Primarymd.ref.palette.primary98Color—#FEF7FF—
Baseline palette › Baseline – Primarymd.ref.palette.primary95Color—#F6EDFF—
Baseline palette › Baseline – Primarymd.ref.palette.primary90Color—#EADDFF—
Baseline palette › Baseline – Primarymd.ref.palette.primary80Color—#D0BCFF—
Baseline palette › Baseline – Primarymd.ref.palette.primary70Color—#B69DF8—
Baseline palette › Baseline – Primarymd.ref.palette.primary60Color—#9A82DB—
Baseline palette › Baseline – Primarymd.ref.palette.primary50Color—#7F67BE—
Baseline palette › Baseline – Primarymd.ref.palette.primary40Color—#6750A4—
Baseline palette › Baseline – Primarymd.ref.palette.primary30Color—#4F378B—
Baseline palette › Baseline – Primarymd.ref.palette.primary20Color—#381E72—
Baseline palette › Baseline – Primarymd.ref.palette.primary10Color—#21005D—
Baseline palette › Baseline – Primarymd.ref.palette.primary0Color—#000000—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary100Color—#FFFFFF—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary99Color—#FFFBFE—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary98Color—#FEF7FF—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary95Color—#F6EDFF—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary90Color—#E8DEF8—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary80Color—#CCC2DC—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary70Color—#B0A7C0—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary60Color—#958DA5—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary50Color—#7A7289—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary40Color—#625B71—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary30Color—#4A4458—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary20Color—#332D41—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary10Color—#1D192B—
Baseline palette › Baseline – Secondarymd.ref.palette.secondary0Color—#000000—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary100Color—#FFFFFF—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary99Color—#FFFBFA—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary98Color—#FFF8F8—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary95Color—#FFECF1—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary90Color—#FFD8E4—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary80Color—#EFB8C8—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary70Color—#D29DAC—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary60Color—#B58392—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary50Color—#986977—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary40Color—#7D5260—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary30Color—#633B48—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary20Color—#492532—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary10Color—#31111D—
Baseline palette › Baseline – Tertiarymd.ref.palette.tertiary0Color—#000000—
Baseline palette › Baseline – Errormd.ref.palette.error100Color—#FFFFFF—
Baseline palette › Baseline – Errormd.ref.palette.error99Color—#FFFBF9—
Baseline palette › Baseline – Errormd.ref.palette.error98Color—#FFF8F7—
Baseline palette › Baseline – Errormd.ref.palette.error95Color—#FCEEEE—
Baseline palette › Baseline – Errormd.ref.palette.error90Color—#F9DEDC—
Baseline palette › Baseline – Errormd.ref.palette.error80Color—#F2B8B5—
Baseline palette › Baseline – Errormd.ref.palette.error70Color—#EC928E—
Baseline palette › Baseline – Errormd.ref.palette.error60Color—#E46962—
Baseline palette › Baseline – Errormd.ref.palette.error50Color—#DC362E—
Baseline palette › Baseline – Errormd.ref.palette.error40Color—#B3261E—
Baseline palette › Baseline – Errormd.ref.palette.error30Color—#8C1D18—
Baseline palette › Baseline – Errormd.ref.palette.error20Color—#601410—
Baseline palette › Baseline – Errormd.ref.palette.error10Color—#410E0B—
Baseline palette › Baseline – Errormd.ref.palette.error0Color—#000000—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral100Color—#FFFFFF—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral99Color—#FFFBFF—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral98Color—#FEF7FF—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral96Color—#F7F2FA—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral95Color—#F5EFF7—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral94Color—#F3EDF7—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral92Color—#ECE6F0—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral90Color—#E6E0E9—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral87Color—#DED8E1—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral80Color—#CAC5CD—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral70Color—#AEA9B1—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral60Color—#938F96—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral50Color—#79767D—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral40Color—#605D64—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral30Color—#48464C—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral24Color—#3B383E—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral22Color—#36343B—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral20Color—#322F35—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral17Color—#2B2930—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral12Color—#211F26—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral10Color—#1D1B20—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral6Color—#141218—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral4Color—#0F0D13—
Baseline palette › Baseline – Neutralmd.ref.palette.neutral0Color—#000000—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant100Color—#FFFFFF—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant99Color—#FFFBFE—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant98Color—#FDF7FF—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant95Color—#F5EEFA—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant90Color—#E7E0EC—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant80Color—#CAC4D0—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant70Color—#AEA9B4—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant60Color—#938F99—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant50Color—#79747E—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant40Color—#605D66—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant30Color—#49454F—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant20Color—#322F37—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant10Color—#1D1A22—
Baseline palette › Baseline – Neutral variantmd.ref.palette.neutral-variant0Color—#000000—

Design with baseline ​

Use the Design Kit and M3 baseline colors in new design files ​

  1. Create your Figma file. Enable the M3 Design Kit in your Assets panel.
  2. Compose screens and layouts using Material Components from the design kit
  3. Apply M3 baseline color roles to custom components and UI elements by hovering on the element's color property in the Design panel on the right of the screen and selecting the Style icon (four dots). This opens a selection dialog.
  4. Search for "M3" to see the baseline color roles
  5. Select the baseline color role that most closely matches the use case and intent (see Color roles for more information on what color to use where)
  6. Repeat until all custom elements are using M3 baseline color roles

Apply baseline colors to an existing file ​

First, get the M3 baseline colors into your file

  1. Open your Figma design file. Select the Actions menu (or Ctrl/Command+K).
  2. Find the Material Theme Builder plugin and select Run. This will open a plugin dialog showing the default color scheme, including Core colors and Extended colors.
  3. Open the plugin's Settings (gear icon at lower right of dialog) and select the checkbox for Generate State Layers. This makes sure there are color for the state layers needed to design interactions. Learn more about state layers
  4. Navigate out of settings.
  5. With the Current Theme dropdown at the top of the dialog, select Baseline.
  6. Select the frames or components in your file and then hit Swap in the bottom right of the dialog. This will automatically update the colors for any M3 Design Kit components.

Then, update any remaining non-M3 color styles

  1. Manually change any hex values or non-M3 color styles by selecting all and looking through the Selection colors in the Design panel on the right of the screen.
  2. Any colors that don't start with "M3" need to be replaced with a corresponding baseline color.
  3. Hover on a non-M3 color row in the Design panel and select the Style icon (four dots). This opens a selection dialog.
  4. Search for "M3" to see the baseline color roles.
  5. Select the baseline color role that most closely matches that color's use case (see Color roles for more information on what color to use where) and select Use style to apply it to the selected objects.
  6. Repeat until all non-M3 colors in the file have been replaced with M3 baseline color roles.

Need to make adjustments to the scheme? Check out Advanced customizations

Unofficial offline mirror. Content © Google, licensed under CC BY 4.0.

Material Design is a trademark of Google LLC.