🎨 Material Design Color Reference
By ToolNimba Design Team · Updated 2026-06-19
Click any swatch to copy its value. Use the search box to filter by color name, shade or hex.
The Material Design 2014 color palette is the original set of named colors Google published with the first Material guidelines. Each color (Red, Pink, Purple, Indigo, Blue, Teal, Green, Amber, Orange and more) ships as a ladder of shades from 50 (lightest) to 900 (darkest), and most also include four bright accent shades (A100, A200, A400, A700). This reference shows every swatch with its hex code so you can pick the exact value you need. Click any swatch to copy it, switch between HEX and RGB, and filter the whole grid by name, shade key or hex.
What is the Material Design Colors?
Material Design organizes color as a fixed set of palettes rather than free-form picking. Every named color has a ten-step scale: 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900. The 500 shade is the canonical primary value for that color, the lighter steps (50 to 400) work well as backgrounds and surfaces, and the darker steps (600 to 900) suit text, borders and high-contrast accents. Greys and the Blue Grey neutral run on the same scale and are the backbone of most layouts.
Most colors also expose four accent shades labelled A100, A200, A400 and A700. Accents are deliberately more saturated and vivid than the standard shades, and they are meant for elements that need to grab attention: floating action buttons, switches in their on state, sliders, highlights and call-to-action chips. Brown, Grey and Blue Grey are the exceptions, they have no accent shades because they are intended as neutrals.
Because the values are fixed, the palette gives teams a shared vocabulary. Saying indigo-500 or pink-A200 points to one exact hex with no ambiguity, which keeps design files, CSS and component libraries in sync. The hex codes here are the canonical 2014 values used by the original Material color tool and the early Angular Material and MDC component sets, so they match what most legacy projects and design references expect.
When to use it
- Grabbing the exact hex or RGB for a Material color while building a UI without opening a design tool.
- Matching a legacy Angular Material or MDC theme that uses the 2014 palette.
- Choosing a primary (500) and a contrasting accent (A200 or A400) for buttons and highlights.
- Building a tonal scale for backgrounds, surfaces and text from a single color family.
- Checking which colors include accent shades and which (Brown, Grey, Blue Grey) do not.
How to use the Material Design Colors
- Scroll the grid to find the color family you want, each row is one named color.
- Read the shade key (50 to 900, or A100 to A700) and the hex shown on each swatch.
- Use the Format dropdown to switch every value between HEX and RGB.
- Type a name (indigo), a shade (blue-500 or a200) or a hex (#f44336) in the search box to filter.
- Click any swatch to copy its value to your clipboard, the status line confirms what was copied.
Formula & method
Worked examples
You want the canonical primary Indigo and need it as RGB for a CSS variable.
- Find the Indigo row and the 500 shade, the swatch shows #3f51b5.
- Split the hex into pairs: 3f, 51, b5.
- Convert each pair from base 16: 3f = 63, 51 = 81, b5 = 181.
- Set the Format dropdown to RGB to confirm: rgb(63, 81, 181).
Result: Indigo 500 is #3f51b5, which is rgb(63, 81, 181).
You need a bright accent for a floating action button on a teal theme.
- Find the Teal row, the standard primary is 500 = #009688.
- Look at the accent shades on the right of the row: A100, A200, A400, A700.
- Pick the vivid A400 = #1de9b6 for the button so it stands out against the surface.
- Click the A400 swatch to copy #1de9b6.
Result: Teal A400 (#1de9b6) gives a vivid accent that contrasts with the muted Teal 500 primary.
Primary 500 hex for each Material color family
| Color | 500 HEX | 500 RGB |
|---|---|---|
| Red | #f44336 | rgb(244, 67, 54) |
| Pink | #e91e63 | rgb(233, 30, 99) |
| Purple | #9c27b0 | rgb(156, 39, 176) |
| Indigo | #3f51b5 | rgb(63, 81, 181) |
| Blue | #2196f3 | rgb(33, 150, 243) |
| Teal | #009688 | rgb(0, 150, 136) |
| Green | #4caf50 | rgb(76, 175, 80) |
| Amber | #ffc107 | rgb(255, 193, 7) |
| Orange | #ff9800 | rgb(255, 152, 0) |
| Blue Grey | #607d8b | rgb(96, 125, 139) |
What each shade range is best used for
| Shade range | Typical use |
|---|---|
| 50 to 100 | Page and card backgrounds, very light surfaces. |
| 200 to 400 | Hover states, disabled elements, subtle fills. |
| 500 | The primary brand value for the color family. |
| 600 to 700 | Active and pressed states, secondary emphasis. |
| 800 to 900 | Headings, body text on light backgrounds, high contrast. |
| A100 to A700 | Accents: FABs, switches, sliders, call-to-action highlights. |
Common mistakes to avoid
- Expecting accents on every color. Brown, Grey and Blue Grey have no accent (A100 to A700) shades, they are designed as neutrals. Only the chromatic families carry accents, so do not look for a teal-style accent on grey.
- Confusing the 2014 palette with Material You. These are the original 2014 (Material Design 1 and 2) constants. Material 3 and Material You generate dynamic tonal palettes from a seed color and use different values, so do not mix the two systems.
- Assuming 500 always passes contrast checks. The 500 primary is a brand value, not a guaranteed accessible text color. Light primaries like Yellow 500 or Amber 500 fail contrast for body text, use a darker shade (700 to 900) or test the pairing.
- Treating shade numbers as opacity. The 50 to 900 scale is lightness, not transparency. Every swatch here is fully opaque, lowering the number gives a lighter solid color, it does not make the color see-through.
Glossary
- Shade
- A single step on a color family scale, labelled 50 (lightest) through 900 (darkest).
- Primary (500)
- The canonical default value of a Material color family, used as the main brand color.
- Accent
- A bright, highly saturated shade (A100, A200, A400, A700) meant for attention-grabbing elements.
- Neutral
- Grey, Brown and Blue Grey, low-chroma families used for surfaces, text and structure.
- HEX
- A 6-digit base-16 color code like #2196f3, two digits each for red, green and blue.
- RGB
- A color written as red, green and blue values from 0 to 255, for example rgb(33, 150, 243).
Frequently asked questions
What is the Material Design color palette?
It is the set of named colors Google published with the 2014 Material guidelines. Each color (Red, Pink, Indigo, Teal and so on) comes as shades 50 to 900, with 500 as the primary, and most also include the accent shades A100, A200, A400 and A700.
What do the numbers 50 to 900 mean?
They are lightness steps, not opacity. 50 is the lightest tint and 900 is the darkest. The 500 step is the canonical primary value for that color, lighter steps suit backgrounds and darker steps suit text and borders.
What are the A100 to A700 accent colors?
Accents are extra-saturated, vivid shades meant for elements that need to stand out, such as floating action buttons, switches, sliders and call-to-action highlights. Brown, Grey and Blue Grey have no accents because they are neutrals.
How do I copy a color code?
Click any swatch and its value is copied to your clipboard, the status line confirms it. Use the Format dropdown to choose whether you copy HEX (like #3f51b5) or RGB (like rgb(63, 81, 181)).
Is this the same as Material 3 or Material You?
No. This grid shows the fixed 2014 (Material Design 1 and 2) values used by older Angular Material and MDC projects. Material 3 and Material You build dynamic tonal palettes from a seed color and use a different system of values.
Can I search by hex or shade?
Yes. Type a color name like indigo, a specific shade like blue-500 or a200, or a hex like #f44336 in the search box. The grid filters live to show only matching color families and swatches.