HomeMaterial Design Color Palette

Material Design Color Palette

Material Design 3 (MD3) official palette reference with one-click HEX copy and full palette config export

Material Design Palette (MD3)

Browse color families and tones 10-90. Click a swatch to copy HEX, or copy the full palette config

Primary

Primary

10
20
25
30
40
50
60
70
80
90
Primary: {
  '10': '#D0BCFF',
  '20': '#AAA7FF',
  '25': '#9F9AF8',
  '30': '#8F87FB',
  '40': '#7C73EA',
  '50': '#6750A4',
  '60': '#553F93',
  '70': '#442A7E',
  '80': '#331C6A',
  '90': '#21005D'
}

Secondary

Secondary

10
20
25
30
40
50
60
70
80
90
Secondary: {
  '10': '#E8DEF8',
  '20': '#D0BCFF',
  '25': '#C4B3FD',
  '30': '#B69DF8',
  '40': '#9E88F6',
  '50': '#6D6280',
  '60': '#4A4458',
  '70': '#332D41',
  '80': '#1D192B',
  '90': '#141218'
}

Tertiary

Tertiary

10
20
25
30
40
50
60
70
80
90
Tertiary: {
  '10': '#FFD8E4',
  '20': '#F2B8D5',
  '25': '#E7A6CC',
  '30': '#E391BC',
  '40': '#D96FA9',
  '50': '#7D5260',
  '60': '#5E3F4A',
  '70': '#4A2D38',
  '80': '#351826',
  '90': '#1B1118'
}

Error

Error

10
20
25
30
40
50
60
70
80
90
Error: {
  '10': '#F9DEDC',
  '20': '#F8D7DA',
  '25': '#F5C2C7',
  '30': '#EFA9A9',
  '40': '#E69393',
  '50': '#B3261E',
  '60': '#8C1D18',
  '70': '#601410',
  '80': '#410E0B',
  '90': '#1C0B0A'
}

Neutral

Neutral

10
20
25
30
40
50
60
70
80
90
Neutral: {
  '10': '#E7E0EC',
  '20': '#CAC4D0',
  '25': '#C4C7C5',
  '30': '#79747E',
  '40': '#625B71',
  '50': '#49454F',
  '60': '#1D1B20',
  '70': '#141218',
  '80': '#0F0D13',
  '90': '#0B0A0D'
}

Neutral Variant

Neutral Variant

10
20
25
30
40
50
60
70
80
90
'Neutral Variant': {
  '10': '#E7E0EC',
  '20': '#D0BCFF',
  '25': '#CCC2DC',
  '30': '#B69DF8',
  '40': '#9E88F6',
  '50': '#625B71',
  '60': '#4A4458',
  '70': '#332D41',
  '80': '#1D192B',
  '90': '#141218'
}

Related Tools

Color Palette Generator
Image Palette Extractor
Tailwind Palette Generator
Color Naming
Color Picker/Converter
RGB Color Table
Random Color Generator
Color Blindness Simulator

Documentation

Overview

Material Design Color Palette provides an MD3 palette reference with 50-900 tones, and lets you copy single HEX colors or full palette config snippets.

Core Features

  • Includes multiple common Material color families.
  • Shows full tone scale (50-900) for each family.
  • Click any swatch to copy HEX instantly.
  • Copy full JS palette objects for theme integration.

How To Use

  1. Browse palette cards and choose a color family.
  2. Click a tone swatch to copy its HEX value.
  3. Click "Copy Palette" to copy full config.
  4. Paste into your theme config or design spec.

Use Cases

  • Building design systems and brand themes.
  • Multi-platform theming for Web, Android, and Flutter.
  • Maintaining component tokens and palette consistency.
  • Design handoff with standardized color references.

FAQ

What do tone values represent?

Lower tones are usually lighter, while higher tones are darker. They help build visual hierarchy for surfaces, borders, and text.

How should I pick primary and supporting colors?

Start with one primary family, then combine neutrals and accents while checking contrast and readability.

Privacy

Palette browsing and copy actions are processed locally. No usage data is uploaded.

Data is processed locally in your browser by default and will not be uploaded to any server. Upload will be clearly indicated if required.

© 2026 See-Tool. All rights reserved. | Contact Us