Loading…

How to use Material Tonal Palette

Pick a base color and the tool builds the full 50–900 tonal scale; click any shade to copy its hex value.

Frequently asked questions

What is a Material tonal palette?

A scale of tones from 50 (lightest) to 900 (darkest) generated from one base color, used across Material Design components.

Which shade is the base color?

The base typically anchors the 500 tone, with lighter tones above and darker tones below it in the scale.

How do I use the palette?

Copy the shades into your theme as tokens — for example 500 for primary, 700 for hover, and 100 for subtle backgrounds.

More Color Tools

Complementary Color Finder
Find the exact complementary (opposite) color for any hex value
Color Inverter
Invert any color to its RGB negative (255 minus each channel)
Lighten / Darken Color
Lighten or darken any color by a precise percentage of lightness
HSL Adjuster
Shift hue, saturation and lightness of a color with live preview
Alpha Blend Calculator
Composite a translucent color over a background to a solid hex
CMYK ↔ RGB Converter
Convert print CMYK percentages to RGB / HEX and back both ways
Grayscale Converter
Convert any color to perceptual grayscale using Rec.601 luma
Sepia Tone Converter
Apply the classic sepia photo tone matrix to any color
HEX Shorthand Expander
Expand 3-digit hex to 6-digit and shorten collapsible hex codes
Pastel Color Generator
Turn any bold color into a soft pastel version instantly
CSS color-mix() Generator
Build a CSS color-mix() in srgb and preview the computed result
Nearest Tailwind Color
Find the closest Tailwind CSS color name and shade for any hex

← View all Color ToolsBrowse all 1,100+ tools →