HCT Color Editor
Edit and inspect colors in HCT (Material 3 hue/chroma/tone, approximation).
Overview
The HCT Color Editor lets you tweak a colour in the Hue / Chroma / Tone space used by Google's Material 3 dynamic colour system. Slide tone to lighten or darken without shifting perceived hue, slide chroma to adjust saturation while keeping the same tone, and read off the resulting hex for use in design tokens.
It is the natural editor for designers working in the Material You ecosystem, building tonal palettes, or matching custom brand colours to the Material 3 reference palette (P-100 through P-0). HCT's tone axis maps directly to the tonal stops Material uses for surface, primary, secondary and tertiary roles.
How it works
HCT combines two well-tested colour models: the hue and chroma come from the CAM16 colour-appearance model (which accounts for viewing conditions and adaptation), while the tone axis is the CIE Lab L* lightness. The tool's HCT implementation is the approximation popularised by Google's Material colour utilities — close enough for design work without the cost of a full CAM16 pipeline.
Because tone is L*-based, "tone 90" looks the same lightness no matter the hue, which is why Material's tonal palettes feel consistent across colour families. Chroma is bounded by the sRGB gamut — high chroma at extreme tones simply isn't reachable on screen, and the editor clamps to the nearest in-gamut value.
Examples
H 220, C 30, T 40 → #2e5fa1 (Material primary at tone 40)
H 220, C 30, T 80 → #a7c4ed (tone 80, container)
H 60, C 60, T 70 → #cfb44a (warm yellow, mid-tone)
H 0, C 0, T 50 → #7c7c7c (chroma 0 = grey)
FAQ
How does HCT differ from HSL?
HSL's lightness is naive (max + min / 2) and shifts perceived hue at the extremes. HCT's tone is perceptually uniform, so a tone-40 yellow and a tone-40 blue genuinely look the same lightness.
Why can't I crank chroma to 100 for every hue?
The sRGB gamut is not a perfect cylinder. Some hue/tone combinations cap out at chroma 20 or so before clipping. The editor surfaces the max available chroma for the current hue and tone.
Is HCT a CSS standard?
No — it is a design-system convention used by Material 3. For CSS, OKLCH is the closest perceptually-uniform polar space and is supported natively in browsers.
Can I export a Material tonal palette from one hue?
Generate the standard tonal stops (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) at a fixed chroma and the chosen hue. The editor shows them as a vertical ramp.