ColorOverflow

Active Palette: Untitled palette

Select a color to see its shades & tints

Design Your Perfect Palette

Pick a color, explore harmonies, and build your palette.

Pick a color

Choose a color from the wheel or enter a hex code.

Drag the marker for hue and saturation, the outer ring for lightness.

Use image color

Color Harmony

Generate harmonious color combinations.

Color Format

How colors are shown and copied.

About the Color Palette Generator

How to create a color palette, use color harmony rules, and export your colors as HEX, RGB, HSL or code.

The ColorOverflow Color Palette Generator is a free online tool for creating color palettes and color schemes. Pick a base color on the color wheel or type a HEX code, apply a color harmony rule, and you get a set of colors that work together. You can then fine-tune each color, add up to ten, and copy or export the palette for your website, app, brand or artwork.

It runs in your browser with no sign-up, and your palettes are saved in your own browser when you add them to your wishlist.

How to create a color palette

  1. Pick a base color. Drag the marker on the color wheel, use the outer ring for lightness, or type a HEX code. You can also pick a color from an image.
  2. Choose a color harmony rule, such as complementary or analogous. The generator builds a matching color scheme around your base color.
  3. Fine-tune the palette. Select any color to see its shades and tints, add more colors, or remove ones you don't need. Use Random palette for a fresh starting point.
  4. Pick a color format. Colors are shown and copied as HEX, RGB or HSL.
  5. Save or export. Add the palette to your wishlist, copy it as CSS variables, Tailwind, JSON and more, download a PDF, or share a link.

Color harmony rules explained

Harmony rules are patterns on the color wheel that reliably produce colors that look good together. The generator supports six:

  • Monochromatic: one hue in lighter and darker versions, calm and easy to use.
  • Analogous: neighboring hues for a natural, unified color scheme.
  • Complementary: opposite colors for the strongest contrast and eye-catching accents.
  • Split complementary: a base color with the two hues beside its opposite, with contrast but less tension.
  • Triadic: three evenly spaced hues for a lively, balanced palette.
  • Tetradic: four evenly spaced hues, the most variety, best with one color leading.

What you can do with your palette

  • Copy any color's HEX, RGB or HSL code with one click.
  • See shades, tints and tones of each color for hover states, backgrounds and borders.
  • Export color codes as CSS variables, Tailwind theme colors, JSON, SCSS, Less or SVG.
  • Download a PDF with every color's codes and its shades and tints.
  • Preview the palette on websites, apps, posters, outfits and rooms in the Palette Visualizer.
  • Open the palette's details page to check text contrast for accessibility.

Tips for a better color scheme

  • Start from one color you're sure about, such as a brand color, and build around it.
  • Let one color lead and keep the accent color scarce, so it stands out where it matters.
  • Add light and dark neutrals for backgrounds and text. Most of a design is neutral space.
  • Check contrast before you commit: WCAG asks for at least 4.5:1 for normal text.
  • Test the palette on a real design. Colors look different next to each other than as swatches.

Frequently asked questions

Is the color palette generator free?
Yes. It's free to use with no account, and there's no limit on how many palettes you create.
How many colors can a palette have?
Between two and ten colors. Most palettes work best with three to five, plus neutrals.
Can I enter my own HEX color code?
Yes. Type or paste a HEX code into the picker and the generator uses it as the base color for your palette.
What is the difference between HEX, RGB and HSL?
They're three ways to write the same color. HEX is a six-digit code like #6366F1, RGB lists red, green and blue values, and HSL describes hue, saturation and lightness, which is the easiest to adjust by hand.
Where are my saved palettes stored?
In your browser's local storage, on your device. Nothing is sent to a server, so saved palettes stay on the browser you saved them in.
Can I use the palettes commercially?
Yes. Colors themselves can't be owned, so you can use any palette you create in personal or commercial projects.

Unsaved changes

“” has changes that aren't saved to your wishlist. Save them before continuing?