Gerador de QR Code

Color harmony comes from the color wheel

Pleasing color schemes aren't guesswork — they follow geometric relationships on the color wheel. The wheel arranges hues in a circle from 0° to 360°, and a "harmony" is simply a set of hues at fixed angles apart. This generator takes one base color, finds its position on the wheel, and rotates around it by those defined angles to build a five-color palette. Because the rules are mathematical, the results are reliably balanced rather than random.

Why the tool works in HSL, not HEX

You enter a color as HEX (or with the picker), but rotating a hue is awkward in HEX because red, green, and blue are tangled together. So the tool first converts your color to HSL — Hue (the angle, 0–360°), Saturation (how vivid, 0–100%), and Lightness (how bright, 0–100%). Hue is now a single number you can add to. To make the complement of a color, it adds 180 to the hue and converts back to HEX. Saturation and lightness are tweaked separately to produce supporting tints and shades, with lightness clamped to the 5–95% range so colors never collapse to pure black or white.

The six schemes and their angles

For most schemes the base color stays as swatch one and the rest are derived; for analogous, the base sits in the middle with neighbors on either side. Monochromatic ignores hue rotation entirely and instead steps lightness across 20%, 40%, 60%, 75%, and 90% to give five shades of the same color.

A worked example

Start with the default emerald #059669. Converted to HSL that's roughly H 160°, S 94%, L 30%. Choosing the complementary scheme adds 180° to the hue: 160 + 180 = 340°, which is a deep rose. The tool then builds three more supporting colors — a darker version of the base (lightness multiplied by 0.7), a darker complement, and a desaturated tint — so you get a usable five-color set rather than just two clashing extremes. Switch to triadic and instead of 340° you'd get hues at 280° (violet) and 40° (amber), the three points of an equilateral triangle on the wheel.

Reading and using the output

Each swatch displays its HEX code, and the tool automatically picks black or white label text depending on the swatch's lightness so the code stays legible on dark colors. Click any swatch to copy its HEX to the clipboard. Two export buttons hand you the whole palette at once: Copy as JSON gives an array like ["#059669","#dc2667",…] for design tools or scripts, and Copy as CSS vars produces a ready-to-paste block of custom properties (--color-1 through --color-5).

Practical tips

• Pick a dominant plus accents. In a triadic or tetradic scheme, let one color carry most of the design and use the others sparingly for emphasis; equal amounts of three vivid hues fight each other.
• Use complementary for calls to action. A button in the complement of your page's main color draws the eye precisely because the hues are maximally opposed.
• Reach for analogous when you want calm. Adjacent hues read as serene and natural — good for backgrounds and long-form reading.
• Build neutrals with monochromatic. Five lightness steps of one brand hue give you a coherent set of surfaces, borders, and text shades.

Common mistakes

• Ignoring contrast for text. Harmony is about hue relationships, not legibility. Always check that text-on-background pairs meet WCAG contrast ratios separately.
• Using all five colors at full strength. Reserve your most saturated swatches for small areas; large fields of vivid color tire the eye.
• Entering a short or malformed HEX. The tool expects a full six-digit HEX (with or without the leading #); three-digit shorthand won't trigger a regenerate.
• Treating the palette as final. These are mathematically derived starting points — nudge lightness and saturation to taste once the hues feel right.

Everything runs locally

The HSL conversion, hue rotation, and HEX output are computed in your browser with plain JavaScript. No color or palette is sent to a server, and copying uses your device's clipboard. The generator works offline once the page has loaded.