--- url: /styles/color/static/baseline.md description: >- Static color schemes are ideal for branded products that should have a consistent, uniform design --- # Static color schemes Static color schemes are ideal for branded products that should have a consistent, uniform design **Baseline** · [Custom brand](custom-brand.md) ![Static color schemes](/assets/c104f12e-mroe1r89-color.CNseQ7zK.webp) **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.](/assets/41d8aca1-m4k1tpg9-5.YnpJhMVB.webp) Music app with the static baseline color scheme ![Tablet screenshot of a news app.](/assets/1b3e8739-mlikbtg5-6.4jpEcy3j.webp) News app with the static baseline color scheme ## Baseline colors Get baseline colors in Figma using the [Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder "Material Theme Builder (MTB) is a Figma plugin that allows markers to emulate the color extraction process for dynamic color and create custom tonal schemes."). ![Color swatches showing the entire baseline color scheme and derivative accent colors.](/assets/dc0b40c8-lnomy8pz-static-baseline-colors-lt.DVBuuu6u.webp) Baseline scheme colors in light theme ![Color swatches showing the entire baseline color scheme and derivative accent colors.](/assets/b0ae331c-lnomz44y-static-baseline-colors-lt-1.lldfWQMf.webp) Baseline scheme colors in dark theme ## Baseline color tokens ::: token-table color-20543ce18892f7d9-3a9d9d29 **Color tokens** · 2 token sets · 289 tokens · [live token table](https://m3.material.io/styles/color/static/baseline) · 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. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | Primary colors | `md.sys.color.primary` | Color | `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Primary colors | `md.sys.color.on-primary` | Color | `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | Primary colors | `md.sys.color.primary-container` | Color | `md.ref.palette.primary90` | `#EADDFF` | Dark: `#4F378B` via `md.ref.palette.primary30`
Medium contrast: `#6750A4` via `md.ref.palette.primary40`
High contrast: `#4F378B` via `md.ref.palette.primary30` | | Primary colors | `md.sys.color.on-primary-container` | Color | `md.ref.palette.primary30` | `#4F378B` | Dark: `#EADDFF` via `md.ref.palette.primary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`
High contrast: `#FFFFFF` via `md.ref.palette.primary100` | | Secondary colors | `md.sys.color.secondary` | Color | `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | Secondary colors | `md.sys.color.on-secondary` | Color | `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` | | Secondary colors | `md.sys.color.secondary-container` | Color | `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`
Medium contrast: `#625B71` via `md.ref.palette.secondary40`
High contrast: `#4A4458` via `md.ref.palette.secondary30` | | Secondary colors | `md.sys.color.on-secondary-container` | Color | `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | Tertiary colors | `md.sys.color.tertiary` | Color | `md.ref.palette.tertiary40` | `#7D5260` | Dark: `#EFB8C8` via `md.ref.palette.tertiary80`
Medium contrast: `#633B48` via `md.ref.palette.tertiary30`
High contrast: `#492532` via `md.ref.palette.tertiary20` | | Tertiary colors | `md.sys.color.on-tertiary` | Color | `md.ref.palette.tertiary100` | `#FFFFFF` | Dark: `#492532` via `md.ref.palette.tertiary20` | | Tertiary colors | `md.sys.color.tertiary-container` | Color | `md.ref.palette.tertiary90` | `#FFD8E4` | Dark: `#633B48` via `md.ref.palette.tertiary30`
Medium contrast: `#7D5260` via `md.ref.palette.tertiary40`
High contrast: `#633B48` via `md.ref.palette.tertiary30` | | Tertiary colors | `md.sys.color.on-tertiary-container` | Color | `md.ref.palette.tertiary30` | `#633B48` | Dark: `#FFD8E4` via `md.ref.palette.tertiary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`
High contrast: `#FFFFFF` via `md.ref.palette.tertiary100` | | Error colors | `md.sys.color.error` | Color | `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`
Medium contrast: `#8C1D18` via `md.ref.palette.error30`
High contrast: `#601410` via `md.ref.palette.error20` | | Error colors | `md.sys.color.on-error` | Color | `md.ref.palette.error100` | `#FFFFFF` | Dark: `#601410` via `md.ref.palette.error20` | | Error colors | `md.sys.color.error-container` | Color | `md.ref.palette.error90` | `#F9DEDC` | Dark: `#8C1D18` via `md.ref.palette.error30`
Medium contrast: `#B3261E` via `md.ref.palette.error40`
High contrast: `#8C1D18` via `md.ref.palette.error30` | | Error colors | `md.sys.color.on-error-container` | Color | `md.ref.palette.error30` | `#8C1D18` | Dark: `#F9DEDC` via `md.ref.palette.error90`
Medium contrast: `#FFFFFF` via `md.ref.palette.error100`
High contrast: `#FFFFFF` via `md.ref.palette.error100` | | Surface colors | `md.sys.color.surface` | Color | `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` | | Surface colors | `md.sys.color.on-surface` | Color | `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | Surface colors | `md.sys.color.surface-variant` | Color | `md.ref.palette.neutral-variant90` | `#E7E0EC` | Dark: `#49454F` via `md.ref.palette.neutral-variant30` | | Surface colors | `md.sys.color.on-surface-variant` | Color | `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#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 colors | `md.sys.color.surface-container-highest` | Color | `md.ref.palette.neutral90` | `#E6E0E9` | Dark: `#36343B` via `md.ref.palette.neutral22` | | Surface colors | `md.sys.color.surface-container-high` | Color | `md.ref.palette.neutral92` | `#ECE6F0` | Dark: `#2B2930` via `md.ref.palette.neutral17` | | Surface colors | `md.sys.color.surface-container` | Color | `md.ref.palette.neutral94` | `#F3EDF7` | Dark: `#211F26` via `md.ref.palette.neutral12` | | Surface colors | `md.sys.color.surface-container-low` | Color | `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` | | Surface colors | `md.sys.color.surface-container-lowest` | Color | `md.ref.palette.neutral100` | `#FFFFFF` | Dark: `#0F0D13` via `md.ref.palette.neutral4` | | Surface colors | `md.sys.color.inverse-surface` | Color | `md.ref.palette.neutral20` | `#322F35` | Dark: `#E6E0E9` via `md.ref.palette.neutral90` | | Surface colors | `md.sys.color.inverse-on-surface` | Color | `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
High contrast: `#FFFFFF` via `md.ref.palette.neutral100` | | Surface colors | `md.sys.color.surface-tint` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Surface colors | `md.sys.color.surface-tint-color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Outline colors | `md.sys.color.outline` | Color | `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#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 colors | `md.sys.color.outline-variant` | Color | `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#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 colors | `md.sys.color.primary-fixed` | Color | `md.ref.palette.primary90` | `#EADDFF` | Medium contrast: `#6750A4` via `md.ref.palette.primary40`
High contrast: `#4F378B` via `md.ref.palette.primary30` | | Add-ons › Add-on primary colors | `md.sys.color.on-primary-fixed` | Color | `md.ref.palette.primary10` | `#21005D` | Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`
High contrast: `#FFFFFF` via `md.ref.palette.primary100` | | Add-ons › Add-on primary colors | `md.sys.color.primary-fixed-dim` | Color | `md.ref.palette.primary80` | `#D0BCFF` | Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Add-ons › Add-on primary colors | `md.sys.color.on-primary-fixed-variant` | Color | `md.ref.palette.primary30` | `#4F378B` | Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`
High contrast: `#FFFFFF` via `md.ref.palette.primary100` | | Add-ons › Add-on primary colors | `md.sys.color.inverse-primary` | Color | `md.ref.palette.primary80` | `#D0BCFF` | Dark: `#6750A4` via `md.ref.palette.primary40` | | Add-ons › Add-on secondary colors | `md.sys.color.secondary-fixed` | Color | `md.ref.palette.secondary90` | `#E8DEF8` | Medium contrast: `#625B71` via `md.ref.palette.secondary40`
High contrast: `#4A4458` via `md.ref.palette.secondary30` | | Add-ons › Add-on secondary colors | `md.sys.color.on-secondary-fixed` | Color | `md.ref.palette.secondary10` | `#1D192B` | Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | Add-ons › Add-on secondary colors | `md.sys.color.secondary-fixed-dim` | Color | `md.ref.palette.secondary80` | `#CCC2DC` | Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | Add-ons › Add-on secondary colors | `md.sys.color.on-secondary-fixed-variant` | Color | `md.ref.palette.secondary30` | `#4A4458` | Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | Add-ons › Add-on tertiary colors | `md.sys.color.tertiary-fixed` | Color | `md.ref.palette.tertiary90` | `#FFD8E4` | Medium contrast: `#7D5260` via `md.ref.palette.tertiary40`
High contrast: `#633B48` via `md.ref.palette.tertiary30` | | Add-ons › Add-on tertiary colors | `md.sys.color.on-tertiary-fixed` | Color | `md.ref.palette.tertiary10` | `#31111D` | Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`
High contrast: `#FFFFFF` via `md.ref.palette.tertiary100` | | Add-ons › Add-on tertiary colors | `md.sys.color.tertiary-fixed-dim` | Color | `md.ref.palette.tertiary80` | `#EFB8C8` | Medium contrast: `#633B48` via `md.ref.palette.tertiary30`
High contrast: `#492532` via `md.ref.palette.tertiary20` | | Add-ons › Add-on tertiary colors | `md.sys.color.on-tertiary-fixed-variant` | Color | `md.ref.palette.tertiary30` | `#633B48` | Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`
High contrast: `#FFFFFF` via `md.ref.palette.tertiary100` | | Add-ons › Add-on surface colors | `md.sys.color.background` | Color | `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` | | Add-ons › Add-on surface colors | `md.sys.color.on-background` | Color | `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#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 colors | `md.sys.color.surface-bright` | Color | `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#3B383E` via `md.ref.palette.neutral24` | | Add-ons › Add-on surface colors | `md.sys.color.surface-dim` | Color | `md.ref.palette.neutral87` | `#DED8E1` | Dark: `#141218` via `md.ref.palette.neutral6` | | Add-ons › Add-on surface colors | `md.sys.color.scrim` | Color | `md.ref.palette.neutral0` | `#000000` | — | | Add-ons › Add-on surface colors | `md.sys.color.shadow` | Color | `md.ref.palette.neutral0` | `#000000` | — | **Palettes** · `md.ref.palette` · 239 tokens All tonal color tokens available in the default color scheme | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | Static palette › Static – Blue | `md.ref.palette.blue98` | Color | — | `#F5FAFF` | — | | Static palette › Static – Blue | `md.ref.palette.blue95` | Color | — | `#E7F2FF` | — | | Static palette › Static – Blue | `md.ref.palette.blue90` | Color | — | `#D0E4FF` | — | | Static palette › Static – Blue | `md.ref.palette.blue80` | Color | — | `#A1C9FF` | — | | Static palette › Static – Blue | `md.ref.palette.blue70` | Color | — | `#76ACFF` | — | | Static palette › Static – Blue | `md.ref.palette.blue60` | Color | — | `#4E8FF8` | — | | Static palette › Static – Blue | `md.ref.palette.blue50` | Color | — | `#3271EA` | — | | Static palette › Static – Blue | `md.ref.palette.blue40` | Color | — | `#1157CE` | — | | Static palette › Static – Blue | `md.ref.palette.blue30` | Color | — | `#04409F` | — | | Static palette › Static – Blue | `md.ref.palette.blue20` | Color | — | `#012C6F` | — | | Static palette › Static – Blue | `md.ref.palette.blue10` | Color | — | `#001944` | — | | Static palette › Static – Blue | `md.ref.palette.blue0` | Color | — | `#000000` | — | | Static palette › Static – Blue | `md.ref.palette.blue100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow98` | Color | — | `#FFFADE` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow95` | Color | — | `#FFF2B4` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow90` | Color | — | `#FFE07C` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow80` | Color | — | `#FCBD00` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow70` | Color | — | `#EF9800` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow60` | Color | — | `#D37B00` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow50` | Color | — | `#B16300` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow40` | Color | — | `#8F4E06` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow30` | Color | — | `#6D3A01` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow20` | Color | — | `#4D2600` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow10` | Color | — | `#2F1400` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow0` | Color | — | `#000000` | — | | Static palette › Static – Yellow | `md.ref.palette.yellow100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Red | `md.ref.palette.red98` | Color | — | `#FFF8F8` | — | | Static palette › Static – Red | `md.ref.palette.red95` | Color | — | `#FFECEE` | — | | Static palette › Static – Red | `md.ref.palette.red90` | Color | — | `#FFDADC` | — | | Static palette › Static – Red | `md.ref.palette.red80` | Color | — | `#FFB3AE` | — | | Static palette › Static – Red | `md.ref.palette.red70` | Color | — | `#FF8983` | — | | Static palette › Static – Red | `md.ref.palette.red60` | Color | — | `#F55E57` | — | | Static palette › Static – Red | `md.ref.palette.red50` | Color | — | `#DB372D` | — | | Static palette › Static – Red | `md.ref.palette.red40` | Color | — | `#B3251E` | — | | Static palette › Static – Red | `md.ref.palette.red30` | Color | — | `#8A1A16` | — | | Static palette › Static – Red | `md.ref.palette.red20` | Color | — | `#60150F` | — | | Static palette › Static – Red | `md.ref.palette.red10` | Color | — | `#3A0907` | — | | Static palette › Static – Red | `md.ref.palette.red0` | Color | — | `#000000` | — | | Static palette › Static – Red | `md.ref.palette.red100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Purple | `md.ref.palette.purple98` | Color | — | `#FDF8FF` | — | | Static palette › Static – Purple | `md.ref.palette.purple95` | Color | — | `#F7ECFE` | — | | Static palette › Static – Purple | `md.ref.palette.purple90` | Color | — | `#EEDCFE` | — | | Static palette › Static – Purple | `md.ref.palette.purple80` | Color | — | `#D9BAFD` | — | | Static palette › Static – Purple | `md.ref.palette.purple70` | Color | — | `#C597FF` | — | | Static palette › Static – Purple | `md.ref.palette.purple60` | Color | — | `#AD72FF` | — | | Static palette › Static – Purple | `md.ref.palette.purple50` | Color | — | `#9254EA` | — | | Static palette › Static – Purple | `md.ref.palette.purple40` | Color | — | `#7438D2` | — | | Static palette › Static – Purple | `md.ref.palette.purple30` | Color | — | `#5629A4` | — | | Static palette › Static – Purple | `md.ref.palette.purple20` | Color | — | `#400B84` | — | | Static palette › Static – Purple | `md.ref.palette.purple10` | Color | — | `#280255` | — | | Static palette › Static – Purple | `md.ref.palette.purple0` | Color | — | `#000000` | — | | Static palette › Static – Purple | `md.ref.palette.purple100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant98` | Color | — | `#F4FAFF` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant95` | Color | — | `#E0F4FF` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant90` | Color | — | `#BDE9FF` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant80` | Color | — | `#67D4FF` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant70` | Color | — | `#00BBEA` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant60` | Color | — | `#009DC9` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant50` | Color | — | `#0081A8` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant40` | Color | — | `#006788` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant30` | Color | — | `#004D68` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant20` | Color | — | `#003549` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant10` | Color | — | `#001F2D` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant0` | Color | — | `#000000` | — | | Static palette › Static – Blue variant | `md.ref.palette.blue-variant100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan98` | Color | — | `#F0FBFF` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan95` | Color | — | `#D8F6FF` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan90` | Color | — | `#ACEDFF` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan80` | Color | — | `#60D5F3` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan70` | Color | — | `#00BBDF` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan60` | Color | — | `#009EBB` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan50` | Color | — | `#00839B` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan40` | Color | — | `#00687C` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan30` | Color | — | `#004E5D` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan20` | Color | — | `#003641` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan10` | Color | — | `#001F26` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan0` | Color | — | `#000000` | — | | Static palette › Static – Cyan | `md.ref.palette.cyan100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Grey | `md.ref.palette.grey98` | Color | — | `#F9F9F9` | — | | Static palette › Static – Grey | `md.ref.palette.grey95` | Color | — | `#F2F2F2` | — | | Static palette › Static – Grey | `md.ref.palette.grey90` | Color | — | `#E3E3E3` | — | | Static palette › Static – Grey | `md.ref.palette.grey80` | Color | — | `#C7C7C7` | — | | Static palette › Static – Grey | `md.ref.palette.grey70` | Color | — | `#ABABAB` | — | | Static palette › Static – Grey | `md.ref.palette.grey60` | Color | — | `#919191` | — | | Static palette › Static – Grey | `md.ref.palette.grey50` | Color | — | `#777777` | — | | Static palette › Static – Grey | `md.ref.palette.grey40` | Color | — | `#5E5E5E` | — | | Static palette › Static – Grey | `md.ref.palette.grey30` | Color | — | `#474747` | — | | Static palette › Static – Grey | `md.ref.palette.grey20` | Color | — | `#303030` | — | | Static palette › Static – Grey | `md.ref.palette.grey10` | Color | — | `#1B1B1C` | — | | Static palette › Static – Grey | `md.ref.palette.grey0` | Color | — | `#000000` | — | | Static palette › Static – Grey | `md.ref.palette.grey100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Green | `md.ref.palette.green98` | Color | — | `#F2FCEF` | — | | Static palette › Static – Green | `md.ref.palette.green95` | Color | — | `#DDF8D8` | — | | Static palette › Static – Green | `md.ref.palette.green90` | Color | — | `#BEEFBB` | — | | Static palette › Static – Green | `md.ref.palette.green80` | Color | — | `#80DA88` | — | | Static palette › Static – Green | `md.ref.palette.green70` | Color | — | `#44C265` | — | | Static palette › Static – Green | `md.ref.palette.green60` | Color | — | `#1AA64A` | — | | Static palette › Static – Green | `md.ref.palette.green50` | Color | — | `#128937` | — | | Static palette › Static – Green | `md.ref.palette.green40` | Color | — | `#006C35` | — | | Static palette › Static – Green | `md.ref.palette.green30` | Color | — | `#00522C` | — | | Static palette › Static – Green | `md.ref.palette.green20` | Color | — | `#00381F` | — | | Static palette › Static – Green | `md.ref.palette.green10` | Color | — | `#002110` | — | | Static palette › Static – Green | `md.ref.palette.green0` | Color | — | `#000000` | — | | Static palette › Static – Green | `md.ref.palette.green100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant98` | Color | — | `#F7FAF7` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant95` | Color | — | `#EFF2EF` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant90` | Color | — | `#E1E3E1` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant80` | Color | — | `#C4C7C5` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant70` | Color | — | `#A9ACAA` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant60` | Color | — | `#8E918F` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant50` | Color | — | `#747775` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant40` | Color | — | `#5C5F5E` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant30` | Color | — | `#444746` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant20` | Color | — | `#2D312F` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant10` | Color | — | `#191D1C` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant0` | Color | — | `#000000` | — | | Static palette › Static – Grey variant | `md.ref.palette.grey-variant100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Orange | `md.ref.palette.orange98` | Color | — | `#FFF8F4` | — | | Static palette › Static – Orange | `md.ref.palette.orange95` | Color | — | `#FFEDE1` | — | | Static palette › Static – Orange | `md.ref.palette.orange90` | Color | — | `#FFDCC3` | — | | Static palette › Static – Orange | `md.ref.palette.orange80` | Color | — | `#FFB683` | — | | Static palette › Static – Orange | `md.ref.palette.orange70` | Color | — | `#FF8D41` | — | | Static palette › Static – Orange | `md.ref.palette.orange60` | Color | — | `#E86E00` | — | | Static palette › Static – Orange | `md.ref.palette.orange50` | Color | — | `#C05A01` | — | | Static palette › Static – Orange | `md.ref.palette.orange40` | Color | — | `#9A4600` | — | | Static palette › Static – Orange | `md.ref.palette.orange30` | Color | — | `#753403` | — | | Static palette › Static – Orange | `md.ref.palette.orange20` | Color | — | `#522302` | — | | Static palette › Static – Orange | `md.ref.palette.orange10` | Color | — | `#321200` | — | | Static palette › Static – Orange | `md.ref.palette.orange0` | Color | — | `#000000` | — | | Static palette › Static – Orange | `md.ref.palette.orange100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Pink | `md.ref.palette.pink98` | Color | — | `#FFF7FC` | — | | Static palette › Static – Pink | `md.ref.palette.pink95` | Color | — | `#FFECF6` | — | | Static palette › Static – Pink | `md.ref.palette.pink90` | Color | — | `#FFD8EF` | — | | Static palette › Static – Pink | `md.ref.palette.pink80` | Color | — | `#FFAEE4` | — | | Static palette › Static – Pink | `md.ref.palette.pink70` | Color | — | `#FF7DD2` | — | | Static palette › Static – Pink | `md.ref.palette.pink60` | Color | — | `#F94AAB` | — | | Static palette › Static – Pink | `md.ref.palette.pink50` | Color | — | `#DC258D` | — | | Static palette › Static – Pink | `md.ref.palette.pink40` | Color | — | `#B60D6E` | — | | Static palette › Static – Pink | `md.ref.palette.pink30` | Color | — | `#8D0053` | — | | Static palette › Static – Pink | `md.ref.palette.pink20` | Color | — | `#620438` | — | | Static palette › Static – Pink | `md.ref.palette.pink10` | Color | — | `#3D0023` | — | | Static palette › Static – Pink | `md.ref.palette.pink0` | Color | — | `#000000` | — | | Static palette › Static – Pink | `md.ref.palette.pink100` | Color | — | `#FFFFFF` | — | | Static palette › Static – Black white | `md.ref.palette.white` | Color | — | `#FFFFFF` | — | | Static palette › Static – Black white | `md.ref.palette.black` | Color | — | `#000000` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary99` | Color | — | `#FFFBFE` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary98` | Color | — | `#FEF7FF` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary95` | Color | — | `#F6EDFF` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary90` | Color | — | `#EADDFF` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary80` | Color | — | `#D0BCFF` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary70` | Color | — | `#B69DF8` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary60` | Color | — | `#9A82DB` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary50` | Color | — | `#7F67BE` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary40` | Color | — | `#6750A4` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary30` | Color | — | `#4F378B` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary20` | Color | — | `#381E72` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary10` | Color | — | `#21005D` | — | | Baseline palette › Baseline – Primary | `md.ref.palette.primary0` | Color | — | `#000000` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary99` | Color | — | `#FFFBFE` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary98` | Color | — | `#FEF7FF` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary95` | Color | — | `#F6EDFF` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary90` | Color | — | `#E8DEF8` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary80` | Color | — | `#CCC2DC` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary70` | Color | — | `#B0A7C0` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary60` | Color | — | `#958DA5` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary50` | Color | — | `#7A7289` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary40` | Color | — | `#625B71` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary30` | Color | — | `#4A4458` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary20` | Color | — | `#332D41` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary10` | Color | — | `#1D192B` | — | | Baseline palette › Baseline – Secondary | `md.ref.palette.secondary0` | Color | — | `#000000` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary99` | Color | — | `#FFFBFA` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary98` | Color | — | `#FFF8F8` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary95` | Color | — | `#FFECF1` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary90` | Color | — | `#FFD8E4` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary80` | Color | — | `#EFB8C8` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary70` | Color | — | `#D29DAC` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary60` | Color | — | `#B58392` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary50` | Color | — | `#986977` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary40` | Color | — | `#7D5260` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary30` | Color | — | `#633B48` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary20` | Color | — | `#492532` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary10` | Color | — | `#31111D` | — | | Baseline palette › Baseline – Tertiary | `md.ref.palette.tertiary0` | Color | — | `#000000` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error99` | Color | — | `#FFFBF9` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error98` | Color | — | `#FFF8F7` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error95` | Color | — | `#FCEEEE` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error90` | Color | — | `#F9DEDC` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error80` | Color | — | `#F2B8B5` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error70` | Color | — | `#EC928E` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error60` | Color | — | `#E46962` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error50` | Color | — | `#DC362E` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error40` | Color | — | `#B3261E` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error30` | Color | — | `#8C1D18` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error20` | Color | — | `#601410` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error10` | Color | — | `#410E0B` | — | | Baseline palette › Baseline – Error | `md.ref.palette.error0` | Color | — | `#000000` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral99` | Color | — | `#FFFBFF` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral98` | Color | — | `#FEF7FF` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral96` | Color | — | `#F7F2FA` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral95` | Color | — | `#F5EFF7` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral94` | Color | — | `#F3EDF7` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral92` | Color | — | `#ECE6F0` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral90` | Color | — | `#E6E0E9` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral87` | Color | — | `#DED8E1` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral80` | Color | — | `#CAC5CD` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral70` | Color | — | `#AEA9B1` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral60` | Color | — | `#938F96` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral50` | Color | — | `#79767D` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral40` | Color | — | `#605D64` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral30` | Color | — | `#48464C` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral24` | Color | — | `#3B383E` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral22` | Color | — | `#36343B` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral20` | Color | — | `#322F35` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral17` | Color | — | `#2B2930` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral12` | Color | — | `#211F26` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral10` | Color | — | `#1D1B20` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral6` | Color | — | `#141218` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral4` | Color | — | `#0F0D13` | — | | Baseline palette › Baseline – Neutral | `md.ref.palette.neutral0` | Color | — | `#000000` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant100` | Color | — | `#FFFFFF` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant99` | Color | — | `#FFFBFE` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant98` | Color | — | `#FDF7FF` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant95` | Color | — | `#F5EEFA` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant90` | Color | — | `#E7E0EC` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant80` | Color | — | `#CAC4D0` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant70` | Color | — | `#AEA9B4` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant60` | Color | — | `#938F99` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant50` | Color | — | `#79747E` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant40` | Color | — | `#605D66` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant30` | Color | — | `#49454F` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant20` | Color | — | `#322F37` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant10` | Color | — | `#1D1A22` | — | | Baseline palette › Baseline – Neutral variant | `md.ref.palette.neutral-variant0` | Color | — | `#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](https://www.figma.com/community/file/1035203688168086460) 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](../roles.md) 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](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) 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](../../../foundations/interaction/states/state-layers.md) 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](../roles.md) 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**](../advanced/overview.md)