Hue rotation (hue shift)

Turning every color the same number of degrees around the color wheel, so the relationships survive and only the mood changes.

hue shiftspin the colorssame palette but shifted toward orangerotate the color wheelhue rotatonhue-rotate filterchange every color at oncethe hue slider in Photoshop

See it

Live demo coming soon

What it is

Hue rotation moves every color in a design the same number of degrees around the color wheel while leaving lightness and chroma alone. A blue-and-orange scheme rotated 120 degrees becomes red-and-green: the angular relationships (complementary, analogous) survive intact and only the mood changes. Contrast is a looser promise. Even with OKLCH lightness and chroma held fixed, the measured WCAG ratio between two swatches moves as the hue moves, and gamut mapping a rotated color back into sRGB shifts it further, so remeasure rather than assume.

It is the fastest way to generate palette variants, seasonal skins, or colorways from one approved scheme, and the fastest way to recolor an illustration without repainting it. The dials are everywhere: the Hue slider in Photoshop's Hue/Saturation, the H channel in HSL, the h value in OKLCH, and the CSS filter hue-rotate(90deg).

Two gotchas. The CSS filter is a fake. hue-rotate() is a fixed matrix multiply on sRGB values, not a real rotation, so it drifts lightness and desaturates on the way around; rotating the h channel in OKLCH is the honest version. And equal degrees are not equal perceptual steps: hues bunch up in the greens and stretch out in the blues, and a 30 degree spin near yellow changes apparent brightness far more than the same spin near cyan. Always eyeball the result instead of trusting the number.

Ask AI for it

Take this palette and produce three hue-rotated variants: +30, +120, and +180 degrees. Rotate only the h channel in OKLCH, then gamut-map each result back into sRGB. After that, measure the contrast ratio of every text and background pair in each variant against the original palette's ratios. Where a pair has dropped below its original threshold, or where a color now reads noticeably brighter or duller, adjust that swatch's lightness by the smallest amount that fixes it. Output each variant as CSS custom properties in oklch() notation with hex fallbacks, and list every adjustment you made rather than claiming the contrast is unchanged.

You might have meant

color wheelanalogoushue shifted shadingcolor scalecolorway

Go deeper