Skip to content

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.

Processing and privacy

Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.

Read the privacy policy

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

Click a star to rate this tool

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. 1 Enter a color in any format or pick one.
  2. 2 Choose how many steps to generate.
  3. 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.

  • How to Use Color Tone Generator

    Generate tints, shades and tones from any HEX, RGB, HSL, HSV or CMYK color, see every format of the color and click any swatch to copy its HEX code.

Browse all guides

Report an issue

Something broken or not quite right? Tell us and we will look into it.

Accessibility Menu

Personalize your experience. Open with Ctrl+U (Option+U on Mac). Preferences stay in this browser when storage is available.

Move / Hide Widget

Restore at any time with Ctrl+U (Option+U on Mac).

Accessibility statement and help