color_lens Color Palette Generator star

How It Works

Color theory defines harmony rules as fixed angular relationships between hues on a color wheel. This tool computes them in the HSL model (Hue, Saturation, Lightness) rather than RGB, because Hue is a natural 0–360° value on a circle — adding an angle to find a related color is direct arithmetic. In RGB, colors are just three intensity channels with no inherent notion of "angle," so the same harmony math would require converting to HSL internally anyway; this tool simply works in the space where the math is native.

From your base color's Hue, it derives: complementary (the single hue directly opposite, base + 180°, for maximum contrast), triadic (three hues spaced evenly around the wheel at 120° intervals, vivid yet balanced), analogous (neighboring hues at ±30°, which read as calm and cohesive because they sit close together), split-complementary (the two hues flanking the complement, at ±150°, giving contrast with less tension than a pure complementary pair), and a monochromatic scale that holds Hue and Saturation fixed while stepping Lightness up and down. For example, a base hue of 200° (a blue) yields a complementary hue of 20° (an orange) and triadic hues at 320° and 80°.

What You Should Know

• A practical 60-30-10 recipe: use the base color for roughly 60% of the design, an analogous tone for 30%, and the complementary as a 10% accent — buttons, links, highlights.
• Harmony is not accessibility. Two hues being mathematically related on the wheel says nothing about their lightness contrast; verify text-over-color combinations against WCAG separately.
• Click any swatch to copy its hex code straight to your clipboard.
• Saturation and Lightness still matter enormously. Two palettes can share the exact same set of hues yet look completely different in mood — a low-saturation, high-lightness version reads as soft and pastel, while the same hues at full saturation and low lightness read as bold and dramatic.
• Cultural associations don't follow the wheel. A hue's mathematically "correct" harmony partner says nothing about what that color signals in a given region or industry — red can read as alarm in one context and celebration in another, independent of any harmony rule.

A quick worked example: pick #3B82F6 (a mid-blue, roughly hue 217°) as your base. The complement lands near hue 37°, a warm orange — a natural pair for a primary button against a blue-dominated interface. The triadic set adds hues near 97° (a yellow-green) and 337° (a magenta-pink), useful when a design needs three distinct but balanced accent colors, such as category tags or a chart's data series.