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 );


COVID-19 NOTICE – Business as Usual
Evance continues to provide all services and support throughout this difficult period. See our full statement here .