Tint and shade steps with your own count and interval
When one color has to cover default, hover and disabled states, eyeballing each step leaves uneven gaps. Enter one base HEX, a step count from 3 to 12 and a mix interval per step, and you get exactly that many HEX and RGB values at once. Unlike generators with a fixed ladder, the interval is yours to set, so the ramp can be tightened or widened to match the color tokens you already ship.
Terms and the mixing space
The terms are kept apart: a tint mixes white in, a shade mixes black in, and a tone mixes gray in. Every step is computed twice. Once by blending the gamma-encoded sRGB values directly, and once by converting to linear light with the sRGB transfer function defined by the W3C (threshold 0.04045), blending, then re-encoding. The same ratio gives different results, so the table labels which column you are copying. The transfer function follows the W3C document as of October 2026.
Limits
This page only builds colors. It does not decide which step belongs where, and it does not check whether text on a step has enough contrast. Check accessibility thresholds with a contrast tool instead.
Frequently Asked Questions
A tint mixes white into the base color to lighten it, and a shade mixes black in to darken it. Mixing gray in is called a tone, and this page lets you pick any of the three.
Neither is the single right answer. Match the sRGB mix when you need to sit next to existing tokens or editor output, and use the linear-light mix when you want steps that look evenly spaced by light output. Both are listed.
Keep the step count times the interval at 100% or less. If the total goes over, the message tells you the largest interval that still fits the step count you entered.