What are color shades and tints?

A shade is a color mixed with black (darker), and a tint is a color mixed with white (lighter). This tool generates 11 levels from very light (50) to very dark (950) by adjusting the lightness value in HSL while keeping the hue and saturation of your base color.

Why are the levels named 50 to 950?

The naming follows the Tailwind CSS color palette convention. Tailwind uses 50 (lightest) through 950 (darkest) with 500 being close to the original color. This makes it easy to integrate the generated shades directly into your Tailwind config or design system.

Can I use the output in CSS custom properties?

Yes! Click 'Copy as CSS Variables' to get the full palette formatted as CSS custom properties (e.g., --color-500: #3b82f6). Paste it into your :root block and reference the colors throughout your stylesheet.

What output formats are supported?

Three formats are supported: HEX (e.g., #3b82f6), HSL (e.g., hsl(217, 91%, 60%)), and RGB (e.g., rgb(59, 130, 246)). Click the format buttons at the top to switch between them.

Yes, completely free. All color calculations run in your browser — no data is sent to any server.

Color Shades Generator

Generate a complete palette of tints and shades from any base color. Get 11 Tailwind-inspired color levels in HEX, HSL, or RGB format.

Base Color

Output Format

How to Use

Generate a complete palette of tints and shades from any base color. Get 11 Tailwind-inspired color levels in HEX, HSL, or RGB format.

1Enter a hex color code or use the color picker to select your base color.
2The tool instantly generates 11 shades from 50 (lightest) to 950 (darkest).
3Choose your output format: HEX, HSL, or RGB.
4Click any shade to copy its value to clipboard.
5Use 'Copy All Values' or 'Copy as CSS Variables' for bulk export.

Key Features

11 Tailwind-inspired color levels from 50 to 950
Supports HEX, HSL, and RGB output formats
One-click copy for individual shades
Export entire palette as CSS custom properties
Real-time preview with contrast-aware text labels

Frequently Asked Questions

Learn More

Color Shades Generator: Build Complete Palettes for Your Design System