Color Shades & Tints Generator

Design Tools

Lighter and darker shades of any color

FreePrivateInstant
Base color
Steps each side (1–9)
Copy as
Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

Color Palette GeneratorMatching color schemes from one base color
Random Color GeneratorGenerate random HEX, RGB & HSL colors
Color MixerBlend two colors and see in-betweens
CSS Gradient GeneratorCreate linear & radial CSS gradients
CSS Text Shadow GeneratorCreate glow and drop shadows for text
Color PickerHEX / RGB / HSL with tints

History

All history →

Color Shades & Tints Generator — at a glance

Turn one brand color into a whole scale of lighter and darker versions.

Input
Base #6366F1
Steps: 4
Run
Result
4 tints
base
4 shades

How to use it — step by step

Pick a base color and how many steps you want on each side.

1

Enter your values

Fill in the boxes. Sensible example values are already filled in for you.

2

Generate Shades

Press the button. The answer is worked out instantly on your device.

3

Read or copy the result

See the big answer and the extra details, then press Copy to keep them.

Pro tips

Small things that make the result better.

✦A tint mixes the color with white; a shade mixes it with black.
✦Use light tints for backgrounds and dark shades for text and hover states.
✦Copy as CSS variables to drop into your stylesheet.

Quick facts

Tintsand shades
1–9steps per side
CSS varsready to copy
Freeno signup

Frequently Asked Questions

What is the difference between a tint and a shade?+

A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker).

Is this the same as a tone?+

A tone mixes the color with grey. This tool creates tints and shades.

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

More Free Tools

Guides you might like

All guides →
Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to use
Color Contrast CheckerIs your text readable? The contrast ratio, explained
PX to REM Converterpx vs rem: why your font sizes should be allowed to scale
Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises