Color Harmony Generator (complementary / triadic / tetradic …)

Brand colors carry unreleased intent

Color-harmony tools get used at the point when a brand color is still being decided: design-system foundation work, logo color selection, palette exploration for an unannounced product. The HEX you enter may be the primary color of a product not yet launched, a rebranding direction competitors shouldn’t know about, or a campaign theme still under wraps.

A single HEX value carries no personal data, but a brand’s color palette is part of its strategy. When an external service logs ‘user searched for complementary of #3B82F6,’ those logs accumulate a picture of a design direction. In industries where color is treated as intellectual property, even color-search logs can be sensitive.

Where online color-tool requests end up

Most online palette generators send the color value to a server — as a URL parameter, a request body, or a WebSocket message. The server’s access logs record which colors were queried, in which combination, at what time. Free services routinely use this data for ad targeting, usage analytics, or service improvement.

Even ‘anonymized for quality improvement’ clauses in terms of service can capture enough detail to reveal design direction, especially when multiple designers from the same organization repeatedly query the same brand color across sessions.

Pure HSL arithmetic running entirely in the browser

This tool converts the input HEX to HSL (Hue, Saturation, Lightness) and generates all seven schemes by rotating the hue angle on the 0–360° wheel. Complementary is h + 180°. Triadic splits at h + 120° and h + 240°. Analogous adds h ± 30°. All arithmetic — HSL back to RGB back to HEX — happens in JavaScript with no external dependency.

There is nothing to transmit and nowhere to transmit it to. The input color stays in browser memory from the moment you type it until you close the tab. Open DevTools Network and run through all seven schemes — zero requests appear. The implementation is public on GitHub.

Before you lock in the palette

Once you have a palette you like, verify it in context before committing. Check accessibility with the color-blindness-sim tool (does each color remain distinguishable for protanopia, deuteranopia, tritanopia?), check contrast ratios against WCAG AA / AAA with the color-contrast-checker, and preview both light and dark backgrounds. HSL-wheel harmony is a strong starting point; perceptual checks are how you confirm it works for real users.

HSL color wheel vs perceptual uniformity in sRGB / OKLCH

HSL was introduced by Joblove & Greenberg in 1978, expressing color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). The geometric convenience is what makes it useful for harmony generation — complementary is +180°, triadic is ±120°, tetradic mixes 60° and 120° rotations, and so on. HSL is derived directly from sRGB and is natively supported in CSS as hsl(210deg 50% 60%).

The catch is that the HSL color wheel is not perceptually uniform. A 120° hue difference from red to green looks brighter on the green side; with L=50% fixed, yellow (H=60°) appears much lighter than blue (H=240°). sRGB is gamma-corrected for displays, not calibrated for human perception. For professional palette work, OKLCH (Björn Ottosson, 2020) provides perceptually uniform spacing and is standardised in CSS Color Module Level 4. Palettes from this tool can be transferred into OKLCH using color-converter for finer perceptual tuning before locking them into a design system.

Industry palette conventions and combinations to avoid

Common patterns by industry: B2B SaaS gravitates toward blue (Tailwind’s #2563EB / #3B82F6 and similar) with complementary orange as the accent — Stripe, Linear, and Slack are textbook examples. Fintech and banking lean on deep navy (around #1E3A8A) with gold accents in a split-complementary arrangement, signalling trust and tradition. Food and beauty brands often use analogous palettes (H=20° to H=60°, warm tones) to evoke appetite and skin warmth.

Combinations to avoid: (a) analogous hues so close they fail to distinguish primary from secondary, (b) complementary pairs at 50/50 area share, which creates color vibration that hurts to look at, (c) over-reliance on fully saturated S=100% swatches that produce visually fatiguing UIs. The practical workflow is to pick two or three colors from the generator’s seven schemes and expand each into a design-system scale using tints (mixed with white) and shades (mixed with black). Material Design and Tailwind both ship 11-step scales (e.g. blue-50 through blue-950) built on exactly this pattern. Feeding the two or three chosen swatches into color-blend interpolates an N-step gradient between any pair, which is a quick way to draft those tint/shade ramps from a single starting palette.