blue A400
#2979FF · Delta E 2.3
blue 700
#1976D2 · Delta E 4.2
blue A200
#448AFF · Delta E 6.7
Click a swatch to copy as:
Hue50100200300400500600700800900A100A200A400A700
19 hues from the original Material Design palette. Grey and blue grey have no accent (A) shades. MUI users import a hue with import { red } from "@mui/material/colors";
Export as CSS, SCSS, JSON, Tailwind, SVG, PNG, ASE or PDF
:root {
--material-red-50: #FFEBEE;
--material-red-100: #FFCDD2;
--material-red-200: #EF9A9A;
--material-red-300: #E57373;
--material-red-400: #EF5350;
--material-red-500: #F44336;
--material-red-600: #E53935;
--material-red-700: #D32F2F;
--material-red-800: #C62828;
--material-red-900: #B71C1C;
--material-red-a100: #FF8A80;
--material-red-a200: #FF5252;
--material-red-a400: #FF1744;
--material-red-a700: #D50000;
--material-pink-50: #FCE4EC;
--material-pink-100: #F8BBD0;
--material-pink-200: #F48FB1;
--material-pink-300: #F06292;
--material-pink-400: #EC407A;
--material-pink-500: #E91E63;
--material-pink-600: #D81B60;
--material-pink-700: #C2185B;
--material-pink-800: #AD1457;
--material-pink-900: #880E4F;
--material-pink-a100: #FF80AB;
--material-pink-a200: #FF4081;
--material-pink-a400: #F50057;
--material-pink-a700: #C51162;
--material-purple-50: #F3E5F5;
--material-purple-100: #E1BEE7;
--material-purple-200: #CE93D8;
--material-purple-300: #BA68C8;
--material-purple-400: #AB47BC;
--material-purple-500: #9C27B0;
--material-purple-600: #8E24AA;
--material-purple-700: #7B1FA2;
--material-purple-800: #6A1B9A;
--material-purple-900: #4A148C;
--material-purple-a100: #EA80FC;
--material-purple-a200: #E040FB;
--material-purple-a400: #D500F9;
--material-purple-a700: #AA00FF;
--material-deep-purple-50: #EDE7F6;
--material-deep-purple-100: #D1C4E9;
--material-deep-purple-200: #B39DDB;
--material-deep-purple-300: #9575CD;
--material-deep-purple-400: #7E57C2;
--material-deep-purple-500: #673AB7;
--material-deep-purple-600: #5E35B1;
--material-deep-purple-700: #512DA8;
--material-deep-purple-800: #4527A0;
--material-deep-purple-900: #311B92;
--material-deep-purple-a100: #B388FF;
--material-deep-purple-a200: #7C4DFF;
--material-deep-purple-a400: #651FFF;
--material-deep-purple-a700: #6200EA;
--material-indigo-50: #E8EAF6;
--material-indigo-100: #C5CAE9;
--material-indigo-200: #9FA8DA;
--material-indigo-300: #7986CB;
--material-indigo-400: #5C6BC0;
--material-indigo-500: #3F51B5;
--material-indigo-600: #3949AB;
--material-indigo-700: #303F9F;
--material-indigo-800: #283593;
--material-indigo-900: #1A237E;
--material-indigo-a100: #8C9EFF;
--material-indigo-a200: #536DFE;
--material-indigo-a400: #3D5AFE;
--material-indigo-a700: #304FFE;
--material-blue-50: #E3F2FD;
--material-blue-100: #BBDEFB;
--material-blue-200: #90CAF9;
--material-blue-300: #64B5F6;
--material-blue-400: #42A5F5;
--material-blue-500: #2196F3;
--material-blue-600: #1E88E5;
--material-blue-700: #1976D2;
--material-blue-800: #1565C0;
--material-blue-900: #0D47A1;
--material-blue-a100: #82B1FF;
--material-blue-a200: #448AFF;
--material-blue-a400: #2979FF;
--material-blue-a700: #2962FF;
--material-light-blue-50: #E1F5FE;
--material-light-blue-100: #B3E5FC;
--material-light-blue-200: #81D4FA;
--material-light-blue-300: #4FC3F7;
--material-light-blue-400: #29B6F6;
--material-light-blue-500: #03A9F4;
--material-light-blue-600: #039BE5;
--material-light-blue-700: #0288D1;
--material-light-blue-800: #0277BD;
--material-light-blue-900: #01579B;
--material-light-blue-a100: #80D8FF;
--material-light-blue-a200: #40C4FF;
--material-light-blue-a400: #00B0FF;
--material-light-blue-a700: #0091EA;
--material-cyan-50: #E0F7FA;
--material-cyan-100: #B2EBF2;
--material-cyan-200: #80DEEA;
--material-cyan-300: #4DD0E1;
--material-cyan-400: #26C6DA;
--material-cyan-500: #00BCD4;
--material-cyan-600: #00ACC1;
--material-cyan-700: #0097A7;
--material-cyan-800: #00838F;
--material-cyan-900: #006064;
--material-cyan-a100: #84FFFF;
--material-cyan-a200: #18FFFF;
--material-cyan-a400: #00E5FF;
--material-cyan-a700: #00B8D4;
--material-teal-50: #E0F2F1;
--material-teal-100: #B2DFDB;
--material-teal-200: #80CBC4;
--material-teal-300: #4DB6AC;
--material-teal-400: #26A69A;
--material-teal-500: #009688;
--material-teal-600: #00897B;
--material-teal-700: #00796B;
--material-teal-800: #00695C;
--material-teal-900: #004D40;
--material-teal-a100: #A7FFEB;
--material-teal-a200: #64FFDA;
--material-teal-a400: #1DE9B6;
--material-teal-a700: #00BFA5;
--material-green-50: #E8F5E9;
--material-green-100: #C8E6C9;
--material-green-200: #A5D6A7;
--material-green-300: #81C784;
--material-green-400: #66BB6A;
--material-green-500: #4CAF50;
--material-green-600: #43A047;
--material-green-700: #388E3C;
--material-green-800: #2E7D32;
--material-green-900: #1B5E20;
--material-green-a100: #B9F6CA;
--material-green-a200: #69F0AE;
--material-green-a400: #00E676;
--material-green-a700: #00C853;
--material-light-green-50: #F1F8E9;
--material-light-green-100: #DCEDC8;
--material-light-green-200: #C5E1A5;
--material-light-green-300: #AED581;
--material-light-green-400: #9CCC65;
--material-light-green-500: #8BC34A;
--material-light-green-600: #7CB342;
--material-light-green-700: #689F38;
--material-light-green-800: #558B2F;
--material-light-green-900: #33691E;
--material-light-green-a100: #CCFF90;
--material-light-green-a200: #B2FF59;
--material-light-green-a400: #76FF03;
--material-light-green-a700: #64DD17;
--material-lime-50: #F9FBE7;
--material-lime-100: #F0F4C3;
--material-lime-200: #E6EE9C;
--material-lime-300: #DCE775;
--material-lime-400: #D4E157;
--material-lime-500: #CDDC39;
--material-lime-600: #C0CA33;
--material-lime-700: #AFB42B;
--material-lime-800: #9E9D24;
--material-lime-900: #827717;
--material-lime-a100: #F4FF81;
--material-lime-a200: #EEFF41;
--material-lime-a400: #C6FF00;
--material-lime-a700: #AEEA00;
--material-yellow-50: #FFFDE7;
--material-yellow-100: #FFF9C4;
--material-yellow-200: #FFF59D;
--material-yellow-300: #FFF176;
--material-yellow-400: #FFEE58;
--material-yellow-500: #FFEB3B;
--material-yellow-600: #FDD835;
--material-yellow-700: #FBC02D;
--material-yellow-800: #F9A825;
--material-yellow-900: #F57F17;
--material-yellow-a100: #FFFF8D;
--material-yellow-a200: #FFFF00;
--material-yellow-a400: #FFEA00;
--material-yellow-a700: #FFD600;
--material-amber-50: #FFF8E1;
--material-amber-100: #FFECB3;
--material-amber-200: #FFE082;
--material-amber-300: #FFD54F;
--material-amber-400: #FFCA28;
--material-amber-500: #FFC107;
--material-amber-600: #FFB300;
--material-amber-700: #FFA000;
--material-amber-800: #FF8F00;
--material-amber-900: #FF6F00;
--material-amber-a100: #FFE57F;
--material-amber-a200: #FFD740;
--material-amber-a400: #FFC400;
--material-amber-a700: #FFAB00;
--material-orange-50: #FFF3E0;
--material-orange-100: #FFE0B2;
--material-orange-200: #FFCC80;
--material-orange-300: #FFB74D;
--material-orange-400: #FFA726;
--material-orange-500: #FF9800;
--material-orange-600: #FB8C00;
--material-orange-700: #F57C00;
--material-orange-800: #EF6C00;
--material-orange-900: #E65100;
--material-orange-a100: #FFD180;
--material-orange-a200: #FFAB40;
--material-orange-a400: #FF9100;
--material-orange-a700: #FF6D00;
--material-deep-orange-50: #FBE9E7;
--material-deep-orange-100: #FFCCBC;
--material-deep-orange-200: #FFAB91;
--material-deep-orange-300: #FF8A65;
--material-deep-orange-400: #FF7043;
--material-deep-orange-500: #FF5722;
--material-deep-orange-600: #F4511E;
--material-deep-orange-700: #E64A19;
--material-deep-orange-800: #D84315;
--material-deep-orange-900: #BF360C;
--material-deep-orange-a100: #FF9E80;
--material-deep-orange-a200: #FF6E40;
--material-deep-orange-a400: #FF3D00;
--material-deep-orange-a700: #DD2C00;
--material-brown-50: #EFEBE9;
--material-brown-100: #D7CCC8;
--material-brown-200: #BCAAA4;
--material-brown-300: #A1887F;
--material-brown-400: #8D6E63;
--material-brown-500: #795548;
--material-brown-600: #6D4C41;
--material-brown-700: #5D4037;
--material-brown-800: #4E342E;
--material-brown-900: #3E2723;
--material-grey-50: #FAFAFA;
--material-grey-100: #F5F5F5;
--material-grey-200: #EEEEEE;
--material-grey-300: #E0E0E0;
--material-grey-400: #BDBDBD;
--material-grey-500: #9E9E9E;
--material-grey-600: #757575;
--material-grey-700: #616161;
--material-grey-800: #424242;
--material-grey-900: #212121;
--material-blue-grey-50: #ECEFF1;
--material-blue-grey-100: #CFD8DC;
--material-blue-grey-200: #B0BEC5;
--material-blue-grey-300: #90A4AE;
--material-blue-grey-400: #78909C;
--material-blue-grey-500: #607D8B;
--material-blue-grey-600: #546E7A;
--material-blue-grey-700: #455A64;
--material-blue-grey-800: #37474F;
--material-blue-grey-900: #263238;
}How to use
01
Choose a copy format
At the top, pick HEX, RGB, MUI (red[500]) or CSS variable. The format applies to every swatch you click until you change it.
02
Find the hue and shade
Each row is one of the 19 hues, from red to blue grey. Columns run from 50 to 900, then the A100 to A700 accents. Hover a swatch to see its name and HEX code.
03
Click to copy
Click a swatch and a message confirms what was copied. With MUI selected you get code like deepPurple[500] or pink.A200, ready for a theme or sx prop.
Why Material Design Color Palette
- All 19 Material Design hues with every shade and accent.
- Copy as HEX, RGB, MUI reference or CSS variable.
- Text contrast labels and a closest color finder.
- Download as CSS, SCSS, JSON, Tailwind, PNG, ASE or PDF.
Material 2 palette vs Material 3 dynamic color
The palette on this page comes from the 2014 Material Design guidelines. You pick a primary hue and an accent hue, then use shades of each: for example indigo 500 for the app bar, indigo 700 for the status bar, and pink A200 for a floating action button. MUI's default theme and many existing Android apps are built this way.
Material 3, introduced with Android 12, replaced fixed hues with dynamic color. A seed color, taken from a brand or even the user's wallpaper, is turned into tonal palettes with tones from 0 (black) to 100 (white). Those tones are then mapped to named roles such as primary, on-primary, primary-container and surface for both light and dark themes. If you are starting a new Material 3 project, generate a scheme with Google's tools. If you work with MUI or an older design, this palette is the reference you need.
Common questions
What are the Material Design colors?
The original Material palette has 19 hues: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey and blue grey. Each has shades 50 to 900, and most also have four accent shades.
What do 500 and A200 mean in Material Design colors?
The numbers are shades from light (50) to dark (900), with 500 as the main shade of the hue. The A shades are accents: brighter, more saturated versions meant for small highlights such as buttons and switches.
Why don't brown, grey and blue grey have Material accent shades?
The Material palette only defines accents for the colorful hues. Brown, grey and blue grey are meant for neutral surfaces and text, so they stop at 900. MUI adds grey accents of its own, which are not shown here.
How do I use Material colors in MUI?
Import the hue from @mui/material/colors, for example import { red } from '@mui/material/colors', then use red[500] or red.A200 in your theme or sx prop. Choose MUI as the copy format here to get those references directly.
What is the difference between Material 2 and Material 3 colors?
Material 2 uses the fixed palette on this page. Material 3 generates tonal palettes from a seed color and assigns them to roles such as primary and on-primary, with light and dark schemes. The M3 palettes are not a fixed list of hues like this one.
How do I make a Material 3 color scheme from my brand color?
Use Google's Material Theme Builder or the material-color-utilities library, which take a seed color and output a full M3 scheme. This page does not generate M3 schemes.
Can I use Material Design colors outside Android?
Yes. They are plain HEX colors, so they work in any CSS, design tool or chart library. Choose CSS variable as the copy format to get lines like --md-indigo-500 for your stylesheet.
Which Material shade should I use for text on a colored background?
As a rough guide, white text reads well on shades 600 to 900 and black text on 50 to 300, but it varies by hue: yellow and amber stay light for longer. Turn on Show text contrast to see the better text color and its ratio on every swatch, and aim for 4.5 or more for normal text.
How do I find the Material Design color closest to my brand color?
Paste your HEX into the finder at the top. It lists the three closest Material shades with a Delta E score, where under 2 is hard to tell apart. Copy uses the format selected below, such as an MUI reference like blue[700].