Hue Rotation Wheel
The hue rotation wheel is the color space within which the CSS hue-rotate filter operates. Every color is assigned a position on a circle running from red at 0°, through yellow at roughly 60°, green at 120°, cyan at 180°, blue at 240°, magenta at 300°, and back to red at 360°. The hue-rotate filter shifts every color in the source image by the specified number of degrees. Values are signed: positive rotates one direction around the wheel, negative rotates the other. Values beyond 360° or below -360° wrap. For filter recipes that begin with invert and sepia — which produce brown tones at specific wheel positions — the hue-rotate parameter controls the final warmth of the rendered illustration.
In the AI Story
The wheel is a simplification. Actual color perception is three-dimensional (hue, saturation, lightness), and the hue-rotate filter preserves saturation and lightness while shifting hue. For a monochrome stipple source, this preservation is trivial — there is only one non-transparent color to rotate — but for any source with tonal complexity, the rotation can produce unexpected results as near-gray pixels rotate through saturated colors.
In the wiki's recipes, hue-rotate appears after sepia in the filter chain. This ordering is deliberate: sepia produces a specific warm brown; hue-rotate then moves that brown along the wheel to match the target palette. Negative values like hue-50 rotate counterclockwise, pulling the brown toward a slightly more orange tone. Positive values would push it toward green or olive. The narrow range of values that produces pleasing results — roughly hue-30 through hue-60 — reflects the narrowness of acceptable warm tones against the wiki's parchment background.
Extreme rotations produce artifacts. hue180 inverts warmth to coolness — browns become blues — which is occasionally useful but usually destructive. hue355, almost a full rotation, returns colors near their starting point but with subtle shifts that can be difficult to diagnose. Values near 90° and 270° tend to produce unnatural tints that rarely suit editorial illustration.
The wheel interacts with saturate in ways that matter for recipes. Low saturation values make hue rotation nearly invisible (there is little color to rotate); high saturation values make hue rotation dramatic. The sequence invert → sepia → saturate → hue-rotate is designed to produce a specific warmth level before rotating, so the final hue shift operates on a known chromatic target rather than on an unpredictable source.
Origin
The hue wheel concept predates CSS by centuries — it appears in Newton's color theory and in nineteenth-century color systems — but its specific CSS implementation uses a simplified model that may not match perceptual color wheels exactly. Developers who treat the filter as producing perceptually uniform rotations will sometimes be surprised; those who treat it as producing specific mathematical rotations of RGB vectors will be less so.
Key Ideas
360° circle. Every color has a position; rotation shifts all colors by the same amount.
Signed values. Negative rotates counterclockwise, positive rotates clockwise; values beyond the circle wrap.
Order-dependent. hue-rotate applied before sepia rotates the source; applied after, rotates the sepia tone. The recipe's behavior depends on the order.
Mathematical, not perceptual. The CSS implementation rotates in a specific color space; perceptually uniform rotation requires different math.
Appears in the Orange Pill Cycle
Further reading
- W3C, Filter Effects Module Level 1, § 11.10 (hue-rotate definition).
- Johannes Itten, The Art of Color (Wiley, 1973).
- Maureen Stone, A Field Guide to Digital Color (A K Peters, 2003).
- MDN Web Docs, hue-rotate() — CSS function, accessed 2026.