ToolPuma Logo

Material Color Generator

Generate a full Material Design color scale.

50
100
200
300
400
500
600
700
800
900

Generated with the official Material Design ratios (mixing the base with white for shades 50–400 and with black for 600–900).

What Is a Material Color Generator?

The Material Color Generator builds a full Material Design color scale from any base color using Google's official mixing ratios. Material guidance defines a 50-900 scale where shade 500 is typically the primary color, lighter shades (100-400) are reserved for surfaces against the base, and darker shades (600-900) sit behind it for contrast. You get ready-to-copy CSS variables for the entire scale.

How to Use This Material Color Generator

  1. 1
    Enter your brand or primary color (equivalent to the 500 shade).
  2. 2
    Review the generated 50-900 scale with lighter and darker shades.
  3. 3
    Copy the CSS variables or the comma-separated hex list into your theme.

Frequently Asked Questions

Shades 50-400 are created by mixing the base color with white at specific ratios, and shades 600-900 by mixing with black, following the official Material Design color generation algorithm.
Material Design recommends the 500 shade as the primary brand color in most cases, with 600 or 700 suitable for accent actions and darker surfaces.
Lighter shades (100-300) work as surface and container colors against the primary, while darker shades (600-900) provide contrast for text, active states, and bottom elevations.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

More Color & Design Tools

CSS Border Generator

Style borders with width, style, color, and radius.

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.