HCT Color Tool

HCT (Hue-Chroma-Tone) is a perceptually uniform color model introduced by Google Material You, balancing human perception with screen display. Compared to traditional HSL, HCT has more linear brightness; compared to LAB, HCT is faster to calculate and smaller in size, making it the top choice for generating accessible color schemes. Use this tool to get color scales that meet WCAG contrast standards with one click, facilitating the implementation of UI design systems and frontend theme variables.

This platform has built-in Material 3 official Tone mapping algorithms. The T40-T60 range automatically corresponds to WCAG 2.1 AA level contrast (≥4.5:1). It is recommended to use T90-T95 as background and T10-T20 as text to pass accessibility checks in both light and dark modes. After copying the color, it can be used directly in Figma, Sketch, or CSS var, reducing repeated verification time.

No. The tool automatically recognizes 3-digit or 6-digit hexadecimal characters and will intelligently auto-complete if '#' is missing. It supports formats like #5A92D6, 5A92D6, 5a92d6, etc. If the format is invalid, it will prompt immediately and retain the last valid value to ensure the generation process is not interrupted.

HCT focuses on human-perceived brightness, ensuring that the same Tone value has consistent visual lightness across different hues, so designers don't need to adjust brightness by eye.
1. Text and background contrast remains stable when switching between light/dark modes, reducing adaptation workload;
2. Brand colors, functional colors, and semantic colors can be naturally distinguished within the same Tone range, making the interface hierarchy clearer;
3. Color scales are generated automatically, avoiding 'skipped steps' or 'dirty greys' caused by manual picking, improving overall texture and professionalism, and keeping users visually comfortable during long-term use.