ToolWren › Shades & Tints

Color Shades & Tints Generator

Generate a full range of shades, tints and tones from any base color — perfect for building a color palette.

100% client-side · nothing is uploaded

Loading tool…

How to use the Shades & Tints

Pick a base color with the picker or by typing a HEX code.
The tool generates tints (lighter), shades (darker) and tones (muted) automatically.
Click any swatch to copy its HEX code.
Use the range to build a cohesive palette around your base color.

Privacy: this tool runs entirely in your browser. Your input is never sent to, received by, or stored on any server — there are no uploads and no tracking of what you enter.

About Shades & Tints

Shades, tints and tones

A tint mixes a color with white (lighter), a shade mixes it with black (darker), and a tone mixes it with grey (muted). Together they give you a cohesive palette from one starting color.

How to use it

Pick a base color and the tool generates eight tints, eight shades and eight tones, each as a swatch with a HEX code.

Building palettes

Use tints and shades for hover states, backgrounds and borders that stay on-brand with your primary color.

Frequently asked questions

What is the difference between a shade and a tint?

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

What is a tone?

A color mixed with grey, which makes it more muted or subtle.

How do I copy a color?

Click any swatch to copy its HEX code to your clipboard.