Material Design Colors

Google's Material Design color palette, introduced in 2014 and still shipped with Material UI and Angular Material, gives 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 — in ten shades from 50 (lightest) to 900 (darkest), plus four vivid accent shades A100–A700 for 16 of them. This page lists every value with HEX and RGB, the more readable text color for each shade and copy-ready CSS variables, SCSS or JSON.

How to use this tool

1. Choose one color, or keep "All 19 colors".
2. Read the primary (500), dark variant (700) and accent (A200) values.
3. Check the text column: it picks white or black by WCAG contrast.
4. Choose an export format and copy the code.

Formula

primary = 500 · dark variant = 700 · accent = A200 (Material Design 2 guidance)

Shades run from 50 to 900 in lightness; A-shades are more saturated versions intended for accents such as floating action buttons and switches. Text color = white or black, whichever has the higher WCAG contrast ratio (truncated to two decimals).

Example

Red 500 is #F44336 = rgb(244, 67, 54), with dark variant #D32F2F and accent #FF5252. Black text on red 500 reaches 5.7:1 while white reaches only 3.68:1, so black is the readable choice. Indigo 500 #3F51B5 is the reverse: white text gets 6.87:1. All 19 hues together contain 254 colors.