Create color palettes in seconds

It's a group of colors chosen to be used together in a design. It usually has a main color, lighter and darker versions of that color, and one or two accent colors. Palettes are used in logos, branding, social media, websites, interfaces and illustration.

It doesn't show a fixed list: it creates palettes on the fly. It picks a base hue and builds five colors using harmony rules (analogous, complementary, triadic or monochromatic). Each style has its own brightness and saturation ranges, so a pastel palette comes out soft and a neon one comes out vibrant. In the editor, press the spacebar to create a new palette and lock the colors you want to keep.

First, think about what you want to convey. Warm tones feel friendly and energetic, cool tones feel calm and trustworthy, and dark tones feel elegant. Use just a few colors, keep enough contrast so text is easy to read, and test the palette in a real design before you decide.

Colors go together when they share a harmony: neighbors on the color wheel (analogous), opposites (complementary) or shades of the same hue (monochromatic). Every palette on this site follows those rules. See examples in matching color palettes.

Every palette comes with its hex codes, and you can copy ready-to-paste CSS. Also check the contrast between text and background so your site is easy to read, or pull a palette from a photo. Find more ideas in web color palettes.

It arranges the primary, secondary and tertiary colors in a circle. It shows which colors go together and which ones contrast, which is why it's the starting point for building palettes. Try it in color harmony.

The primary colors are red, blue and yellow: you can't make them by mixing other colors. Secondary colors come from mixing two primaries: blue and red make purple, blue and yellow make green, and red and yellow make orange. Mixing a primary with a secondary gives you the tertiary colors.

A monochromatic palette uses a single hue in lighter and darker versions. It feels unified and elegant. Complementary colors sit opposite each other on the color wheel, like blue and orange. Together they create maximum contrast and make each other stand out.

Yes. You can copy the hex codes or the CSS and use them in any project, personal or commercial.