Material Palette

Browse the Material Design color palette and build themes with synced CSS variables.

Free & unlimited

Palette builder

Primary color

Accent color

App title

Subtitle text

Card content preview with your selected Material Design theme colors.

Tip: Material Design recommends using the 500 shade as your primary color and an accent (A200) from a complementary family. Use "Random theme" to discover unexpected color pairings. The exported CSS variables can be used directly in your project with var(--md-primary).

All Material colors

All processing happens in your browser. No data is sent to any server.

About this tool

1
Browse color families
Explore all Material Design color families from Red to Brown, each with shades from 50 to 900.
2
View accent shades
Check the A100-A700 accent variants available for primary colors - designed for highlights and CTAs.
3
Select and copy
Click any swatch to copy its hex value, or switch to RGB/HSL output format.
4
Build a palette
Pick a primary and secondary color to see recommended pairings following Material guidelines.

Material Design recommends using 500 as your primary shade and 700 for the status bar / darker variant.
Accent colors (A200 is most common) should be used sparingly for FABs, links, and interactive highlights.
Pair a vibrant primary color with a neutral or complementary secondary for balanced UI.
Shades 50-100 work well for large background surfaces, while 800-900 are best for text on light backgrounds.

Full Google Material Design color system (19 hues + accents)
Primary/secondary palette recommendation engine
Copy values in hex, RGB, and HSL formats
Accessible contrast ratio check against white and black text
Visual shade and accent scale for each color family

Select Material Design compliant colors for Android and web apps.
Build a theme that follows Google's color guidelines out of the box.
Find accessible text/background combinations within the Material system.
Reference exact Material color values when implementing a design spec.

Normal shades (50-900) cover a full tonal range for surfaces and text. Accent shades (A100-A700) are more vibrant and saturated, intended for small interactive elements like buttons and links.

Material Design 3 (Material You) generates dynamic color palettes from a source color using tonal mapping. The classic named palette is from Material 2 and is still widely used.

Pick a primary that reflects your brand identity. The secondary should contrast enough to be distinguishable but still harmonize - complementary or analogous hues work well.