Tailwind Palette Generator: Build an 11-Step Color Scale
Generate an 11-step Tailwind-style color scale, from 50 through 950, using a single base color. The palette ramps lightness in OKLch, a perceptually uniform color space Tailwind v3 uses. Review the generated shades, click any value to copy it, or use the included ready-to-paste Tailwind config snippet. Set the available options before generating.
The Tailwind Palette Generator creates an 11-step Tailwind-style color scale from a single base color. It generates shades numbered 50, 100, and onward through 950, making it easier to build a coordinated palette instead of creating every value by hand. Each shade is click-to-copy, and the tool includes a ready-to-paste Tailwind config snippet.
The generator builds the scale by ramping lightness in OKLch, a perceptually uniform color space that Tailwind v3 uses. Set the available options, provide a base color, and generate the palette to see the resulting shades. You can then copy an individual value or use the included config snippet.
A palette is a sequence of related color values, while the Tailwind config snippet is a convenient way to use the generated palette in a Tailwind project. Creating shades from one base color can help you establish a consistent range of lighter and darker values for your interface or project data. The 50–950 numbering makes the steps easy to identify when working with the scale.
The tool runs entirely in your browser, and your input is processed on your device rather than sent to a server. It has no server dependency, so after the page loads, it continues to work offline. The Tailwind Palette Generator is free to use and can help developers, designers, and DevOps engineers create and copy a complete color scale quickly.
Step 1: Provide a single base color to start your palette. The generator uses it to build the complete 11-step scale.
Step 2: Set the available options before generating. The specific options can be reviewed in the tool.
Step 3: Generate the palette and review its shades, numbered from 50 through 950.
Step 4: Click a shade to copy its value, or copy the included ready-to-paste Tailwind config snippet.
Use case: Create a complete set of Tailwind-style shades for a design system from one base color.
Use case: Prepare color values for tests, fixtures, or seed data without typing each shade by hand.
Use case: Generate an entire 50–950 scale at once instead of inventing values one at a time.
Use case: Build a palette for a project and copy individual shade values as you need them.
Use case: Use the included config snippet to bring the generated palette into a Tailwind configuration.
Use case: Explore how lightness changes across a palette using an OKLch-based scale.