Color Shades Generator
Pick any color to get its tints and shades, from almost white to almost black, in even steps. Click a swatch to copy its hex code, or export the whole scale as CSS, Tailwind, or JSON.
How to use the color shades generator
- Type or paste a hex code into Base color, or click the swatch to open the picker. Random gives you a fresh color to explore.
- Set Steps anywhere from 3 to 12 to control how many tints and shades you get.
- Click any swatch to copy its hex. The base color’s HEX, RGB, and HSL values are buttons too.
- Use Export on a row to copy it as CSS variables, SCSS, a Tailwind config, or JSON, or Edit to open it in the palette editor.
The page URL updates as you go, so you can bookmark or share the exact color you were working with.
Tints, shades, and tones explained
A tint is a color mixed with white, which makes it lighter. A shade is a color mixed with black, which makes it darker. Mix in gray instead and you get a tone, a softer and less saturated version. All three are core color wheel ideas for building depth from a single hue.
Tints feel airy and work well for backgrounds, hover states, and large surfaces. Shades feel grounded and suit text, borders, and depth. Used together they give you a full range of a color without bringing in a second hue.
How the tints and shades are calculated
Instead of mixing colors in plain RGB, this tool blends toward white and black in the OKLab color space, which is designed to match how your eye perceives lightness. That keeps each step evenly spaced, so the ramp looks smooth from light to dark instead of bunching up in the middle.
The first swatch in each row is your base color. Pure white and pure black are left off the ends, since you already have those.
Build a Tailwind or design-system color scale
Export scale at the top of the tool builds an 11-step scale labelled 50 to 950, the same naming Tailwind CSS uses. Your base color sits at 500, five tints fill 50 to 400, and five shades fill 600 to 950. Copy it as CSS variables, SCSS, a Tailwind config, or JSON.
Your brand color might naturally be quite light or quite dark, so check that 500 lands in a sensible spot. If it doesn’t, open the scale in the palette editor and adjust individual steps.
How to use tints and shades in your designs
- Interface states: a slightly darker shade for hover, a darker one again for active or pressed.
- Backgrounds and borders: the lightest tints make quiet panels, and the next few steps make borders that match.
- Depth: layer tints and shades to suggest shadows and raised surfaces without falling back to flat black or gray.
- Charts and maps: a single-hue light-to-dark ramp reads clearly as a sequential scale.
- Readable text: the Aa badges on each swatch show whether white or black text passes WCAG AA (4.5:1) or AAA (7:1). For a specific pair, use the contrast checker.
Frequently asked questions
How many shades should I generate?
For most interface work, 5 to 7 steps is plenty. For a full design-system scale, use 10 or more so you have room for backgrounds, borders, text, and hover states, or use Export scale for a ready-made 50 to 950 set.
What’s the difference between a shade and a hue?
Hue is the color family itself, like red, blue, or green. A shade keeps the same hue but makes it darker. Every swatch this tool makes stays close to your base color’s hue.
Can I make a palette between two different colors?
Yes. Use the gradient palette generator to get evenly spaced steps between any start and end color, or the gradient maker for a smooth CSS gradient.
Where can I see more details about my color?
Click Color details in the tool to open the color’s page in the color picker, with format conversions, contrast checks, and matching palettes.