Color Palette Generator

The problem

Color is where most design systems begin, and the first afternoon of a new project tends to look the same: pick a brand hex, hand-mix lighter and darker shades, name them, turn them into styles, then build a swatch page so developers know what is what. None of it is hard. All of it is slow, and small inconsistencies creep in when you do it by eye.

I wanted one input, a single hex, and a palette that was ready to use in Figma and ready to hand off to code.

What it does

• Generates a Tailwind-style 8-step palette (100 to 800) from one hex value.
• Creates Figma Variables as color primitives, so the palette is ready for tokens and modes.
• Creates matching Paint Styles for files and teams that still work with styles.
• Draws a documentation frame on the canvas with every shade, its hex code and contrast labels.
• Shows a live preview while you adjust the base color.
• Runs in Figma and FigJam with no network access.

How it works

1. Run the plugin from the Plugins menu in Figma or FigJam.
2. Enter the base hex for your color.
3. Check the live preview as it fills in the 100 to 800 scale, and tweak the hex until it feels right.
4. Generate. The plugin writes the Variables and Paint Styles straight into the file.
5. Use the documentation frame it places on the canvas as a ready-made reference for your team.

Name the palette, pick a base color and choose what to create

The generated 8-step scale with hex codes

The palette saved as Figma Variables

Building it

The 100 to 800 scale is borrowed from Tailwind on purpose. Developers already know it, so step 500 means the same thing in a Figma file as it does in a Tailwind-flavored codebase. A shared vocabulary does more for handoff than any annotation.

I kept the UI compact. A palette tool should not cover the canvas you are designing on, so the panel stays small: the input, the preview and the generate step.

Generating Variables and Styles natively mattered most. Exporting a JSON file or a picture of swatches would have been easier to build, but then someone still has to recreate everything by hand. Writing directly through the Figma API means the palette is live in the file the moment you click.

The documentation frame comes from the handoff side of my work. Contrast labels next to each hex give a quick WCAG read, so you can see which shades are safe for text before anyone has to ask.

No network access was a deliberate choice too. Nothing leaves the file and there is no account to create. For a plugin that touches brand colors, that felt like the right default.

Version 2, released on 25 June 2026, fixed a bug in how color styles were created. A small fix, but styles are half of the output, so it had to be right.

So far the plugin has 707 users on Figma Community. If you set up color systems often, give it a spin: Open in Figma Community.