⌘K

🎨

Color Shades Generator

Generate tints and shades of any color. Free, private — all processing in your browser.

#0203175%

#04052f10%

#06084615%

#080a5e20%

#0b0d7525%

#0d0f8c30%

#0f12a435%

#1114bb40%

#1317d345%

#1519ea50%

#2c30ec55%

#4447ee60%

#5b5ef065%

#7375f270%

#8a8cf475%

#a1a3f780%

#b9baf985%

#d0d1fb90%

#e8e8fd95%

#020317

#060846

#0b0d75

#0f12a4

#1317d3

#2c30ec

#5b5ef0

#8a8cf4

#b9baf9

#e8e8fd

How to use

1. Enter or paste your data in the input area above
2. Adjust settings or options as needed
3. Click the action button or see real-time results
4. Copy the result with the copy button

All processing happens in your browser. Nothing is sent to any server.

About this tool

Generate color tints (lighter) and shades (darker) from any base color. The tool creates a full spectrum of 19 lightness variations from 5% (nearly black) to 95% (nearly white), displayed as a continuous gradient strip and individual swatches with HEX values. Click any swatch to copy its color code. Use it for building design system color scales (like Tailwind 50-950), creating hover/active state variations, designing accessible color combinations, and establishing consistent color hierarchies in your UI.

FAQ

▶Is the Color Shades Generator free to use?

Yes, completely free. No signup, no premium tiers, no hidden costs.

▶Is my data safe when using the Color Shades Generator?

All processing happens in your browser. Your data never leaves your device.

▶Does the Color Shades Generator work on mobile?

Yes, fully responsive. Works on smartphones, tablets, and desktops.

▶Do I need to install anything?

No. It runs entirely in your web browser. Just open the page and use it.

Related tools

All Color Tools

Color Palette Generator

Generate beautiful color palettes from a base color

Color Contrast Checker

Check WCAG color contrast ratios for accessibility

Tailwind CSS Color Finder

Find the closest Tailwind CSS color class for any color

Gradient CSS Generator

Create multi-stop CSS gradients with a visual editor

Color Blindness Simulator

Simulate how colors appear to people with color blindness

Image Color Palette Extractor

Extract the dominant color palette from any image

Learn more

Git Commands Cheat Sheet: Every Command You Actually Need

CSS Colors: HEX, RGB, HSL Explained — When to Use Each Format

SQL Joins Explained Visually: INNER, LEFT, RIGHT, FULL, and CROSS

Explore more tools

200+ free tools that run in your browser.

Browse all tools →