Color Shades Generator

All tools
Color Shades Generator
Generate a full range of tints and shades from a single color — choose your darken/lighten step and shade count, then copy any value instantly.
Base color
Step
%
How much lighter/darker each shade gets, per step (1–25%).
Shade count
How many tints and shades to generate on each side of the base color.
Gradient
Generated shades

Pick a base color, a step percentage and a count — every tint and shade is computed instantly in your browser.

Share this
Related Tools
Color Palette Generator

Build harmonious color palettes from an interactive color wheel — apply harmony rules like analogous, complementary or triad, then copy any value instantly.
Color Mixer

Blend a start color into an end color across up to 10 steps — preview the gradient, grab every shade and copy any format instantly.
Palette Exporter

Paste or import a set of colors and export them instantly to CSS variables, SCSS, Tailwind config, JSON or SVG swatches — the finishing step for any palette.
Image Color Extractor

Pull a refined, copy-ready color palette from any image.
Popular searches
color shades generator tints and shades lighten and darken color shades of a color color tint generator generate color shades

Add this free tool to your own website — copy and paste the code below.