Functions 

h-adjust()

Adjust the hue of a color value.

h-adjust( color, offset )

Parameters

• color Any valid CSS color value
• offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

color: h-adjust( deepskyblue -10 );

s-adjust()

Adjust the saturation of a color value.

s-adjust( color, offset )

Parameters

• color Any valid CSS color value
• offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

/* Desaturate */
color: s-adjust( deepskyblue -100 );

l-adjust()

Adjust the lightness of a color value.

l-adjust( color, offset )

Parameters

• color Any valid CSS color value
• offset The percentage to offset the color hue (percent mark optional)

Returns

The modified color value.

color: l-adjust( deepskyblue 10 );

a-adjust()

Manipulate the opacity (alpha channel) of a color value.

a-adjust( color, offset )

Parameters

• color Any valid CSS color value
• offset The percentage to offset the color opacity

Returns

The modified color value.

/* Reduce color opacity by 10% */
color: a-adjust( rgb(50,50,0) -10 );

hsl-adjust()

Manipulate the hue, saturation and lightness of a color value

hsl-adjust( color, hue-offset, saturation-offset, lightness-offset )

Parameters

• color Any valid CSS color value
• hue-offset The percentage to offset the color hue
• saturation-offset The percentage to offset the color saturation
• lightness-offset The percentage to offset the color lightness

Returns

The modified color value.

/* Lighten and increase saturation */
color: hsl-adjust( red 0 5 5 );

hsla-adjust()

Manipulate the hue, saturation, lightness and opacity of a color value.

hsla-adjust( color, hue-offset, saturation-offset, lightness-offset, alpha-offset )

Parameters

• color Any valid CSS color value
• hue-offset The percentage to offset the color hue
• saturation-offset The percentage to offset the color saturation
• lightness-offset The percentage to offset the color lightness
• alpha-offset The percentage to offset the color opacity

Returns

The modified color value.

color: hsla-adjust( #f00 0 5 5 -10 );