How is the palette derived from one hue?

The seed hue sets the primary color in HSL. Secondary and accent hues are rotated from it by the chosen harmony angle (180 degrees for complementary, plus or minus 30 for analogous, plus or minus 120 for triadic). The neutral ramp shares the primary hue at very low saturation, and semantic colors use fixed conventional hues.

Why are semantic colors fixed rather than random?

Success, warning, error and info colors carry meaning users learn across the web — green, amber, red and blue. Randomising them would break that expectation, so the generator anchors them to conventional hues and only nudges lightness to fit your system.

What is the neutral ramp for?

Neutrals are the greys used for text, borders, surfaces and backgrounds. The ramp gives you several steps from near-white to near-black, tinted slightly toward the primary hue so the greys feel part of the brand rather than flat.

What formats can I export?

Two: CSS custom properties (a block of --color-* variables you paste into :root) and a JSON object keyed by token name. Both list the same hex values, so you can wire them into a stylesheet or a design-token build step.

Does anything leave my browser?

No. The whole system is computed locally with HSL math and rendered as hex. There are no network calls, so it works offline and nothing you generate is uploaded.

Full Color System Generator

A whole system from a single hue

A color system is more than one brand color — it’s a coordinated set of roles: primary, secondary, accent, a neutral ramp, and semantic colors for success, warning, error and info. The Full Color System Generator derives all of them from one seed hue so the result feels intentional, then exports the tokens as CSS variables or JSON ready for a design-token pipeline.

How it works

Everything is computed in HSL. The seed hue becomes the primary color. The secondary and accent hues are rotated from the primary by the harmony angle you pick: complementary rotates by 180 degrees, analogous by roughly 30 degrees, and triadic by 120 degrees. Each role also gets light and dark variants by adjusting lightness while holding hue and saturation.

The neutral ramp reuses the primary hue at a very low saturation (around 8 percent) and steps lightness from near-white to near-black, so the greys carry a subtle brand tint. The semantic tokens — success, warning, error, info — are anchored to conventional hues (green, amber, red, blue) because their meaning is learned, with only lightness tuned to match the system. Every HSL value is converted to a hex string for output.

Tips and example

Start with complementary harmony for high contrast between primary and accent; choose analogous for a calmer, more unified feel.
Use the neutral ramp for text and surfaces and reserve the brand hues for interactive and emphasis elements.
Keep the semantic colors close to their conventions — users rely on red meaning error and green meaning success.
Paste the CSS block into :root and reference tokens like var(--color-primary); or feed the JSON into Style Dictionary or a similar build step.