Color Palette Generator

Press SPACE to generate new colors.

Keyboard Shortcuts

Speed up your workflow with these keys

SPACEGenerate New

CCopy Whole Palette

How This Tool Works

This free online Color Palette Generator allows you to create cohesive, balanced color schemes dynamically. By pressing the Space key or clicking the Generate button, the tool algorithmically designs a four-color palette. You can toggle the lock icon on individual colors to hold them in place while spinning other coordinates. The generator is built to scale across primary, accent, and semantic color groups, and you can export your completed palettes as clean CSS styles or download them as high-quality PNG layout sheets.

Using This Tool in Figma

Inside Figma, color palettes form the core visual system of your styles and variables libraries. Use this generator to sample potential hue structures. Once you have locked in a scheme, copy the HEX array and paste the variables directly into your Figma Design Files. Setting these up as Figma variables under a single semantic library (e.g., 'Primary', 'Brand-Accent') lets you toggle themes effortlessly, creating consistent and dynamic components.

Frequently Asked Questions

How many colors should be in a design system palette?

A standard design system usually works with 3-5 core brand colors: a primary brand color, a secondary accent color, and supporting neutral/semantic shades.

What are locked colors in the generator?

Locking a color holds its HEX value constant. This allows you to generate new color combinations around that anchor hue, ensuring your primary theme remains unified.

What is the difference between custom and random palettes?

Random palettes spin all color values dynamically, while custom palettes are generated by locking specific core hues and allowing the algorithm to choose harmonic pairs.

How do I import these colors into Figma?

You can click Export and copy the HEX array, then paste individual HEX codes into the color input box in Figma's Fill properties panel, or map them as Variables.