How does hue rotation work?

The color is converted from RGB to HSL, the hue (an angle from 0 to 360 degrees) has the offset added to it, the result is wrapped back into the 0–360 range, and the color is converted back to RGB. Saturation and lightness are left unchanged.

What does a 180-degree rotation produce?

Rotating the hue by 180 degrees gives the complementary color — the one directly opposite on the color wheel. Pairs like red and cyan, or blue and orange, are complementary.

Why is the result for a grey or black color unchanged?

Greys, white, and black have zero saturation, so they have no meaningful hue to rotate. Shifting the hue of an achromatic color leaves it looking identical.

Does the CSS hue-rotate filter use the same math?

The CSS filter hue-rotate() uses a luminance-preserving color matrix that differs slightly from a pure HSL hue shift, so results can vary. This tool performs the clean HSL rotation, which is what most palette and design work expects.

Is my color sent anywhere?

No. The conversion and rotation run entirely in your browser. Nothing is uploaded.

Hue Rotation Calculator

The hue rotation calculator shifts a color around the color wheel by a chosen number of degrees while keeping its saturation and lightness intact. It is the fastest way to find complementary colors, build analogous palettes, or explore variations of a brand color.

How it works

Hue is the angular dimension of the HSL color model, measured from 0 to 360 degrees: 0 is red, 120 is green, 240 is blue. To rotate a color the tool:

Converts the input RGB color to HSL.
Adds the degree offset to the hue and wraps it back into range with ((hue + offset) mod 360 + 360) mod 360, so both positive and negative offsets work.
Converts the new HSL value back to RGB and hex.

Saturation and lightness are never touched, so only the color family changes — the vividness and brightness stay the same.

Notes and example

A rotation of 180 yields the complementary color. For example #3498db (a blue) rotated by 180 lands near #db8434, an orange.
Rotations of ±120 produce the two triadic partners.
Achromatic colors (greys, black, white) have no saturation, so rotating their hue has no visible effect.

This is a pure HSL hue shift; the CSS hue-rotate() filter uses a slightly different luminance-preserving matrix. All math runs locally in your browser.