The Color Shades & Tints Generator turns a single colour into a full scale of tints and shades — the kind of 50→950 ramp used in design systems and Tailwind themes. Enter one base colour and instantly get eleven steps, from a very light tint at 50 to a deep shade at 950, with your colour sitting at 500.
Click any swatch to copy its hex, or export the whole scale as CSS custom properties, a Tailwind colour object, or a plain array. It is the fastest way to build a consistent colour ramp for backgrounds, borders, text, and states. Everything runs in your browser.
How to use the shades and tints generator
- Pick a base colour with the colour picker, or type its hex code.
- The scale updates instantly, with your colour at step 500.
- Click any swatch to copy its hex value.
- Choose an export format (CSS variables, Tailwind, or array) and copy the whole scale.
Tints, shades, and the 50→950 scale
A tint is a colour mixed with white (lighter); a shade is a colour mixed with black (darker). This tool builds a numbered scale where the lower numbers (50–400) are progressively lighter tints, 500 is your base colour, and the higher numbers (600–950) are progressively darker shades. The 50→950 numbering matches Tailwind CSS and most modern design systems, so the output drops straight into a theme.
Why a consistent scale matters
Design systems rely on a predictable colour ramp so components look cohesive: a light tint for a subtle background, a mid tone for a border, the base for a button, and a dark shade for hover or text. Generating the whole scale from one colour keeps the steps evenly spaced and on-brand, instead of hand-picking colours that drift apart. Use the lighter end for surfaces and the darker end for text and emphasis.
Using the exported scale
Export as CSS custom properties to paste into :root and reference with var(--color-500), as a Tailwind colour object to add under theme.extend.colors, or as a plain array for use in code. For accessible text, pair a light tint background with a dark shade for the text and check the contrast — the Color Converter includes a WCAG contrast check for exactly this.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is a colour mixed with white, making it lighter; a shade is a colour mixed with black, making it darker. This generator produces both from your base colour in one scale.
Why is my colour at step 500?
The 50→950 scale places the base colour in the middle at 500, with lighter tints below and darker shades above. This matches Tailwind and common design-system conventions.
Can I export the scale for Tailwind?
Yes. Choose the Tailwind format to get a colour object (primary: { 50: … , 950: … }) you can paste under theme.extend.colors in your tailwind.config.
How do I copy a single shade?
Click any swatch in the scale to copy just that hex value, or use the export box to copy the whole scale at once.
How is this different from the Color Palette Generator?
This tool builds a monochromatic scale (tints and shades of one colour) for design-system ramps. The Color Palette Generator explores multi-colour schemes you can shuffle and lock.