Free color palette generator

Pick one color and get every palette that goes with it. Click any color to copy its code.

How to use it

Choose your color Use the color picker, type or paste a hex code like #42cbe0, press Random for a new idea, or press From an image to take the colors of a photo or logo.

Browse the palettes Every palette below updates at once. The text on each swatch switches between black and white so it stays readable.

Copy and share Click a color to copy its hex code, copy a whole palette, copy the scale as CSS variables, or share a link to your palette.

Palettes you get

Color scale — eleven steps from 50 to 950, ready for a design system or Tailwind

Tints and shades — your color mixed step by step with white, and with black

Monochromatic — darker and lighter colors of the same hue

Analogous — the neighbours of your color on the color wheel, for a calm look

Complementary — the opposite color on the wheel, for strong contrast

Split complementary and triadic — three-color schemes spaced around the wheel

Pastels — soft, light colors around your hue

Neutrals — greys tinted with your color, for backgrounds and text

UI colors — success, warning, error and info colors that match your brand

Tips for using a palette

Try the 60/30/10 rule: one main color for most of the space, a second for larger elements, and an accent for buttons and links.

Check the contrast of text on light tints and pastels before you use them for words.

Use the neutrals for backgrounds, borders and body text: tinted greys make a design feel more consistent than pure grey.

Questions

Is the color palette generator free?

Yes. It is free and unlimited, with no account and no watermark.

Can I start from my own brand color?

Yes. Type or paste any hex code, or pick a color, and every palette is rebuilt from it.

Can I get a color palette from an image?

Yes. Press From an image, or drop or paste a picture, and you get its main colors with how much of the picture each one covers. Click any of them to build every palette from it. The picture is read in your browser and never uploaded.

How do I copy a color?

Click a swatch to copy its hex code. Each palette also has a button to copy all its colors at once, and the scale can be copied as CSS variables.

How is the palette made?

The colors are calculated in the OKLCH color space, where equal steps look equally different to the eye, so scales and harmonies stay balanced. There is no AI involved.

What is a complementary color?

The color on the opposite side of the color wheel. Together they give the strongest contrast, which is why complementary colors work well for calls to action.

Can I share my palette?

Yes. The page address includes your color, so Share copies a link that opens the same palette.

Does it work in Arabic?

Yes. The whole page is available in Arabic and English.