Color Harmony & Shift Generator

What it is for

You have one color you care about, such as a brand teal, a terracotta from a photo or a sprite's main hue, and you need a family around it: lighter tints, neighbouring hues or a complementary accent. This tool converts the base color to HSL, spreads hue, saturation and lightness changes across the palette and returns exact HEX values plus ready-made files.

It works with opaque eight-bit sRGB only. HSL steps are numerical, so two steps of the same size can look quite different to the eye. Treat the output as a starting point that you judge visually, and check text pairings separately.

Worked example

A warm web palette: Base HEX color #E07A5F, Color count 5, HSL harmony Complementary, Hue travel 20 degrees, Saturation travel −10 and Lightness travel 25 percentage points, Shift easing Ease out, and Locked positions 5=#F4F1DE to keep a cream paper color at the end.

The tool returns:

Complementary alternates between the base hue and the hue 180 degrees away, so positions 2 and 4 are cool blues while 3 drifts back to a warm sand. Ease out applies most of the change early, which is why position 2 is already much lighter than the base. Position 5 is exactly the locked cream.

With the same base, Monochromatic, 5 colors, Lightness travel 60, Saturation travel 0 and Linear easing, you get #E07A5F, #ECAF9F, #F9E5DF, #FFFFFF, #FFFFFF. Lightness clamps at 100%, so the last two colors become identical whites.

How to read the result

• Generated palette lists each position and its HEX value. Position 1 is always the base color unless you lock it to something else.
• The five downloads contain the same colors in the same order: a HEX list (palette.txt), GIMP GPL, JASC-PAL, CSS variables (--palette-1 and so on) and SVG swatches, one 100-pixel stripe per color.
• In the API and MCP result, colors is the array of HEX strings and exports holds the five file texts.

Duplicates and order are kept on purpose: a pixel-art palette may need the same color in two slots.

Tips and common mistakes

• Hue travel is ignored for Monochromatic. Use Saturation and Lightness travel there, or switch to Analogous for a hue drift.
• Large lightness travel from an already light base saturates to #FFFFFF. If the end of a ramp repeats, reduce Lightness travel or start darker.
• Locks are one-based and must be unique: 1=#164E63; 3=#FFFFFF. A position larger than the color count, 0= or a repeated position is rejected.
• Travel is spread from the first to the last swatch, so changing the count also changes every intermediate color.
• GPL and JASC-PAL files open in Flipline's Pixel Studio and Retro Lab; the CSS file drops straight into a stylesheet.
• To refine the colors by hand, clone groups or extract colors from a photo, use Palette Studio in Lumina; it runs the same engine.

FAQ

Why do two steps look so different?

HSL is not perceptually uniform. A 10-point lightness step in yellow looks smaller than the same step in blue. Judge the palette by eye and adjust the travel values.

Can I keep a color I already use?

Yes. Add it under Locked positions, for example 1=#164E63. A locked position keeps that exact HEX value and the other positions are generated as usual.

Does the tool check contrast?

No. Paste the result into the Palette Contrast Matrix to see every text and background pairing with WCAG ratios.

What does Shift easing change?

It controls how the travel is distributed across positions. Linear uses equal steps, Ease in starts slowly, Ease out changes quickly at first and Smooth eases both ends.