Choosing harmonious colors is essential for good design. Color theory provides mathematical relationships between colors that are naturally pleasing to the eye. This tool generates color palettes based on proven color harmony rules (complementary, analogous, triadic, split-complementary, and tetradic) from any starting color. Each palette includes HEX, RGB, and HSL values ready to use in your designs.
Colors opposite on the color wheel
Colors adjacent on the color wheel
Three colors equally spaced (120 degrees apart)
Base color plus two colors adjacent to its complement
Four colors forming a rectangle on the color wheel
Same hue with varying lightness
/* Complementary */ #6366f1 #f1ee63 /* Analogous */ #63adf1 #6389f1 #6366f1 #8463f1 #a763f1 /* Triadic */ #6366f1 #f16366 #66f163 /* Split-Complementary */ #6366f1 #f1a763 #adf163 /* Tetradic (Rectangle) */ #6366f1 #f163ad #f1ee63 #63f1a7 /* Shades & Tints */ #05073d #0b0d75 #1013b2 #1519ea #5255ef #8a8cf5 #c7c8fa
Select a base color using the color picker or enter a HEX code. Choose a harmony rule (complementary, analogous, triadic, split-complementary, tetradic, or monochromatic) to generate a harmonious palette. Each color in the palette shows its HEX, RGB, and HSL values with one-click copy. Export the palette as a plain text listing of all color values.
Color palette generation is essential for brand identity design, creating consistent color systems for web applications, designing accessible color schemes with sufficient contrast, selecting colors for data visualization charts and graphs, creating themed UI component libraries, generating dark and light mode color schemes, and producing seasonal or campaign-specific color palettes for marketing materials.
Color harmony algorithms work in the HSL (Hue, Saturation, Lightness) color space. Complementary colors differ by 180° in hue, analogous by ±30°, triadic by ±120°, and split-complementary by ±150°. The generator adjusts saturation and lightness to create tints (adding white), shades (adding black), and tones (adding gray). Colors are converted between HEX, RGB, and HSL using standard mathematical formulas. The monochromatic scheme varies only saturation and lightness while keeping the hue constant.
Complementary colors are opposite each other on the color wheel (180° apart). They create high contrast and visual tension. Example: blue (#0000FF) and orange (#FF8800). Best used with one dominant color and the complement as an accent.
Analogous colors are adjacent on the color wheel (within 30° of each other). They create harmonious, low-contrast palettes that feel natural and cohesive. Example: blue, blue-green, and green.
Triadic colors are evenly spaced around the color wheel (120° apart). They provide strong visual contrast while maintaining balance. Example: red, blue, and yellow.
Start with your brand color, generate a complementary or triadic palette, then add neutral tones (white, gray, dark gray). Use the 60-30-10 rule: 60% dominant color (background), 30% secondary color, 10% accent color.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools