ColorFlowTools

Free Color Palette Generator

Build a coordinated color scheme from a single base color or a random seed. Choose a generation method such as complementary, analogous, triadic, monochromatic, or shades, then refine the result: lock the colors you like, regenerate only the rest, reorder swatches, and add or remove colors until the palette feels right. Every swatch shows its HEX, RGB, and HSL values and copies with one click. When you are happy, name the palette, save it in your browser, and export it as CSS custom properties, SCSS variables, Tailwind config, JSON, CSV, SVG, or a PNG image. You can also create a shareable link that stores only the color values, never any personal data or images.

Tip: press Space to regenerate unlocked colors (when not typing in a field).

My palettes

How to use the Color Palette Generator

  1. Pick a base color and method. Set a starting color and choose a scheme such as analogous, triadic, or monochromatic.
  2. Generate and refine. Generate the palette, lock swatches you want to keep, and regenerate the unlocked ones.
  3. Reorder and adjust. Move swatches with the arrow buttons, add or remove colors, and tweak individual values.
  4. Save or export. Name and save the palette, copy all values, export to code, or download an SVG/PNG.

Examples

  • Theme from a brand color: Enter your brand HEX, choose monochromatic, and export CSS variables for a full light theme.
  • Distinct chart colors: Use a triadic or tetradic scheme so categories stay visually separated in a data chart.

How it works

Palette schemes are based on relationships between hues on the color wheel. Complementary colors sit opposite each other, analogous colors sit next to each other, and triadic colors are evenly spaced. Monochromatic schemes hold hue constant and vary lightness. The generator computes these relationships mathematically so results stay balanced regardless of the base color.

Common use cases

  • Designing a website or app theme from one starting color
  • Producing a set of distinct, coordinated chart or category colors
  • Exporting brand palettes as CSS or JSON for a design system

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

How does locking a color work?

Click the lock on any swatch to keep it. When you regenerate, locked swatches stay put and show a lock icon and label; only unlocked colors change.

What can I export?

HEX, RGB, and HSL lists, CSS custom properties, SCSS variables, Tailwind config, JSON, CSV, and SVG or PNG images, all generated in your browser.

Do share links include my images?

No. Share links contain only the color values and a few options, kept short. They never include images or personal information.

Can I reorder colors with the keyboard?

Yes. Each swatch has move-left and move-right buttons so you can reorder without dragging, which also works on touch devices.

Where are saved palettes stored?

In your browser’s local storage. They stay on your device and disappear if you clear your browser data. You can back them up as JSON.

Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support. Random Color Generator Generate random colors with style filters, hue/saturation ranges, and contrast pairs. Monochromatic Palette Generator Generate a monochromatic palette by varying lightness of a single hue. Analogous Color Generator Generate analogous colors next to your base hue for a harmonious scheme. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export.