🎨Color Tools

Shades & Tints Generator

Enter a base color to instantly build lighter tints and darker shades. Everything updates live—no generate button.

10

Preview

Pick a color to see tints and shades.

Tints (lighter)

Shades (darker)

How to use
  1. Type or paste a HEX code (e.g., #1F2937) or pick a color from the input.
  2. Adjust Steps for how many swatches you want on each side.
  3. Optional: enable Add tones to include neutralized versions (good for backgrounds).
  4. Click any swatch to copy its HEX; use the copy buttons for CSS or JSON output.

FAQs — shades, tints, and tones

What’s the difference between a tint, a shade, and a tone?
Designers use tints for lighter variations (color + white) and shades for darker variations (color + black). Tones mix the color with gray, softening saturation without pushing too light or too dark.

How many steps should I generate?
For most design systems, 8–12 steps feel natural. It gives you room for backgrounds, UI states, and charts without crowding the palette. For a small landing page, 5–7 steps are plenty.

Why do my tints look washed out?
Very bright base colors get milky quickly. Try a slightly darker starting color or switch on tones for subtle backgrounds. Tones keep contrast manageable while staying on-brand.

Can I use these colors for text?
Each swatch shows a readable text color (black or white) based on contrast. For long paragraphs, aim for a ratio of 7:1 when possible; for large headlines, 4.5:1 is a good baseline.

How accurate is the math?
We mix colors in sRGB and compute contrast from relative luminance. It’s fast, predictable, and close to what modern browsers render.

Is anything uploaded?
No—everything runs locally in your browser for instant results.

Tip: once you pick a primary brand color, generate 10–12 steps and keep only the few you actually use in UI.