Generate an analogous color palette from any hex color

Create a predictable analogous color palette from one hexadecimal color and the exact number of swatches you need. The generator converts the base color to HSL, distributes the requested colors evenly across a sixty-degree hue window centered on the original hue, and converts every result back to normalized hexadecimal notation. A one-color request returns the base hue itself, while larger palettes include both thirty-degree boundaries.

Choose the base color and palette size

Begin with a CSS hexadecimal color written with three or six digits, optionally preceded by a hash. Short notation is expanded before any conversion, so #36c and #3366cc describe the same starting color and produce the same normalized output. Then choose count, which controls the exact number of swatches returned.

Count must be an integer of at least one; zero and negative values are rejected because they cannot describe a palette. When count is one, the generator returns the base hue without shifting it. When count is two, it returns the two boundary hues at minus thirty and plus thirty degrees.

With three colors, the base sits between those boundaries. Larger counts add equal intervals throughout the same window rather than widening the harmony. This distinction is useful when a component library needs five tokens while a small illustration needs only three: both sets preserve the same analogous range and visual intent.

Saturation and lightness remain equal to those of the base color, which isolates hue as the only changing dimension. The output echoes the normalized base color and requested count, then provides every swatch with its zero-based index, signed hue offset, wrapped hue angle, and lowercase six-digit hex value. Use the index for stable token names and the offset when documenting how each generated color relates to the original source color.

Understand even spacing around the hue wheel

Analogous colors occupy neighboring positions on a circular hue wheel. This capability uses a fixed window from thirty degrees below the base hue to thirty degrees above it, giving a total span of sixty degrees. For any count greater than one, spacing is calculated by dividing that span by count minus one.

Five requested colors therefore use offsets of minus thirty, minus fifteen, zero, plus fifteen, and plus thirty degrees. Four colors use minus thirty, minus ten, plus ten, and plus thirty degrees. Because hue is circular, an offset that crosses zero wraps around toward three hundred sixty instead of becoming an invalid negative angle.

A red base can therefore produce neighbors on both the magenta and orange sides while remaining a compact family. The algorithm first parses RGB channels from the supplied hex value, converts those channels to HSL, applies each offset, and converts the shifted HSL value back to integer RGB and hex. Neutral colors are a special but valid case: gray has zero saturation, so changing its mathematical hue cannot alter the visible RGB result.

The response may consequently contain repeated gray hex values at different hue offsets. That is accurate color mathematics, not an error, because a hue becomes visually meaningful only when saturation is above zero.

Apply the palette in production workflows

Use the generated array wherever a repeatable family of related colors is more important than dramatic contrast. A design-system build can map indices to custom properties such as accent-1 through accent-5 and regenerate them whenever the primary brand color changes. A chart builder can request the number of series present in a report, then assign swatches in array order so closely related categories appear cohesive.

Illustration tooling can turn one art-directed seed into a controlled set for highlights, fills, and shadows, although lightness adjustments should be performed separately when tonal depth is required. The result is also convenient for snapshot tests because it contains no random seed, timestamp, network response, or model-generated variation. Store the base color and count as the source of truth instead of copying disconnected swatches into several repositories.

Before using any generated color for text, icons, or controls, run a contrast check against its actual background; analogous harmony does not guarantee WCAG contrast, and preserving the base lightness can make neighboring swatches equally unsuitable for small text. Validate count in user interfaces before submitting it, and surface the returned validation message when it is below one or not an integer. This keeps configuration mistakes distinct from downstream rendering problems and makes automated theme pipelines easier to diagnose.