win-j logo
Personal Tech Blog

Developer Design Utility

Color Palette Generator

Create a Tailwind-style 50–900 color palette from a single base color, then export it as CSS variables, SCSS variables, or JSON for your design system.

Automatic Palette Generation Generate a brightness-based color palette from your brand accent color.
HEX / RGB Preview View each color step as a card and click to copy its color value.
CSS · SCSS · JSON Output Get code that can be pasted directly into project style files or configuration files.
Palette Name primary
Base Color #2563eb
Generated Steps 10 steps
Output Format CSS

Palette Settings

Choose a brand color, palette name, generation mode, and output format.

Used for CSS variable names, SCSS variable names, and JSON keys.

Enter the brand main color or accent color used for buttons.

Use Tailwind Style for design systems and Compact for simple UI palettes.

Choose the format that matches how your project manages styles.

Color Palette Preview

Click a color card to copy its HEX code to the clipboard.

Ready
Enter a base color, then click Generate Palette.

Generated Result

Use the code below in a CSS file, SCSS file, or theme configuration file.

Generated code will appear here after creating a palette.
Practical guide

Build a shade scale from one HEX color

Create light and dark variants of one base color and export CSS variables, SCSS variables or JSON. Choose a 10-, 9- or 5-step scale for your design tokens.

Prepared & reviewed by
win-j
Last reviewed
2026-10-01

Who this helps

  • Designers preparing color tokens
  • Developers styling buttons and surfaces

When to use this tool

  • Create a compact brand shade scale.
  • Export a base color with reusable token names.

From input to a checked result

  1. 1

    Enter a palette name and a 3- or 6-digit HEX color.

  2. 2

    Choose the 10-step, 9-step or compact 5-step mode.

  3. 3

    Generate the swatches and inspect their HEX and RGB values.

  4. 4

    Choose CSS, SCSS or JSON and generate the output again.

  5. 5

    Check text contrast on the actual background before applying the tokens.

Example 1

Keep the base color

Input
#2563eb; 10-step mode
Result
Step 500 is #2563eb; 10 colors are generated.

The numbering is Tailwind-style, not an official Tailwind palette.

Example 2

Compact CSS

Input
primary; compact mode; CSS output
Result
Steps 100, 300, 500, 700 and 900; hover uses step 700.

The example references a shade that exists in the selected scale.

How it works

RGB channels are mixed toward white below step 500 and toward #020617 above it. Step 500 preserves the base color. Names are normalized for generated identifiers; digit-leading names receive a palette- prefix.

Limitations

  • This is a shade generator, not a complementary-color or HSL harmony generator.
  • Equal RGB mixing steps do not guarantee equal perceived brightness.
  • The white button text in the example is not automatically contrast-checked.
  • CMYK, spot colors and alpha HEX are not supported.
Your data

Colors and names are processed locally in the browser, without uploading them to win-j.

Frequently asked questions

Are these official Tailwind colors?

No. The tool uses familiar shade labels but computes its own RGB mixtures.

Does the five-step mode include 600?

No. Its steps are 100, 300, 500, 700 and 900; the CSS hover example uses 700.

Why does an invalid HEX become blue?

The current normalizer falls back to #2563eb. Check the displayed base color before copying.