十六进制颜色色阶生成器

What Is the Hex Color Shades Generator?

The Hex Color Shades Generator takes any hex color and produces a complete range of tints (lighter variants mixed toward white) and shades (darker variants mixed toward black). Choose from 5 to 20 steps to control the granularity of the scale, then copy individual hex values by clicking any swatch, or copy all values at once.

This tool is useful for designers creating color systems, developers building Tailwind CSS configurations, and anyone who needs a consistent palette from a single brand color. The 10-step mode produces a Tailwind-compatible 100–1000 scale.

How to Use the Hex Color Shades Generator

1. Enter a hex color in the input field (with or without #), or use the color picker, or click a preset.
2. Choose the number of steps: 5, 9, 10, 11, or 20.
3. The shade scale appears instantly. Click any swatch to copy its hex value.
4. Click Copy All to copy all hex values as a newline-separated list.
5. With 10 steps selected, a Tailwind-style table shows the 100–1000 scale with labels.

Features

• Generates tints and shades from any valid hex color
• 5 step count options: 5, 9, 10, 11, 20
• Color picker + hex text input for flexible entry
• HSL breakdown displayed for the base color
• Click any swatch to copy its hex value
• Copy All button for bulk export
• Tailwind-style 100–1000 labeled table at 10 steps
• WCAG-correct contrast color for swatch labels
• 6 preset colors for quick exploration

FAQ

What is the difference between a tint and a shade?

A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. This tool generates a full range from the lightest tint to the darkest shade, with the base color at the midpoint.

How does the 10-step scale relate to Tailwind CSS?

Tailwind CSS uses a 100–900 (or 50–950) scale for its color palettes, where lower numbers are lighter and higher numbers are darker. Selecting 10 steps produces a similar scale labeled 100 through 1000, making it straightforward to build custom Tailwind-compatible color palettes.

Can I use the generated shades in CSS?

Yes. Each generated shade is a standard hex color value (e.g. #3b82f6) that can be used directly in CSS, Tailwind configuration, design tokens, or any design tool. Click any swatch to copy its hex value, or use Copy All to copy all values at once.

What does HSL mean?

HSL stands for Hue, Saturation, and Lightness. Hue is the color type (0–360° on the color wheel), Saturation is how vivid the color is (0% is gray), and Lightness is how light or dark it is (0% is black, 100% is white). HSL is often more intuitive than RGB when creating color scales.