Color Shades & Tints
Base color
#2563eb
Shades (toward black)
Tints (toward white)
Tones (toward gray)
Each step mixes the base toward black, white, or #808080.
Color shades generator and tint generator in one page
Darken a brand color toward black, lighten it toward white, or mix it toward gray for muted UI chrome. Shade and tint generators are combined here so you do not maintain two near-duplicate URLs.
Frequently asked questions
- What is the difference between a shade and a tint?
- A shade mixes the base color toward black. A tint mixes it toward white. This tool also offers tones, which mix toward neutral gray (#808080).
- Why isn’t the last shade pure black?
- Steps use i / (count + 1) so you get even mixes without forcing a pure black or white swatch. Increase the step count for darker or lighter ends.
- Are values calculated from the previous swatch?
- No. Each step mixes the original base toward the target. That avoids rounding stacking down the row.
- Can I copy every HEX at once?
- Yes. Copy all HEX copies shades, the base, and tints. Export CSS writes custom properties for the same list.
- Is this the same as a monochromatic palette?
- Related, but not identical. Monochromatic palettes in the palette generator vary lightness around HSL. Shades and tints here are RGB mixes toward black and white.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- Color Converter — HEX to RGB converter online.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Palette Generator — Color palette generator from a base HEX.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- Color Converter — HEX to RGB converter online.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.