Material 3 tonal palette formula
Formula
HCT hue/chroma/tonal algorithm produces primary, secondary, tertiary, neutral roles.
Variables
- R, G, B
- sRGB channels (0–255 or 0–1 normalized)
- H, S, L
- Hue (degrees), saturation and lightness (0–1) in HSL
- L
- Relative luminance (WCAG) or lightness in HSL/OKLCH
FAQ
- Is Material 3 tonal palette formula accurate for print workflows?
- Screen RGB and print CMYK use different gamuts. Treat conversions as approximate proofs; calibrate with ICC profiles for commercial print.
- Can I use this formula in CSS?
- Modern CSS supports color-mix(), oklch(), and lab() for many operations. For complex pipelines, compute in JavaScript and export CSS variables.
- Does Color DevByte upload my colors?
- No. Formula reference pages are static documentation; interactive tools run 100% client-side in your browser.
Overview
Generate Tonal Spot palettes from a seed color.
Color DevByte documents this formula for developers, designers, and accessibility reviewers who need reproducible color math without sending data to a server.
Use the linked color tools to apply this formula interactively with live preview and multi-format export.
When to use this formula
Apply the material 3 tonal palette formula when building design tokens, validating WCAG contrast, or automating color pipelines in CSS, Tailwind, or design-system JSON.
For production UI, always verify results with a contrast checker or visual preview — edge cases in gamma correction and gamut mapping can shift outcomes.
Implementation notes
Browser-based tools should linearize sRGB before luminance or ΔE calculations.
Prefer OKLCH or LAB interpolation for gradients and themes to avoid grayish midpoints common in RGB blends.