Material Design Colors
@mui/material/colors, the open-source
package that mirrors Google’s original specification.
Google published this palette alongside Material Design’s launch in 2014, and it became one of the most widely adopted color systems on the web — not just in Android and Flutter apps, but in countless CSS projects that borrowed it wholesale. It is worth being precise about what this page shows: Material Design 3 (2021’s “Material You”) replaced this fixed palette with a dynamic tonal color system generated from a user’s wallpaper or a chosen seed color, and no longer ships these exact swatches by default. What’s below is the original, fixed Material palette — often called “Material 2” or “Material Design classic” — which remains in wide use and is still exactly what most people mean when they search for “Material colors.”
The full palette
Click any swatch to copy its hex code. The top row of each family is the main 50–900 scale; the shorter row beneath (where present) is the accent set — brighter, more saturated colors meant for isolated highlights, not large surfaces.
Shade
50
100
200
300
400
500
600
700
800
900
red
Accent
pink
Accent
purple
Accent
deep purple
Accent
indigo
Accent
blue
Accent
light blue
Accent
cyan
Accent
teal
Accent
green
Accent
light green
Accent
lime
Accent
yellow
Accent
amber
Accent
orange
Accent
deep orange
Accent
brown
grey
blue grey
Main shades vs. accent shades
The 50–900 scale behaves like any lightness ramp: 50 is a near-white tint, 900 is the deepest, and 500 is the family’s reference color — the one shown in Google’s own color picker and the value most often copied into projects. Accent colors (A100–A700) are a separate, more saturated set layered on top for small high-attention elements — a floating action button, a badge, an active-state icon. Google’s own guidance was to use accents sparingly: three of the 19 families (Brown, Grey, and Blue Grey) have no accent set at all, precisely because a neutral tone has no vivid version to isolate.
One accessibility note worth knowing before shipping any of these: several accent colors are extremely
light or extremely saturated and fail WCAG AA as text on white at typical sizes — Yellow A200
(#ffff00) is the
most obvious case. Check any swatch you plan to use as text in the
contrast checker
before relying on it.
Switching from Material to Tailwind?
If a project is migrating off the Material palette onto Tailwind CSS, here’s each Material family’s 500 shade next to its perceptually closest Tailwind swatch — found by computing CIEDE2000 color difference against all 26 Tailwind families, not by matching names. A ΔE under 2 reads as nearly identical; higher values are a visibly different color wearing a similar name.
Using these values in code
Every hex on this page works directly in CSS (background: #2196f3;).
In Flutter, the same colors are available pre-built as Colors.blue[500]
or Colors.blueAccent[200] via the
material.dart library. In a
React or Vue project using MUI, the identical values import as blue[500] from
@mui/material/colors — the same
source this page’s data was verified against, so the numbers are guaranteed to match.
Frequently asked questions
No. This is the original, fixed Material Design palette from 2014 (often called Material 2). Material 3 (Material You) generates a dynamic tonal palette from a seed color or the user's wallpaper instead of shipping fixed swatches, so it has no direct equivalent to 'Blue 500'. This page documents the classic palette, which is still what nearly everyone means by 'Material colors' and remains in wide use across Android, Flutter, and web projects.
The 500 shade of your chosen family is the conventional default — it's saturated enough to read as an action color while usually passing contrast with white text (verify in the contrast checker, since a few families' 500 shades are borderline). 700 is a common hover/pressed state.
Accent colors in Material Design are a brighter, more saturated version of a hue, meant to draw the eye. Neutral families don't have a meaningfully 'more saturated' version — Google's specification simply never defined one for these three.
Some are, some aren't — it depends entirely on the pairing. Light shades (50-300) generally fail as text on white; dark shades (700-900) generally pass. The safest approach is to check the specific pair you plan to ship in the contrast checker rather than assuming based on the family.
Yes — they're just hex codes, usable in any CSS, design tool, or codebase. Nothing about them requires Material Design components or Flutter.
Related tools
Color Chart
Browse the full Tailwind CSS color system and the 216 web-safe colors, with hex codes and copy-to-clipboard for every swatch.
Try it → CSSBootstrap Colors
Bootstrap 5's full color system — the 10 base colors, 8 theme roles, and 9-step gray scale — with hex codes verified against Bootstrap's own source.
Try it → CSSCSS Color Names
Browse and search all 148 standard CSS/HTML color names, grouped by family, with hex codes and links to full conversions.
Try it →Check any pairing
Before shipping a Material color as text, verify it clears WCAG contrast against its background.