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