Color Shades Palette Generator

When to use?

Use it to make light and dark color steps for buttons, backgrounds, borders, and hover states from one brand color. Quickly draft Tailwind custom colors, design tokens, and UI palettes.

How to use

• Enter a color via the picker or HEX code.
• 50–950 shades are generated automatically.
• Compare light background, base, and dark accent.
• Copy each step individually or all at once.

Input Explanation

Set the base color with a #rrggbb HEX code or color picker. Use a palette-centric color like a brand primary, button base, or chart color.

Calculation Basis

It converts HEX to HSL and adjusts lightness in steps by hue and saturation to generate 11 shades. It is not identical to Tailwind's default palette but a practical draft approximation.

Usage Examples

• Tailwind custom colors - Use as a draft for tailwind.config colors or CSS-variable design tokens.
• Design state colors - Make background/border/text steps for UI states like primary, success, warning.
• Share in design review - Paste each step's HEX into a design-system doc or PR description.

Examples

• #3b82f6 → 50: #EFF6FF ~ 950: #1E3A5F
• One brand blue → an 11-step 50–950 shade palette
• #16a34a → a green scale for success backgrounds, borders, and text

Cautions

• Generated output is for reference; test carefully before production use.
• Shade steps do not guarantee accessibility contrast — run a separate contrast check for text/background.

Guides

Using a color scale

50–100 steps suit light backgrounds, 500–600 base buttons or links, and 700–950 hover/active/emphasis text.

Tailwind custom palette

Put the step HEX values into tailwind.config colors or CSS variables to quickly build a consistent brand-based UI palette.

Check accessibility contrast

Auto-generated shades do not guarantee contrast. Verify against WCAG contrast standards before using for text/background combinations.

Organize design tokens

Naming steps like primary-50, primary-500, primary-900 lets you manage the same color by the same name in design and code.

FAQ

Is it exactly Tailwind's default palette?

It is an HSL-based approximation, so it may differ slightly.

How many shade steps are generated?

A Tailwind-style scale from 50 to 950 at once.

Where do I use the generated colors?

In design-system color tokens or a Tailwind custom palette config.

Does it guarantee accessibility contrast?

No. The steps are color candidates; run a separate contrast check for actual text/background combinations.

Related Tools

• Color Code Converter - Convert HEX, RGB, RGBA, HSL, HSLA color codes to each other and preview the color.
• Color Palette Picker - Pick a color and view its HEX, RGB, HSL values plus complementary and analogous colors.
• CSS gradient Generator - Adjust colors and angle to generate linear-gradient CSS.
• CSS text-shadow Generator - Adjust X/Y offset, blur, color, and opacity to make CSS text-shadow code.
• JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
• UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.