Color Palette Gen

When to use Color Palette Gen

• Starting a new design system: Generate a full palette from your brand primary colour before writing a single token. Having all harmony variants ready prevents ad-hoc colour decisions later.
• Checking colour variety in a UI: Paste your current primary hex and confirm your UI colours are genuinely harmonious rather than visually conflicting.
• Rapid prototyping and mood exploration: Cycle through complementary, triadic, and analogous outputs from the same base to feel how the overall mood of a design shifts.
• Generating accessible tint and shade scales: Use the lightness scale output as a starting point for contrast-checking individual swatches against white and black backgrounds.

How colour harmony rules drive the generated palettes

The Color Palette Generator applies classical colour theory rules - complementary, analogous, triadic, split-complementary, and tetradic - to a single base colour you provide. It converts your input (hex, RGB, or HSL) into the HSL colour space, because hue, saturation, and lightness are the natural axes for rotating around the colour wheel. From there it calculates each harmony by shifting the hue value by the angle that defines each scheme: 180 degrees for complementary, 30 degrees either side for analogous, 120 degrees apart for triadic.

Once the hue relationships are established, the tool generates a full swatch set for each colour - typically five tints and shades per hue - by holding hue constant and stepping lightness from roughly 95 percent (near-white) down to 10 percent (near-black). This mirrors the approach used in design systems such as Tailwind CSS and Radix UI Colours, which give designers a predictable numerical scale (100 through 900) to reference in components.

The output is copy-ready in hex, RGB, HSL, and CSS custom property format. If you are building a design system, the CSS variable output maps directly into a :root block. The tool deliberately avoids opinionated naming - you decide whether swatch 400 becomes your brand primary or your interactive state colour.