Skip to content
MySafeToolbox

Color Palette Generator

Free color palette generator. Press space for harmonious 5-color schemes, lock favourites, then export CSS, Tailwind, JSON or PNG. Runs fully in your browser.

  • No upload — 100% private
  • Instant, on your device
  • Free, no sign-up
  • Works offline once loaded

How it works

How to use Color Palette Generator

  1. Press the space bar (or tap Generate) to create a new five-color palette.

  2. Lock the swatches you love so they stay put on the next spin.

  3. Pick a harmony such as analogous, triadic or monochrome to steer the results.

  4. Click any HEX code to copy it, or use the pipette icon to fine-tune a swatch.

  5. Export as CSS variables, Tailwind config, JSON or a PNG image — or copy the share link.

Why use it

Why use our Color Palette Generator tool

Harmonies that work

Analogous, complementary, triadic, split-complementary and monochrome schemes built in OKLCH for even, pleasing lightness.

Lock & build

Locked colors anchor the harmony, so new swatches are generated to match them.

Developer exports

One-click CSS custom properties, Tailwind v4 @theme and v3 config, JSON with RGB/HSL/OKLCH, or a PNG for mood boards.

Shareable links

Your palette and locks are stored in the page address — bookmark it or send it to a teammate.

Private by design

Everything happens in your browser. No account, no tracking of your colors.

FAQ

Frequently asked questions

How does the palette generator choose colors?

It picks a base hue, lightness and chroma in the OKLCH color space, then places the other swatches using color-theory offsets for the harmony you chose. Working in OKLCH keeps lightness perceptually consistent, so palettes look balanced rather than muddy.

What does locking a color do?

Locked swatches never change when you regenerate. The first locked color also becomes the base of the harmony, so a complementary palette will be built around it.

How do I use the palette in Tailwind CSS?

Choose the Tailwind export. For Tailwind v4, paste the @theme block into your main CSS file and use classes like bg-palette-1. A tailwind.config.js snippet for v3 is included in a comment.

Can I share a palette with someone?

Yes. The colors, locks and harmony are saved in the URL after the # sign. Copy the share link and anyone who opens it sees the same palette. The part after # is never sent to a server.

Why does the space bar not work sometimes?

Space is ignored while a text field, button or menu has focus, so it can still be used for typing and pressing controls. Click an empty part of the page and press space again.

Related tools

CSS Gradient Generator

Design linear, radial and conic gradients and copy the CSS.

Contrast Checker

Check WCAG AA/AAA contrast and fix failing colors in one click.

Color Converter

Convert any color to HEX, RGB, HSL, HSV, CMYK and OKLCH.

Favicon Generator

Make favicon.ico, app icons and the HTML tags in one click.