Material Design 3 Tonal Palette
Color
From a single source color, build a 13-tone palette (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) following Material Design 3 conventions. Each tone preserves the source hue and pushes chroma as high as the sRGB gamut allows at the target lightness, using a perceptual OKLCH lightness ramp. Useful for design tokens, theming a UI library, or building accessible color systems — the contrast ratio against the best of black/white is shown for every tone so you can pick safe foreground/background pairs.
:root {
--primary-0: #000000;
--primary-10: #050013;
--primary-20: #1c0042;
--primary-30: #341767;
--primary-40: #4d3486;
--primary-50: #6851a5;
--primary-60: #856fc6;
--primary-70: #a38de7;
--primary-80: #c1b0ff;
--primary-90: #dfd8ff;
--primary-95: #efecff;
--primary-99: #fcfbff;
--primary-100: #ffffff;
}Tones generated with OKLCH (perceptual lightness) and gamut-clamped to sRGB. Approximates Material 3 HCT closely but not bit-exactly.
How to use
- Pick a source color with the picker, or paste a hex code.
- Optionally rename the palette (used in the export prefix, e.g., `--primary-40`).
- Choose an export format — CSS custom properties, Tailwind config, JSON design tokens, or SCSS variables — and copy.
- Click any swatch to copy its hex.
Frequently asked questions
- Is this the same as Google's HCT algorithm?
- Close in spirit but not identical. Google's Material Color Utilities use HCT, which is built on CAM16. This tool uses OKLCH (Björn Ottosson, 2020) as a browser-friendly perceptual color space. Tones at the same lightness will look comparable but the exact hex values will differ slightly from `material-color-utilities`.
- Why does the chroma vary between tones?
- sRGB can't reproduce highly saturated colors at very dark or very bright lightness — the tool finds the maximum chroma that stays in gamut via binary search. That's why tone 90 (light tint) is washed-out and tone 50 is most vivid for most hues.
- How do I read the contrast ratio?
- It's WCAG relative-luminance contrast against the better of black or white. ≥4.5 passes WCAG AA for normal text; ≥3.0 passes AA for large text and UI components.
- What about dark mode roles?
- M3 maps roles like `primary` to tone 80 in dark mode and tone 40 in light mode, `on-primary` to tone 20 / tone 100, etc. This tool gives you the raw tonal scale — assigning roles to tones is up to your theme spec.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.