adjust_color

adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])

Increases or decreases one or more properties of a color. This can change the red, green, blue, hue, saturation, value, and alpha properties. The properties are specified as keyword arguments, and are added to or subtracted from the color’s current value for that property.

All properties are optional. You can’t specify both RGB properties ($red, $green, $blue) and HSL properties ($hue, $saturation, $value) at the same time.

Examples:

adjust-color(#102030, $blue: 5) => #102035
adjust-color(#102030, $red: -5, $blue: 5) => #0b2035
adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6)

Parameters:

  • $color (Color)
  • $red (Number) The adjustment to make on the red component, between -255 and 255 inclusive
  • $green (Number) The adjustment to make on the green component, between -255 and 255 inclusive
  • $blue (Number) The adjustment to make on the blue component, between -255 and 255 inclusive
  • $hue (Number) The adjustment to make on the hue component, in degrees
  • $saturation (Number) The adjustment to make on the saturation component, between -100% and 100% inclusive
  • $lightness (Number) The adjustment to make on the lightness component, between -100% and 100% inclusive
  • $alpha (Number) The adjustment to make on the alpha component, between -1 and 1 inclusive

Returns:

  • (Color)

Raises:

  • (ArgumentError) if any parameter is the wrong type or out-of bounds, or if RGB properties and HSL properties are adjusted at the same time
doc_Sass
2016-11-11 13:09:02
Comments
Leave a Comment

Please login to continue.