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.

颜色色阶生成器

从任意基础颜色生成完整的色调和阴影调色板。获取11个Tailwind风格的颜色级别，支持HEX、HSL或RGB格式。

基础颜色

输出格式

使用方法

从任意基础颜色生成完整的色调和阴影调色板。获取11个Tailwind风格的颜色级别，支持HEX、HSL或RGB格式。

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.

主要功能

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

常见问题

了解更多

Color Shades Generator: Build Complete Palettes for Your Design System