Hue-rotate and saturate

Learn hue-rotate() and saturate() filters.

hue-rotate() shifts colors

The hue-rotate() function shifts every color of an element along the color wheel. The value is an angle; hue-rotate(90deg) moves each color a quarter turn, hue-rotate(180deg) lands on the opposite colors.

Drastic shifts — a blue image turning purple, green shifting to pink — happen in a single line. 0deg leaves the element untouched.

saturate() shifts intensity

The saturate() function boosts or trims color intensity. saturate(1) is the default, saturate(2) makes colors clearly vivid, saturate(0.3) fades them.

A green leaf under saturate(1.8) turns piercingly bright, under saturate(0.5) it looks gray-toned. Cinematic shots often settle on saturate(0.85) for a soft finish; avoiding excess is a good habit.

Color shifting effects

Pair these two functions and a new visual language appears. Shift colors with hue-rotate(120deg) then enliven them with saturate(1.5) — a typical starting point for a neon theme.

Flip the order — saturation first, then hue shift — and the result stays vivid but on a different palette. Tone hunting grows out of these small ordering tries.

Exercise Build the neon theme with two functions

Write a single filter declaration for the .neon selector. It should hold hue-rotate(120deg) first, then saturate(2), separated by a space.

Show example solution

/* neon theme filter */
.neon {
  filter: hue-rotate(120deg) saturate(2);
}

Test yourself

What does hue-rotate(180deg) do?
```
.tile {
  filter: hue-rotate(180deg);
}
```
- Colors shift a quarter turn
- Colors stay the same
- Colors become slightly brighter
- Colors turn to their opposite hues
Show answer

Colors turn to their opposite hues — Correct. 180deg is a half turn; each color lands on its opposite on the wheel.

Add saturation to the neon text

.neon {
  filter: ____;
}

Show answer

.neon {
  filter: saturate(2);
}

Match each call to its result

hue-rotate(180deg)

Shifts to opposite hues
saturate(2)

Makes colors vivid
hue-rotate(0deg)

Colors stay the same
saturate(0.3)

Fades the colors

Next lesson: Drop-shadow

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies