Aqeeb Studio

Palettes & Harmony

Free Color Palette Generator

Choose a base color and a palette type to create a harmonious set of three to eight colors, then export it as CSS, JSON, SVG or PNG. Palette generated in your browser.

Palette generated in your browser.

Export palette

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Color Palette Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. Choose a palette type: analogous, complementary, monochromatic, triadic, split-complementary, tetradic, random or custom.
  3. Set how many colors you want, from 3 to 8.
  4. Copy a single HEX code, or export the whole palette as CSS, JSON, CSS variables, SVG or PNG.
  5. Choose custom to edit any swatch and build a palette of your own.

Examples

Complementary

Royal blue #4169E1 pairs with #E1B941, the color directly opposite it on the wheel. Together they give the strongest contrast of hue.

Analogous

The neighbors of royal blue, 30° either side, are #41B9E1 and #6941E1. They sit close on the wheel, so the palette feels calm.

Triadic

Three colors evenly spaced, 120° apart: #4169E1, #E14169 and #69E141. Vivid and balanced, and best with one color leading.

Tips

  • Let one color dominate and use the others for accents; equal amounts of every color look busy.
  • Always test text on palette colors in the contrast checker before using them for text.

Questions about the Color Palette Generator

Which palette type should I choose?

Analogous and monochromatic palettes feel calm and cohesive. Complementary and triadic palettes are livelier and need one dominant color. Split-complementary and tetradic palettes offer more variety but take more care to balance.

How do I get CSS variables?

Press Copy CSS variables under the swatches. You get a :root block with one custom property per color.

Does the generator save my palettes?

No. Palettes are created in your browser and are not stored on a server. Copy or download the ones you want to keep, or save the page address, which holds the base color after the # sign.

How many colors does a user interface need?

Most interfaces work with one main color, one accent and a few neutrals. Use the tints and shades tool to expand a color into a full scale.

Complementary Color Generator

Find the color opposite any color on the color wheel.

Monochromatic Palette Generator

Create a palette from one hue by varying its lightness.

Random Color Generator

Generate random colors and palettes, then lock the ones you like.

Contrast Checker

Check text and background contrast against WCAG AA and AAA.

Want the background? Read Color Theory Basics.