Generate a palette
Pick a base color and a harmony, and the palette updates instantly. Click any swatch to copy its hex code.
Harmonies
Every harmony is a different rule for choosing hues around the color wheel. Click a card to try it.
Free color palette generator
SimpleTools Color Palette Generator turns a single color into a coordinated palette using classic color-wheel harmonies. Everything runs locally in your browser — nothing is uploaded, saved, or tracked.
How to generate a palette
- Pick a base color using the color picker, or type a HEX, RGB or HSL value.
- Choose a harmony — complementary, analogous, triadic, split-complementary, tetradic or monochromatic.
- Click any swatch to copy its hex code, or use Copy all hex codes.
- Export the palette as CSS, SCSS, Tailwind or JSON, or download it as an image.
What is a color harmony?
A color harmony is a rule for choosing colors that work well together, based on their position on the color wheel. Complementary colors sit directly opposite each other for maximum contrast; analogous colors sit close together for a calmer, cohesive feel; triadic, split-complementary and tetradic harmonies space three or four hues further apart for more variety.
How are these palettes calculated?
Your base color is converted to HSL (hue, saturation, lightness). Most harmonies work by rotating the hue around the 360-degree color wheel by a fixed amount — 180° for complementary, 120° steps for triadic, and so on — while keeping saturation and lightness close to the original. Monochromatic palettes keep the hue and saturation fixed and instead vary the lightness, producing tints and shades of the same color.
Which harmony should I use?
Use complementary or split-complementary for strong contrast and a clear focal color. Use analogous or monochromatic for a calm, cohesive look, such as a single brand color with supporting tints and shades. Use triadic or tetradic when you need several distinct, vibrant colors — for example, a data visualization or an illustration palette.
Limitations
A pleasing color harmony is not the same as sufficient contrast for accessibility. Colors that look great side by side on a color wheel can still fail WCAG contrast requirements when used as text and background. Before finalizing a design, check any color pairs you plan to use for text with a dedicated contrast checker.