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.

カラーシェードジェネレーター

ベースカラーからティントとシェードの完全なパレットを生成。Tailwind風の11段階カラーをHEX、HSL、RGB形式で取得できます。

ベースカラー

出力形式

使い方

ベースカラーからティントとシェードの完全なパレットを生成。Tailwind風の11段階カラーを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