Skip to tool

Color Palette Builder

Start with a color you love and build a full palette around it. Great for planning a project's color story.

How to Use the Color Palette Builder

  1. Start with a color. Click the swatch to open a color picker, or type a hex code directly if you already have one in mind.
  2. Pick your scheme type. Monochrome gives you shades of the same color — safe and elegant. Analogic pulls in neighboring hues for a harmonious feel. Complement brings in the opposite color for contrast. Triad and Quad spread things out evenly around the color wheel.
  3. Choose how many colors. Anywhere from 3 to 8 swatches.
  4. Hit "Generate Palette." Each swatch shows the color name, hex, RGB, and HSL values.
  5. Copy what you need. Click Copy on any individual swatch, or use the export buttons to grab the whole palette as CSS variables, SCSS, or a plain list of hex codes.

Tip: Color data is powered by The Color API — a free public service for color information and schemes.