Color Shades & Tints Generator

What this color shades generator does

Pick or paste a base hex color and this tool instantly builds a ramp running from the lightest tint to the darkest shade, with your original color sitting in the middle. Two sliders set its shape — 3 to 20 swatches, and a 2–30% step between them — starting at ten swatches 10% apart. Tints are the base color mixed toward white and shades are the base mixed toward black, giving you a clean monochromatic scale for buttons, hover states, borders, backgrounds, and charts. Every swatch shows its exact hex code, and a single click copies that value to your clipboard and reads it back below as rgb() and hsl() with how far it sits from the base. Under the ramp the whole palette is written out as CSS custom properties or a JSON array, with buttons to copy it, download it, or copy a link that reopens the scale you built.

How the tints and shades are calculated

Each swatch is produced by blending the base RGB channels toward pure white (for tints) or pure black (for shades) by the step you set, applied once more for each place away from the middle, until the mix reaches 90%. It stops there so no end collapses into a plain #ffffff or #000000, which means places past 90% repeat the last swatch — a long ramp at a wide step (20 swatches at 30%) holds repeats, and the page says how many; lower the step or the count to avoid them. Because the math is deterministic, the same input color always yields the same palette. You can type standard 6-digit hex, shorthand like #fff, or a value without the leading hash, and the color picker stays in sync with the text field.