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.

Palette Name

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

Base Color

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

Generation Mode

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

Output Format

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.

Help

When should I use a Color Palette Generator?

Use it when you want to unify colors across your UI, including buttons, backgrounds, borders, hover states, and dark-mode colors for websites or utility pages.

What do the 50–900 steps mean?

Lower numbers are lighter colors, while higher numbers are darker colors. The 500 or 600 step is commonly used as the main brand accent color.

50–100: Light background colors
200–300: Light borders or hover backgrounds
400–600: Buttons, links, and accent colors
700–900: Emphasized text or dark backgrounds

Recommended Usage

Use the 500 or 600 step as the main brand color.
Use 500–600 for button backgrounds and 600–700 for button hover states.
Use 50–100 for light card backgrounds or notification backgrounds.
Use 200–300 for borders to create subtle separation.

Why manage colors with CSS variables?

CSS variables make it easy to reuse the same color system across pages. If the brand color changes later, updating the variable values can apply the change across the entire UI.

What should I choose as the base color?

Use the button color or brand accent color that appears most often on your site. A medium-brightness color usually works better for palette generation than a color that is too bright or too dark.

Should I choose CSS Variables or SCSS Variables?

For projects using plain CSS, CSS Variables are recommended. For SCSS-based build systems, SCSS Variables can be easier to manage.

Where is JSON output used?

JSON output is useful for managing color data in design tokens, theme configuration files, frontend configuration objects, or build systems.