Color Shades & Tints Generator
Color
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 Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.