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 without opening a design tool.
How it works
Hue is the angular dimension of the HSL color model, measured from 0 to 360 degrees: 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta. To rotate a color the tool:
- Converts the input hex/RGB color to HSL, extracting the hue angle.
- Adds the degree offset to the hue and wraps it back into the 0–360 range with
((hue + offset) % 360 + 360) % 360, so both positive and negative offsets work correctly. - 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.
Palette relationships by rotation angle
The rotation angle has a direct meaning in color theory:
| Rotation | Relationship | Design use |
|---|---|---|
| 0° | Same color | — |
| ±30° | Analogous | Harmonious, low-contrast palettes |
| ±60° | Analogous (wider) | Warm/cool adjacent tones |
| ±120° | Triadic | High-energy, three-color palettes |
| ±150° | Split-complementary | High contrast with less tension than complementary |
| 180° | Complementary | Maximum contrast; accent colors |
Worked example
Starting color: #3498db — a medium blue (HSL approximately 204°, 70%, 53%).
| Rotation | Resulting hex | Description |
|---|---|---|
| +30° | near #34b4db | Cyan-blue (analogous) |
| +120° | near #db9834 | Warm amber (triadic partner) |
| +180° | near #db8434 | Orange (complementary) |
| -120° | near #9834db | Violet (triadic partner) |
These are illustrative values — the exact hex depends on the precise input. Use the calculator with your actual brand color to get precise outputs.
Notes and tips
- A rotation of
180yields the complementary color: the one directly opposite on the color wheel, providing maximum contrast. - Rotations of
±120produce the two triadic partners — all three together form an equilateral triangle on the wheel. - Achromatic colors (greys, pure black, pure white) have zero saturation, so rotating their hue has no visible effect; the output looks the same as the input.
- This tool performs a pure HSL hue shift. The CSS
hue-rotate()filter uses a luminance-preserving color matrix that differs slightly from a clean HSL rotation, so results can vary slightly from what the filter produces. - All math runs locally in your browser; nothing is uploaded.