How are tints and shades calculated?

Tints are created by mixing the color with white; shades by mixing with black. Steps are evenly distributed across the 0–100% range.

What color input formats are accepted?

HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) are all accepted.

Color Lightener & Darkener — Generate Tints and Shades

Enter any color and generate a full range of tints (mixed toward white) and shades (mixed toward black) across ten evenly spaced steps. Click any swatch to copy its HEX, RGB, or HSL code to your clipboard. Great for building a color scale for a design system, picking the right hover or disabled state, or exploring how a brand color can be varied.

Frequently Asked Questions

How are tints and shades calculated?: Tints are created by mixing the color with white; shades by mixing with black. Steps are evenly distributed across the 0–100% range.
What color input formats are accepted?: HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) are all accepted.
Can I copy individual swatch values?: Yes. Click any swatch to copy its HEX, RGB, or HSL code to your clipboard.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Code Converter — HEX, RGB, HSL & More

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly. Paste any value or use the color picker — get every format at once. Free.