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 creates a structured color scale from a chosen base color for use in Material-style interfaces and design systems. Enter a primary color and generate a range of lighter and darker shades, then copy the resulting HEX values or CSS variables into your project. Lighter shades can be used for surfaces and subtle backgrounds, while darker shades can provide stronger states and contrast. The tool is useful for developers and designers building consistent color systems for websites, dashboards, mobile applications, and component libraries.

How to Use This Material Color Generator

  1. 1
    Choose the base colorEnter the primary or brand color you want to use as the center of the scale.
  2. 2
    Generate the color scaleThe tool creates lighter and darker variations around the selected base color.
  3. 3
    Review the shadesCompare the light values for surfaces and backgrounds with darker values for states, accents, and stronger visual elements.
  4. 4
    Copy the outputCopy the CSS variables or HEX list and add the values to your theme or design system.
  5. 5
    Test the colorsCheck important text and UI combinations with a contrast checker before using them in production.

Frequently Asked Questions

A Material-style color scale is a structured set of related shades built around a primary color. Different shades can then be assigned to backgrounds, surfaces, active states, accents, borders, and other interface roles.
The tool derives lighter and darker variations from the selected base color using predefined mixing relationships. This creates a consistent family of shades that can be reused throughout a design system.
A middle shade is often used as the main brand or primary color, while lighter and darker values provide supporting roles. The correct choice depends on your interface, contrast requirements, and brand guidelines.
Lighter shades can be useful for backgrounds, containers, subtle highlights, hover surfaces, and other areas where you want the same color family without the visual weight of the primary color.
Darker shades can be useful for active states, stronger borders, emphasis, dark surfaces, and other interface elements that require greater visual weight.
Yes. Copy the generated CSS variables into your theme and assign semantic names such as primary, primary-light, primary-dark, surface, and accent. This makes it easier to keep colors consistent across components.

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.