Color Tone Generator
Generate tints, shades and tones from any HEX, RGB, CMYK or HSV color.
Try rgb(59, 130, 246), hsv(217, 76%, 96%) or cmyk(76%, 47%, 0%, 4%). Click any swatch to copy it.
Tints
Mixed with white: lighter, softer versions for backgrounds and highlights.
Shades
Mixed with black: darker, richer versions for text, borders and hover states.
Tones
Mixed with gray: muted, less saturated versions for subtle, sophisticated palettes.
Continue your work
- Color Shades Generator — Create a full design-system scale.
- Contrast Checker — Check text contrast on the shades.
Share this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
0.0
0 ratings
- 5 stars 0
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the Color Tone Generator
Generate tints, shades and tones from any HEX, RGB, CMYK or HSV color.
- 1 Enter a color in any format or pick one.
- 2 Choose how many steps to generate.
- 3 Click a swatch to copy it, or copy the color in another format.
Example and practical tips
Starting from #3B82F6, the tints give light backgrounds, the shades give hover and text colors, and the tones give muted borders for the same brand blue.
Frequently asked questions
What is the difference between tints, shades and tones?
Tints mix the color with white, shades mix it with black, and tones mix it with gray.
Can I enter CMYK or HSV?
Yes. Type cmyk(0, 50, 100, 0) or hsv(30, 100%, 100%) and the color is converted for you.
Report an issue
Something broken or not quite right? Tell us and we will look into it.