What this is

You need colors for a page and your eye has gone stale. This picks a hue at random, builds five colors around it by the harmony you choose, and hands them back as something you can paste into a stylesheet.

Lock the colors you want to keep, press Space, and only the unlocked ones are replaced. Everything runs in your browser: there is no account, nothing is uploaded, and nothing is kept between visits.

What it does

• Four ways to build a palette. Complementary, analogous, triadic or plain random. Five swatches either way.
• Lock and reroll. The padlock on a swatch pins that color; Space or the Generate button replaces the rest.
• Copy a hex. Click a swatch and its hex code goes to the clipboard.
• Adjust by hand. Hue, saturation and lightness sliders sit on every swatch.
• Legible labels. The hex on each swatch is written in white when white clears a 4.5:1 contrast ratio against that color, and in black when it does not.
• Two exports. CSS custom properties or a Tailwind theme block, copied with one button.

What comes out

A palette built on hue 210 with the complementary harmony, exported as CSS variables:

:root {
  --color-1: #28598a;
  --color-2: #2828bd;
  --color-3: #e28c36;
  --color-4: #d7d775;
  --color-5: #591f93;
}

The same five colors as a Tailwind config:

module.exports = {
  theme: {
    extend: {
      colors: {
        palette: {
      '1': '#28598a',
      '2': '#2828bd',
      '3': '#e28c36',
      '4': '#d7d775',
      '5': '#591f93',
        },
      },
    },
  },
};

More small tools →