Which harmony types are generated?

Complementary (hue +180°), analogous (±30°), triadic (±120°), and split-complementary (±150°) from the seed’s HSL hue, keeping saturation and lightness fixed.

Can I export CSS variables?

Yes. Copy the generated `:root` custom properties block, or tap any swatch to copy its HEX.

Does this replace a brand style guide?

No. Hue-wheel harmonies are exploration starters. Brand systems still need named roles, contrast checks, dark/light variants, and stakeholder review.

Why do gray seeds produce identical swatches?

With saturation near zero, rotating hue does not change the color. Pure black, white, and neutral grays collapse every harmony to the same HEX.

Utill.net

Color Palette Generator

Harmonies & Themes

Generate complementary, analogous, triadic, and split-complementary color palettes from one HEX. Copy swatches or CSS variables—free, no signup, browser-only.

This conversion runs only in your browser — nothing is uploaded.

Color

Hex

Base color#3b82f6
Complementary#f6af3b

Opaque colors only (HEX / RGB / HSL). No alpha channel — paste #rgb shorthand or full #rrggbb.

Base color

#3b82f6

Complementary

#f6af3b

Analogous

#3bdff6

#523bf6

Triadic

#f63b82

#82f63b

Split-complementary

#f6523b

#dff63b

CSS variables

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

What is this tool?

This color palette generator takes one seed HEX (#rgb or #rrggbb) and builds classic hue-wheel harmonies: complementary, analogous, triadic, and split-complementary. Conversion uses HSL—rotate hue, keep saturation and lightness—then returns HEX swatches plus a copyable CSS variables block.

It is for exploration and handoff drafts, not accessibility certification and not a substitute for brand guidelines. Always check text contrast and semantic roles before shipping.

Common use cases

Sketch a first accent set from a product primary HEX for mockups
Export --color-* CSS custom properties for a prototype stylesheet
Compare complementary vs split-complementary options before design review

How to use

Pick a seed with the color input or type #rgb / #rrggbb HEX.
Review labeled groups: Base, Complementary, Analogous, Triadic, Split-complementary.
Tap a swatch (or Copy HEX) for one color, or copy the CSS variables block.
Validate contrast and brand fit outside this tool before production use.

Examples

Input / setting	Output	Notes
`#3b82f6`	complementary `#f6af3b`; analogous `#3bdff6`, `#523bf6`	Default blue seed (Sample).
`#ff0000`	complementary `#00ffff`; triadic `#00ff00`, `#0000ff`	Pure red → cyan complement; classic RGB triad.
`#808080`	all harmonies `#808080`	Zero saturation — hue rotation has no visible effect (edge).

Practical pitfalls

Generated harmonies are not a brand style guide: names, usage rules, and approved pairs still need human review.
HSL hue steps are not perceptually uniform (unlike OKLCH); two “equal” rotations can look uneven in lightness.
Neutral seeds (black / white / gray) collapse every group to the same HEX because saturation is ~0.

References

Last reviewed: 2026-07-27

Frequently asked questions

Which harmony types are generated?: Complementary (hue +180°), analogous (±30°), triadic (±120°), and split-complementary (±150°) from the seed’s HSL hue, keeping saturation and lightness fixed.
Can I export CSS variables?: Yes. Copy the generated `:root` custom properties block, or tap any swatch to copy its HEX.
Does this replace a brand style guide?: No. Hue-wheel harmonies are exploration starters. Brand systems still need named roles, contrast checks, dark/light variants, and stakeholder review.
Why do gray seeds produce identical swatches?: With saturation near zero, rotating hue does not change the color. Pure black, white, and neutral grays collapse every harmony to the same HEX.