Color Functions

adjust-color($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $alpha: null) //=> color 

Increases or decreases one or more properties of $color by fixed amounts.

Adds the value passed for each keyword argument to the corresponding property of the color, and returns the adjusted color. It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($hue, $saturation, and/or $lightness).

All optional arguments must be numbers. The $red, $green, and $blue arguments must be unitless and between -255 and 255 (inclusive). The $hue argument must have either the unit deg or no unit. The $saturation and $lightness arguments must be between -100% and 100% (inclusive), and may be unitless. The $alpha argument must be unitless and between -1 and 1 (inclusive).

See also:

SCSS Syntax

@debug adjust-color(#6b717f, $red: 15); // #7a717f
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

Sass Syntax

@debug adjust-color(#6b717f, $red: 15)  // #7a717f
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10)  // #c8e1e7
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4)  // rgba(71, 57, 71, 0.6)
adjust-hue($color, $degrees) //=> color 

Increases or decreases $color’s hue.

The $hue must be a number between -360deg and 360deg (inclusive) to add to $color’s hue. It may be unitless.

See also adjust-color(), which can adjust any property of a color.

SCSS Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

Sass Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066
alpha($color)
opacity($color) //=> number 

Returns the alpha channel of $color as a number between 0 and 1.

As a special case, this supports the Internet Explorer syntax alpha(opacity=20), for which it returns an unquoted string.

See also:

  • red() for getting a color’s red channel.
  • green() for getting a color’s green channel.
  • blue() for getting a color’s blue channel.
  • hue() for getting a color’s hue.
  • saturation() for getting a color’s saturation.
  • lightness() for getting a color’s lightness.

SCSS Syntax

@debug alpha(#e1d7d2); // 1
@debug opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)

Sass Syntax

