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.
Tints (lighter)
Shades (darker)
Click any swatch to copy its value. Tints are useful for backgrounds and hover states, shades for text and active states.
How to use
- Pick the base color — use the picker or paste a HEX value.
- Choose mode: both (tints + shades), tints only, shades only, or tones (with gray).
- Adjust the step count and output format, then click any swatch to copy its value.
Frequently asked questions
- What's the difference between tint, shade, and tone?
- A tint mixes with white (lighter), a shade mixes with black (darker), a tone mixes with gray (more muted). All three keep the same hue but change lightness/saturation differently.
- Is this the same as HSL lightness adjustment?
- No — mixing in RGB toward white is perceptually different from increasing HSL lightness. Pure RGB mixing reduces saturation as it lightens (more 'pastel'), which is usually what designers want for tints.
- How does this map to Tailwind 50–900 scales?
- Generate ~9 tints and ~9 shades from your base. The lighter end approximates the 50–400 range, the darker end approximates 600–900. Tailwind's exact ramps are hand-tuned for perceptual uniformity, so this is a starting point — adjust by eye.
- Why are the lightest tints not pure white?
- Each step is a fraction of the way to white. With 10 steps, step 1 is ~9% toward white. To get pure white you'd need infinite steps — but the last step is usually close enough for a 'lightest' background.
Related tools
Color Palette Generator
Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.
Tailwind Color Palette
The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Sort
Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.
Material Design 3 Tonal Palette
Generate a Material You / Material Design 3 tonal palette (tones 0–100) from any source color, plus contrast against black/white and CSS/Tailwind/JSON/SCSS export.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.