Material Design 3 Tonal Palette
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 Token Exporter
Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Color Shades & Tints Generator
Generate tints (lighter), shades (darker), and tones (with gray) from any base color — 2 to 20 stops, in HEX, RGB, or HSL.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
Random Music Practice Drill Generator
Random key, scale, chord, tempo, time signature and technique focus for instrument practice — 12 chromatic roots, 15 scales (modes, pentatonic, blues, diminished, phrygian dominant), 14 chord qualities up to 9ths, and 20 articulation prompts.