@debug alpha(#e1d7d2)  // 1
@debug opacity(rgb(210, 225, 221, 0.4))  // 0.4
@debug alpha(opacity=20)  // alpha(opacity=20)
blue($color) //=> number 

Returns the blue channel of $color as a number between 0 and 255.

See also:

  • red() for getting a color’s red channel.
  • green() for getting a color’s green channel.
  • hue() for getting a color’s hue.
  • saturation() for getting a color’s saturation.
  • lightness() for getting a color’s lightness.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug blue(#e1d7d2); // 210
@debug blue(white); // 255
@debug blue(black); // 0

Sass Syntax

@debug blue(#e1d7d2)  // 210
@debug blue(white)  // 255
@debug blue(black)  // 0
change-color($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $alpha: null) //=> color 

Sets one or more properties of a color to new values.

Uses the value passed for each keyword argument in place of the corresponding property of the color, and returns the changed color. It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($hue, $saturation, and/or $lightness).

All optional arguments must be numbers. The $red, $green, and $blue arguments must be unitless and between 0 and 255 (inclusive). The $hue argument must have either the unit deg or no unit. The $saturation and $lightness arguments must be between 0% and 100% (inclusive), and may be unitless. The $alpha argument must be unitless and between -1 and 1 (inclusive).

See also:

SCSS Syntax

@debug change-color(#6b717f, $red: 100); // #64717f
@debug change-color(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug change-color(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)

Sass Syntax

@debug change-color(#6b717f, $red: 100)  // #64717f
@debug change-color(#d2e1dd, $red: 100, $blue: 50)  // #64e132
@debug change-color(#998099, $lightness: 30%, $alpha: 0.5)  // rgba(85, 68, 85, 0.5)
complement($color) //=> color 

Returns the RGB complement of $color.

This is identical to adjust-hue($color, 180deg).

SCSS Syntax

// Hue 222deg becomes 42deg.
@debug complement(#6b717f); // #7f796b

// Hue 164deg becomes 344deg.
@debug complement(#d2e1dd); // #e1d2d6

// Hue 210deg becomes 30deg.
@debug complement(#036); // #663300

Sass Syntax

// Hue 222deg becomes 42deg.
@debug complement(#6b717f)  // #7f796b

// Hue 164deg becomes 344deg.
@debug complement(#d2e1dd)  // #e1d2d6

// Hue 210deg becomes 30deg.
@debug complement(#036)  // #663300
darken($color, $amount) //=> color 

Makes $color darker.

The $amount must be a number between 0% and 100% (inclusive). Decreases the HSL lightness of $color by that amount.

SCSS Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black

Sass Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%)  // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%)  // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%)  // black
desaturate($color, $amount) //=> color 

Makes $color less saturated.

The $amount must be a number between 0% and 100% (inclusive). Decreases the HSL saturation of $color by that amount.

SCSS Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada

Sass Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%)  // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%)  // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%)  // #dadada
grayscale($color) //=> color 

Returns a gray color with the same lightness as $color.

This is identical to change-color($color, $saturation: 0%).

SCSS Syntax

@debug grayscale(#6b717f); // #757575
@debug grayscale(#d2e1dd); // #dadada
@debug grayscale(#036); // #333333

Sass Syntax

@debug grayscale(#6b717f)  // #757575
@debug grayscale(#d2e1dd)  // #dadada
@debug grayscale(#036)  // #333333
green($color) //=> number 

Returns the green channel of $color as a number between 0 and 255.

See also:

  • red() for getting a color’s red channel.
  • blue() for getting a color’s blue channel.
  • hue() for getting a color’s hue.
  • saturation() for getting a color’s saturation.
  • lightness() for getting a color’s lightness.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug green(#e1d7d2); // 215
@debug green(white); // 255
@debug green(black); // 0

Sass Syntax

@debug green(#e1d7d2)  // 215
@debug green(white)  // 255
@debug green(black)  // 0
hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color 
Compatibility (Level 4 Syntax):
Dart Sass
since 1.15.0
LibSass
Ruby Sass

LibSass and Ruby Sass only support the following signatures:

  • hsl($hue, $saturation, $lightness)
  • hsla($hue, $saturation, $lightness, $alpha)

Note that for these implementations, the $alpha argument is required if the function name hsla() is used, and forbidden if the function name hsl() is used.

Compatibility (Percent Alpha):
Dart Sass
LibSass
Ruby Sass
since 3.7.0

LibSass and older versions of Ruby Sass don’t support alpha values specified as percentages.

Returns a color with the given hue, saturation, and lightness and the given alpha channel.

The hue is a number between 0deg and 360deg (inclusive). The saturation and lightness are numbers between 0% and 100% (inclusive). All these numbers may be unitless. The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0% and 100% (inclusive).

SCSS Syntax

@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)

Sass Syntax

@debug hsl(210deg 100% 20%) // #036
@debug hsl(34, 35%, 92%) // #f2ece4
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(242, 236, 228, 0.2)
hue($color) //=> number 

Returns the hue of $color as a number between 0deg and 255deg.

See also:

  • red() for getting a color’s red channel.
  • green() for getting a color’s green channel.
  • blue() for getting a color’s blue channel.
  • saturation() for getting a color’s saturation.
  • lightness() for getting a color’s lightness.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug hue(#e1d7d2); // 20deg
@debug hue(#f2ece4); // 34.2857142857deg
@debug hue(#dadbdf); // 228deg

Sass Syntax

@debug hue(#e1d7d2)  // 20deg
@debug hue(#f2ece4)  // 34.2857142857deg
@debug hue(#dadbdf)  // 228deg
ie-hex-str($color) //=> unquoted string 

Returns an unquoted string that represents $color in the #AARRGGBB format expected by Internet Explorer’s -ms-filter property.

SCSS Syntax

@debug ie-hex-str(#b37399); // #FFB37399
@debug ie-hex-str(#808c99); // #FF808C99
@debug ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

Sass Syntax

@debug ie-hex-str(#b37399); // #FFB37399
@debug ie-hex-str(#808c99); // #FF808C99
@debug ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
invert($color, $weight: 100%) //=> color 

Returns the inverse or negative of $color.

The $weight must be a number between 0% and 100% (inclusive). A higher weight means the result will be closer to the negative, and a lower weight means it will be closer to $color. Weight 50% will always produce #808080.

SCSS Syntax

@debug invert(#b37399); // #4c8c66
@debug invert(black); // white
@debug invert(#550e0c, 20%); // #663b3a

Sass Syntax

@debug invert(#b37399)  // #4c8c66
@debug invert(black)  // white
@debug invert(#550e0c, 20%)  // #663b3a
lighten($color, $amount) //=> color 

Makes $color lighter.

The $amount must be a number between 0% and 100% (inclusive). Increases the HSL lightness of $color by that amount.

SCSS Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white

Sass Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%)  // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%)  // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%)  // white
lightness($color) //=> number 

Returns the HSL lightness of $color as a number between 0% and 100%.

See also:

  • red() for getting a color’s red channel.
  • green() for getting a color’s green channel.
  • blue() for getting a color’s blue channel.
  • hue() for getting a color’s hue.
  • saturation() for getting a color’s saturation.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug lightness(#e1d7d2); // 85.2941176471%
@debug lightness(#f2ece4); // 92.1568627451%
@debug lightness(#dadbdf); // 86.4705882353%

Sass Syntax

@debug lightness(#e1d7d2)  // 85.2941176471%
@debug lightness(#f2ece4)  // 92.1568627451%
@debug lightness(#dadbdf)  // 86.4705882353%
mix($color1, $color2, $weight: 50%) //=> color 

Returns a number that’s a mixture of $color1 and $color2.

Both the $weight and the relative opacity of each color determines how much of each color is in the result. The $weight must be a number between 0% and 100% (inclusive). A larger weight indicates that more of $color1 should be used, and a smaller weight indicates that more of $color2 should be used.

SCSS Syntax

@debug mix(#036, #d2e1dd); // #698aa2
@debug mix(#036, #d2e1dd, 75%); // #355f84
@debug mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

Sass Syntax

@debug mix(#036, #d2e1dd)  // #698aa2
@debug mix(#036, #d2e1dd, 75%)  // #355f84
@debug mix(#036, #d2e1dd, 25%)  // #9eb6bf
@debug mix(rgba(242, 236, 228, 0.5), #6b717f)  // rgba(141, 144, 152, 0.75)
opacify($color, $amount)
fade-in($color, $amount) //=> color 

Makes $color more opaque.

The $amount must be a number between 0 and 1 (inclusive). Increases the alpha channel of $color by that amount.

SCSS Syntax

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

Sass Syntax

@debug opacify(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3)  // #036
red($color) //=> number 

Returns the red channel of $color as a number between 0 and 255.

See also:

  • green() for getting a color’s green channel.
  • blue() for getting a color’s blue channel.
  • hue() for getting a color’s hue.
  • saturation() for getting a color’s saturation.
  • lightness() for getting a color’s lightness.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug red(#e1d7d2); // 225
@debug red(white); // 255
@debug red(black); // 0

Sass Syntax

@debug red(#e1d7d2)  // 225
@debug red(white)  // 255
@debug red(black)  // 0
rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color 
Compatibility (Level 4 Syntax):
Dart Sass
since 1.15.0
LibSass
Ruby Sass

LibSass and Ruby Sass only support the following signatures:

  • rgb($red, $green, $blue)
  • rgba($red, $green, $blue, $alpha)
  • rgba($color, $alpha)

Note that for these implementations, the $alpha argument is required if the function name rgba() is used, and forbidden if the function name rgb() is used.

Compatibility (Percent Alpha):
Dart Sass
LibSass
Ruby Sass
since 3.7.0

LibSass and older versions of Ruby Sass don’t support alpha values specified as percentages.

If $red, $green, $blue, and optionally $alpha are passed, returns a color with the given red, green, blue, and alpha channels.

Each channel can be specified as either a unitless number between 0 and 255 (inclusive), or a percentage between 0% and 100% (inclusive). The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0% and 100% (inclusive).

SCSS Syntax

@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

Sass Syntax

@debug rgb(0 51 102)  // #036
@debug rgb(95%, 92.5%, 89.5%)  // #f2ece4
@debug rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)

If $color and $alpha are passed, this returns $color with the given $alpha channel instead of its original alpha channel.

SCSS Syntax

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

Sass Syntax

@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5) 
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366
saturate($color, $amount) //=> color 

Makes $color more saturated.

The $amount must be a number between 0% and 100% (inclusive). Increases the HSL saturation of $color by that amount.

SCSS Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

Sass Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990
saturation($color) //=> number 

Returns the HSL saturation of $color as a number between 0% and 100%.

See also:

  • red() for getting a color’s red channel.
  • green() for getting a color’s green channel.
  • blue() for getting a color’s blue channel.
  • hue() for getting a color’s hue.
  • lightness() for getting a color’s lightness.
  • alpha() for getting a color’s alpha channel.

SCSS Syntax

@debug saturation(#e1d7d2); // 20%
@debug saturation(#f2ece4); // 30%
@debug saturation(#dadbdf); // 7.2463768116%

Sass Syntax

@debug saturation(#e1d7d2)  // 20%
@debug saturation(#f2ece4)  // 30%
@debug saturation(#dadbdf)  // 7.2463768116%
scale-color($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $alpha: null) //=> color 

Fluidly scales one or more properties of $color.

Each keyword argument must be a number between -100% and 100% (inclusive). This indicates how far the corresponding property should be moved from its original position towards the maximum (if the argument is positive) or the minimum (if the argument is negative). This means that, for example, $lightness: 50% will make all colors 50% closer to maximum lightness without making them fully white.

It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($saturation, and/or $lightness).

See also:

SCSS Syntax

@debug scale-color(#6b717f, $red: 15%); // #81717f
@debug scale-color(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
@debug scale-color(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

Sass Syntax

@debug scale-color(#6b717f, $red: 15%)  // #81717f
@debug scale-color(#d2e1dd, $lightness: -10%, $saturation: 10%)  // #b3d4cb
@debug scale-color(#998099, $alpha: -40%)  // rgba(153, 128, 153, 0.6)
transparentize($color, $amount)
fade-out($color, $amount) //=> color 

Makes $color more transparent.

The $amount must be a number between 0 and 1 (inclusive). Decreases the alpha channel of $color by that amount.

SCSS Syntax

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

Sass Syntax

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)