Private browser utility / Color & Design

Shades and Tints Generator

Runs entirely in your browser - no upload, no sign-up.

Live workspaceLocal processing

Base color

3 or 6 HEX digits, with or without #.

Mixing steps

Your mixing table

sRGB channel mixing

Percentage is white or black added. Click a color to copy its HEX.

Tints and shades by percentage of white or black added
Added	Tints+ white	Shades+ black
20%
40%
60%
80%
100%

Export format

View export

:root {
  --color-base: #336699;
  --color-tint-20: #5c85ad;
  --color-tint-40: #85a3c2;
  --color-tint-60: #adc2d6;
  --color-tint-80: #d6e0eb;
  --color-tint-100: #ffffff;
  --color-shade-20: #29527a;
  --color-shade-40: #1f3d5c;
  --color-shade-60: #14293d;
  --color-shade-80: #0a141f;
  --color-shade-100: #000000;
}

01 / Overview

What does a shades and tints generator do?

A shades and tints generator mixes a base color with white to make lighter tints and with black to make darker shades. This tool pairs each mix percentage in a table, preserving your original HEX color. Choose the interval, copy individual swatches, or export the complete palette as CSS, JSON, or labeled HEX.

How to use

01
Enter a base HEX color
Paste a 3- or 6-digit HEX value, choose a color with the picker, or load the example.
02
Choose a percentage interval
Use 20% steps for a compact table or 5% steps for finer comparisons. Each row adds that percentage of white on the left and black on the right.
03
Copy or export
Click a swatch to copy its HEX. Choose CSS variables, JSON with percentages, or a labeled HEX list to copy or download the entire table.

Who it's for

Brand designers documenting exact white and black mixtures alongside a source color.
Frontend developers exporting percentage-labeled CSS values for borders, fills, and interaction states.
Design students comparing the effect of the same added percentage on lighter and darker colors.

The percentages describe how much white or black is added, not opacity or a design-system shade number. A 20% tint is 80% base color and 20% white. All results are solid, opaque colors calculated from the encoded sRGB channels.

For each red, green, or blue channel c and mix fraction p, a tint is round(c × (1 - p) + 255 × p); a shade is round(c × (1 - p)). For example, #336699 at 20% white becomes #5c85ad, and at 20% black becomes #29527a.

For a perceptual, numbered interface scale, use Color Shades for Figma. To explore complementary or analogous hues, use the Color Palette Generator. This table focuses on reproducible white and black mixing recipes.

FAQ

Are my colors uploaded?

No. HEX parsing, color mixing, and export creation run in your browser. Your entered colors are not sent to a processing server.

Is the shades and tints generator free?

Yes. All mixing intervals, individual color copies, and complete palette exports are free and require no account.

How many tints and shades can I generate?

Choose 5%, 10%, 20%, or 25% increments. These produce 20, 10, 5, or 4 tints and the same number of shades, plus your original color. Every table includes 100% white and 100% black. You can generate as many tables as you need.

What is the difference between a tint, shade, and tone?

A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with gray. This tool generates tints and shades in encoded sRGB. It does not simulate physical paint, whose results depend on the pigments and materials.

Why do some rows have the same HEX value?

White mixed with white stays white, and black mixed with black stays black. Near those endpoints, rounding to 8-bit channels can also repeat a HEX value. The table keeps these rows because their percentages still describe different mixing recipes.

Can I reproduce a tint with CSS color-mix()?

Yes. For example, color-mix(in srgb, #336699 80%, white 20%) uses the same mixing space and ratio as the 20% tint. This tool rounds its output to 8-bit HEX, while the browser may retain greater precision internally. Specify srgb explicitly when matching these results.

Do the generated colors guarantee accessible contrast?

No. A mixing percentage does not guarantee enough contrast between two palette colors. Check the actual foreground and background pair with a contrast checker. The black or white labels on this page are chosen for readability on their own swatches.