Color Palette Generator
Generate beautiful color palettes from any base color using color theory.
How It Works
Color harmony is the principle that certain combinations of colors are pleasing when used together. The rules are grounded in the color wheel — a circular diagram of colors arranged by their chromatic relationships.
All harmonies are calculated in HSL (Hue, Saturation, Lightness) color space. Hue (0–360°) encodes position on the wheel. Complementary pairs a color with its direct opposite (180°) for high contrast. Analogous groups neighboring colors (±30–60°) for a natural, cohesive feel. Triadic uses three hues spaced 120° apart for vibrant balance. Split-complementary softens the complementary pairing by using the two colors flanking the opposite hue. Tetradic (square) picks four evenly spaced hues (90° intervals) for rich variety. Monochromatic stays on one hue, varying only lightness for a minimal, unified look.
The 60-30-10 rule is a practical guideline: use your dominant color for 60% of a design, a secondary color for 30%, and an accent for the remaining 10%. This creates visual balance while directing attention through contrast.
All generation is done client-side — nothing leaves your browser. Share your palette via the URL, which encodes your base color and harmony mode.
Related Tools
Frequently Asked Questions
What are complementary colors?
Colors directly opposite each other on the color wheel (180° apart in hue). Complementary pairs have maximum contrast — blue and orange, red and green, yellow and purple. They create vibrant, eye-catching designs but can feel harsh if both are used at full saturation in equal amounts.
What is an analogous color palette?
Colors adjacent on the color wheel (typically within 30–60° of each other). Analogous palettes feel harmonious and natural — like colors seen in nature (sunset oranges and reds, ocean blues and greens). They're low-contrast and work well for calm, cohesive designs.
What is a triadic color palette?
Three colors evenly spaced 120° apart on the color wheel. Triadic palettes are vibrant and balanced — primary colors (red, yellow, blue) and secondary colors (orange, green, purple) are each triadic sets. Use one color as dominant and the others as accents.
How do I apply the 60-30-10 rule?
60% of your design uses the dominant color (typically a neutral or muted tone), 30% uses the secondary color, and 10% uses the accent color. This creates visual hierarchy — the eye moves from the largest area to the accent. It applies to UI design, interior design, and graphic design.