Interpolate two colors in HSL

Supply two hexadecimal colors and a fraction from zero through one, and this capability returns the point between them as normalized hex, RGB, and HSL values. Hue travels around the shorter side of the color wheel, including a fixed rule for exact half-turn ties, so the same request always produces the same result. Strict validation makes it suitable for design tools, token pipelines, animation keyframes, and repeatable tests.

How shortest-path HSL interpolation works

Each input begins as a three- or six-digit hexadecimal color, with or without a leading hash. The solver expands shorthand, normalizes letter case, converts the integer sRGB channels to HSL, and then treats hue as an angle rather than an ordinary linear number. That distinction matters near the boundary of the color wheel. A blend from 350 degrees to 10 degrees should travel twenty degrees through red, not sweep the long way through most other hues. The signed difference is therefore normalized into the half-open interval from minus 180 degrees through, but not including, plus 180 degrees. An exact 180-degree tie always takes the negative direction, making an otherwise ambiguous choice deterministic. Saturation and lightness are interpolated directly with the same fraction. The resulting HSL color is converted back to rounded integer RGB channels and a lowercase six-digit hex string. Reported HSL components and the signed hue delta are rounded to six decimal places to keep JSON stable while preserving useful precision. No network, random value, clock, or mutable state participates in the calculation.

Choose the fraction and interpret the response

Set t to zero to receive the starting color, one to receive the ending color, or a decimal between them for an intermediate point. A value of 0.25 moves one quarter of the way along every interpolated HSL component, while 0.5 selects the midpoint. The response echoes both normalized endpoint colors and the exact fraction, then provides hex, an rgb object with integer r, g, and b channels, and an hsl object whose h is in degrees and whose s and l are percentages. The hue_delta field exposes the complete signed angular journey selected before scaling by t. Its companion hue_path is increasing, decreasing, or none, which is useful when debugging gradients that cross zero degrees or when reproducing the path in another renderer. Grayscale endpoints have the conventional computed hue of zero because an achromatic RGB color has no visually defined hue. Interpolation remains deterministic in that case, but remember that introducing saturation between gray and a chromatic endpoint can reveal the conventional hue used for the gray endpoint. Send numeric JSON for t rather than a quoted number.

Use it safely in design and production workflows

This operation fits anywhere a system needs one reproducible color between two known stops. A theme builder can generate hover, pressed, or transitional tokens without bundling a color library. A chart service can request evenly spaced samples by calling the capability with fractions such as 0, 0.25, 0.5, 0.75, and 1. An animation pipeline can calculate keyframes whose hue does not unexpectedly traverse the long arc across green or blue. It is also practical for regression fixtures because normalized input and bounded rounding make output straightforward to compare. The endpoint deliberately accepts only hexadecimal RGB colors; alpha channels, CSS color names, rgb() strings, HSL strings, and wide-gamut color spaces are outside this focused contract. Invalid color lengths, non-hexadecimal characters, missing fields, non-finite fractions, and fractions outside zero through one fail validation. Successful API execution costs $0.002 per item, while the browser implementation uses the same pure solver. HSL interpolation is a mathematical convenience rather than a perceptually uniform blend, so choose a LAB-oriented tool when equal-looking visual steps matter more than familiar CSS-style hue behavior.