Color Shades Generator

All tools

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.

About Color Shades Generator

The Color Shades Generator expands a single color into a complete range of tints and shades. Give it a base color and it produces progressively lighter tints on one side and progressively darker shades on the other — the classic 50-to-900 style ramp used in modern design systems.

Two controls shape the output: the step percentage sets how much lighter or darker each shade gets (1–25% per step), and the count sets how many tints and shades appear on each side of the base, up to ten. A gradient strip previews the whole ramp at a glance.

Generation happens instantly in your browser as you type — nothing is sent to a server. Copy any single value, the full list, or the whole ramp as CSS variables, ready to drop into a design-token file or a Tailwind-style color scale.

How to use Color Shades Generator

  1. Pick a base color with the picker or type a value; click "Random color" for inspiration.
  2. Set the step percentage to control how strongly each shade lightens or darkens.
  3. Choose the shade count to decide how many tints and shades appear on each side.
  4. Click a swatch to copy it, or use "Copy all" and "Copy CSS variables" for the full ramp.

Frequently asked questions

Yes, completely. All tints and shades are computed live in your browser, so there is no cost, no account and no limit on how many ramps you generate.

A tint is your base color mixed toward white (lighter), while a shade is the base mixed toward black (darker). The generator produces both directions at once, labeled "Tints (lighter)" and "Shades (darker)" around your base color.

Set the count to 4 or 5 per side so you get nine to eleven swatches total, with your base in the middle. A step of roughly 8–10% usually gives spacing similar to the 50–900 scales used by popular frameworks.

Small steps (3–6%) give subtle hover and border variations; medium steps (8–12%) suit full design-system ramps; large steps (15–25%) create high-contrast, poster-like sets. Watch the gradient preview — a good ramp should darken evenly without banding.

Yes. "Copy CSS variables" outputs the whole ramp as named CSS custom properties, and "Copy all" gives you a plain list of values you can paste anywhere, from SCSS maps to JavaScript theme objects.
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. Free
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. Free
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. Free
Image Color Extractor Pull a refined, copy-ready color palette from any image. Free
Web-Safe Color Palette Browse the classic 216 web-safe colors as a clickable swatch grid — sort by hue or cube order, filter by hex, and copy any HEX or rgb() value instantly. Free
Font Pairing & Google Fonts Directory Browse a curated directory of popular Google Fonts with live previews, filter by category and search by name, then copy ready-to-paste CSS and explore suggested font pairings — all in your browser. Free
Popular searches
color shades generator tints and shades lighten and darken color shades of a color color tint generator generate color shades
Need help?
Found an issue with this tool? Let our team know.
Report an issue

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