A tonal palette is a range of colors derived from a single seed color, spanning from tone 0 (near white) to tone 100 (near black). Material Design 3 uses the HCT color space (Hue, Chroma, Tone) to generate harmonious palettes where chroma peaks at mid-tones and tapers off toward both ends. Each tone value represents a specific lightness level, allowing designers and developers to create accessible, cohesive color schemes.

Primary is the main brand color used for key UI elements like buttons, active states, and prominent surfaces. Secondary complements the primary with a hue shift (~30°), used for less prominent components like filter chips. Tertiary provides additional accent colors (~60° hue shift) for contrasting elements like selection controls. Neutral and Neutral Variant are low-chroma palettes for backgrounds, surfaces, and outlines.

Click the "Copy CSS Tokens" button to get the full set of Material Design 3 CSS custom properties. These tokens follow the --md-sys-color-* naming convention used in Google's official M3 implementation. You can paste them directly into your :root block. Key tokens include: --md-sys-color-primary (tone 40), --md-sys-color-primary-container (tone 90), --md-sys-color-on-primary (tone 100), and their on-container variants. Individual swatches can be clicked to copy their HEX code.

HCT stands for Hue, Chroma, Tone — a perceptually uniform color space developed by Google for Material Design 3. Unlike HSL or HSV, HCT ensures that colors with the same Tone value appear equally light to the human eye regardless of their hue or chroma. Tone 0 is pure white, Tone 100 is pure black, and intermediate tones maintain perceptual uniformity. This makes HCT ideal for accessibility and creating balanced color schemes.

Yes! Click any swatch to copy its HEX code, then paste it into Figma, Sketch, or Adobe XD. The Copy CSS Tokens button provides a complete set of M3 tokens ready for use in code. For bulk export, you can also use browser DevTools to inspect the generated palette data. Many design systems also accept M3 token JSON formats — the HEX values here are fully compatible.