Colour Shades and Tints Generator

In short A 50-to-950 scale takes one colour and produces the full ramp a design system needs — 50 as a barely-tinted background, 500 as the base, 950 as a near-black version for dark themes. The convention comes from Tailwind and is now near-universal, and the reason it exists is that a single brand colour cannot do the work: you need a lighter one for backgrounds, a darker one for hover, a very light one for a selected row and a very dark one for text on a pale tint. Generating them from one colour keeps the whole family consistent in a way hand-picking eleven values never manages. The thing to check before pasting it in is the ends. A naive ramp spaces lightness evenly, which is not how the eye works: the steps near the middle look larger than the steps near the extremes, and the 900 and 950 values often collapse into the same visible colour. Check that consecutive steps are actually distinguishable, and check the contrast of the ones you intend to put text on — typically 600 and above on a white background, or 200 and below on a dark one.