Color Shades & Tints Generator

From one brand color, designers usually need a full ramp: lighter tints for hover states and backgrounds, darker shades for text and active states. This tool mixes your base color toward white (tints), black (shades), or gray (tones) in evenly-spaced steps. Pick the count (2–20), output format (HEX, RGB, HSL), and copy any swatch with a click. Useful for building Tailwind-style color scales (50-900), button states, and accessible UI palettes.

Evenly spaced in the mix is not evenly spaced to the eye, which is the main thing to know before using a ramp as-is. Mixing toward white compresses quickly: the first few steps change the colour a lot and the last few barely differ, because perceived lightness is roughly a cube-root function of the light involved. A scale built this way tends to have too many pale steps that look alike and too few useful mid-tones, and designers usually end up nudging the middle of the ramp by hand.

Tints, shades and tones do different things to saturation as well as lightness. Adding white raises lightness and lowers saturation, which is why a tint of a vivid brand colour reads as pastel rather than pale; adding black lowers both and can turn a bright hue muddy; adding grey lowers saturation while leaving lightness roughly alone, which is what you want for a muted variant that still belongs to the same family.

The named scales are a convention rather than a measurement. Tailwind's 50 to 900 are positions on a ramp, not lightness values, and two palettes using the same numbers can differ substantially at the same step. The number tells you where a colour sits relative to its siblings and nothing about how it will contrast with text.

Contrast is the check this cannot do for you. A ramp is a set of colours, and whether any pair of them clears the WCAG threshold is a separate calculation on their luminance. Picking the 600 for text on the 100 because that is what the last project used is how a palette ends up failing an audit at exactly one combination.