You do not need to understand HCT to use Tonex, but it explains why the controls behave the way they do. HCT stands for Hue, Chroma, and Tone. Tonex uses it as its authoring model: edits move through color in a way that is closer to how people perceive it, instead of treating colors as unrelated hex values.
Where you meet it
In web app:
- The seed can be adjusted with HCT sliders.
- Palette override where you can tune one family without affecting other families.
- Custom color where you want to add extra sementic tokens.
In CLI:
- The
adjustcommand can shift exported tokens by relative tone and chroma deltas.
The three axes
- Hue — which color it is, around the circle from red through blue and back. Near-grey colors have little hue to adjust, so hue controls may turn off until the color has enough chroma.
- Chroma — how colorful it is, from grey at zero toward vivid color. At some hues and tones, sRGB cannot represent more chroma, so the color hits a gamut wall.
- Tone — how light or dark it is, from black at 0 to white at 100.
Why tone matters for contrast
Tone gives Tonex a stable way to reason about lightness. When the engine creates a text color, it can move that foreground to a tone that is likely to separate from its background while preserving the role relationship.
That is not the same as guessing contrast from tone alone. Tonex still checks the finished foreground/background pairs against WCAG thresholds — 4.5:1 for body text, and 3:1 for large text and interface elements.