Tiny Toolkit

Color Lightener & Darkener

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.

All processing happens in your browser. No data is sent to any server.

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

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.

Border Radius Generator

Visually build CSS border-radius values. Control each corner independently, toggle px or %, and copy the ready-to-use shorthand.