sass:color

color.channel($color, $channel, $space: null) //=> number

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns the value of $channel in $space, which defaults to $color’s space. The $channel must be a quoted string, and the $space must be an unquoted string.

This returns a number with unit deg for the hue channel of the hsl, hwb, lch, and oklch spaces. It returns a number with unit % for the saturation, lightness, whiteness, and blackness channels of the hsl, hwb, lab, lch, oklab, and oklch spaces. For all other channels, it returns a unitless number.

This will return 0 (possibly with an appropriate unit) if the $channel is missing in $color. You can use color.is-missing() to check explicitly for missing channels.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25

Playground

Sass Syntax

@use 'sass:color'

@debug color.channel(hsl(80deg 30% 50%), "hue")  // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch)  // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb)  // 140.25

color.complement($color, $space: null)
complement($color, $space: null) //=> color

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns the complement of $color in $space.

This rotates $color’s hue by 180deg in $space. This means that $space has to be a polar color space: hsl, hwb, lch, or oklch. It always returns a color in the same space as $color.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch);
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch); // oklch(50% 0.12 250deg)

Playground

Sass Syntax

@use 'sass:color'

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

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch) 
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch)  // oklch(50% 0.12 250deg)

color.grayscale($color)
grayscale($color) //=> color

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

If $color is in a legacy color space, this sets the HSL saturation to 0%. Otherwise, it sets the Oklch chroma to 0%.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6)); // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg)); // oklch(50% 0% 270deg)

Playground

Sass Syntax

@use 'sass:color'

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6))  // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg))  // oklch(50% 0% 270deg)

color.ie-hex-str($color)
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.

If $color isn’t already in the rgb color space, it’s converted to rgb and gamut-mapped if necessary. The specific gamut-mapping algorithm may change in future Sass versions as the state of the art improves; currently, local-minde is used.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287

Playground

Sass Syntax

@use 'sass:color'

@debug color.ie-hex-str(#b37399)  // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6))  // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg))  // #FF9BA287

color.invert($color, $weight: 100%, $space: null)
invert($color, $weight: 100%, $space: null) //=> color

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns the inverse or negative of $color in $space.

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 a medium-lightness gray in $space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb); // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3); // rgb(103.4937692017, 61.3720912206, 59.430641338)

Playground

Sass Syntax

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb)  // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3)  // rgb(103.4937692017, 61.3720912206, 59.430641338)

color.is-legacy($color) //=> boolean

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns whether $color is in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.is-legacy(#b37399); // true
@debug color.is-legacy(hsl(90deg 30% 90%)); // true
@debug color.is-legacy(oklch(70% 10% 120deg)); // false

Playground

Sass Syntax

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-missing($color, $channel) //=> boolean

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns whether $channel is [missing] in $color. The $channel must be a quoted string.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.is-missing(#b37399, "green"); // false
@debug color.is-missing(rgb(100 none 200), "green"); // true
@debug color.is-missing(color.to-space(grey, lch), "hue"); // true

Playground

Sass Syntax

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-powerless($color, $channel, $space: null) //=> boolean

Compatibility ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns whether $color’s $channel is powerless in $space, which defaults to $color’s space. The $channel must be a quoted string and the $space must be an unquoted string.

Channels are considered powerless in the following circumstances:

• In the hsl space, the hue is powerless if the saturation is 0%.
• In the hwb space, the hue is powerless if the whiteness plus the blackness is greater than 100%.
• In the lch and oklch spaces, the hue is powerless if the chroma is 0%.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.is-powerless(hsl(180deg 0% 40%), "hue"); // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation"); // false
@debug color.is-powerless(#999, "hue", $space: hsl); // true

Playground

Sass Syntax

@use 'sass:color'

@debug color.is-powerless(hsl(180deg 0% 40%), "hue")  // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation")  // false
@debug color.is-powerless(#999, "hue", $space: hsl)  // true

color.mix($color1, $color2, $weight: 50%, $method: null)
mix($color1, $color2, $weight: 50%, $method: null) //=> color

Compatibility ($method):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns a color that’s a mixture of $color1 and $color2 using $method, which is the name of a color space, optionally followed by a hue interpolation method if it’s a polar color space (hsl, hwb, lch, or oklch).

This uses the same algorithm to mix colors as the CSS color-mix() function. This also means that if either color has a missing channel in the interpolation space, it will take on the corresponding channel value from the other color. This always returns a color in $color1’s space.

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
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(
  color(rec2020 1 0.7 0.1),
  color(rec2020 0.8 none 0.3),
  $weight: 75%,
  $method: rec2020
); // color(rec2020 0.95 0.7 0.15)
@debug color.mix(
  oklch(80% 20% 0deg),
  oklch(50% 10% 120deg),
  $method: oklch longer hue
); // oklch(65% 0.06 240deg)

Playground

Sass Syntax

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb)  // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch)  // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(color(rec2020 1 0.7 0.1), color(rec2020 0.8 none 0.3), $weight: 75%, $method: rec2020)  // color(rec2020 0.95 0.7 0.15)





@debug color.mix(oklch(80% 20% 0deg), oklch(50% 10% 120deg), $method: oklch longer hue)  // oklch(65% 0.06 240deg)

color.same($color1, $color2) //=> boolean

Compatibility:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns whether $color1 and $color2 visually render as the same color. Unlike ==, this considers colors to be equivalent even if they’re in different color spaces as long as they represent the same color value in the xyz color space. This treats missing channels as equivalent to zero.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.same(#036, #036); // true
@debug color.same(#036, #037); // false
@debug color.same(#036, color.to-space(#036, oklch)); // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true

Playground

Sass Syntax

@use 'sass:color'

@debug color.same(#036, #036)  // true
@debug color.same(#036, #037)  // false
@debug color.same(#036, color.to-space(#036, oklch))  // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%))  // true

color.space($color) //=> unquoted string

Compatibility:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns the name of $color’s space as an unquoted string.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.space(#036); // rgb
@debug color.space(hsl(120deg 40% 50%)); // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz

Playground

Sass Syntax

@use 'sass:color'

@debug color.space(#036)  // rgb
@debug color.space(hsl(120deg 40% 50%))  // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3))  // xyz

color.to-gamut($color, $space: null, $method: null) //=> color

Compatibility:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Returns a visually similar color to $color in the gamut of $space, which defaults to $color’s space. If $color is already in-gamut for $space, it’s returned as-is. This always returns a color in $color’s original space. The $space must be an unquoted string.

The $method indicates how Sass should choose a "similar" color:

• local-minde: This is the method currently recommended by the CSS Colors 4 specification. It binary searches the Oklch chroma space of the color until it finds a color whose clipped-to-gamut value is as close as possible to the reduced-chroma variant.

• clip: This simply clips all channels to within $space’s gamut, setting them to the minimum or maximum gamut values if they’re out-of-gamut.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.to-gamut(#036, $method: local-minde); // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde);
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip);
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

Playground

Sass Syntax

@use 'sass:color'

@debug color.to-gamut(#036, $method: local-minde)  // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde)
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip)
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

color.to-space($color, $space) //=> color

Compatibility:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

Converts $color into the given $space, which must be an unquoted string.

If the gamut of $color’s original space is wider than $space’s gamut, this may return a color that’s out-of-gamut for the $space. You can convert it to a similar in-gamut color using color.to-gamut().

This can produce colors with missing channels, either if $color has an analogous channel that’s missing, or if the channel is powerless in the destination space. In order to ensure that converting to legacy color spaces always produces a color that’s compatible with older browsers, if $space is legacy this will never return a new missing channel.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.to-space(#036, display-p3); // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13)); // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1)); // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch); // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch); // oklch(none 0.3782382429 11.1889160032deg)

Playground

Sass Syntax

@use 'sass:color'

@debug color.to-space(#036, display-p3)  // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13))  // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1))  // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch)  // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch)  // oklch(none 0.3782382429 11.1889160032deg)

adjust-hue($color, $degrees) //=> color

Increases or decreases $color’s HSL hue.

The $hue must be a number between -360deg and 360deg (inclusive) to add to $color’s hue. It may be unitless or have any angle unit. The $color must be in a legacy color space.

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

• SCSS
• Sass

Playground

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

Playground

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

color.blackness($color)
blackness($color) //=> number

Compatibility:

Dart Sass

since 1.28.0

LibSass

✗

Ruby Sass

✗

Returns the HWB blackness of $color as a number between 0% and 100%.

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%

Playground

Sass Syntax

@use 'sass:color'

@debug color.blackness(#e1d7d2)  // 11.7647058824%
@debug color.blackness(white)  // 0%
@debug color.blackness(black)  // 100%

color.blue($color)
blue($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

darken($color, $amount) //=> color

Makes $color darker.

The $color must be in a legacy color space.

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

⚠️ Heads up!

The darken() function decreases lightness by a fixed amount, which is often not the desired effect. To make a color a certain percentage darker than it was before, use color.scale() instead.

Because darken() is usually not the best way to make a color darker, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, darken($color, $amount) can be written color.adjust($color, $lightness: -$amount, $space: hsl).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

Playground

Sass Syntax

@use 'sass:color'

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%)  // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%)  // #002447

• SCSS
• Sass

Playground

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

Playground

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 $color must be in a legacy color space.

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

⚠️ Heads up!

The desaturate() function decreases saturation by a fixed amount, which is often not the desired effect. To make a color a certain percentage less saturated than it was before, use color.scale() instead.

Because desaturate() is usually not the best way to make a color less saturated, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, desaturate($color, $amount) can be written color.adjust($color, $saturation: -$amount, $space: hsl).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

Playground

Sass Syntax

@use 'sass:color'

// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%)  // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%)  // #6e727c

• SCSS
• Sass

Playground

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

Playground

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

color.green($color)
green($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

color.hue($color)
hue($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

lighten($color, $amount) //=> color

Makes $color lighter.

The $color must be in a legacy color space.

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

⚠️ Heads up!

The lighten() function increases lightness by a fixed amount, which is often not the desired effect. To make a color a certain percentage lighter than it was before, use scale() instead.

Because lighten() is usually not the best way to make a color lighter, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, lighten($color, $amount) can be written color.adjust($color, $lightness: $amount, $space: hsl).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

Playground

Sass Syntax

@use 'sass:color'

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%)  // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%)  // #eae3e0

• SCSS
• Sass

Playground

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

Playground

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

color.lightness($color)
lightness($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

color.red($color)
red($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

saturate($color, $amount) //=> color

Makes $color more saturated.

The $color must be in a legacy color space.

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

⚠️ Heads up!

The saturate() function increases saturation by a fixed amount, which is often not the desired effect. To make a color a certain percentage more saturated than it was before, use scale() instead.

Because saturate() is usually not the best way to make a color more saturated, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, saturate($color, $amount) can be written color.adjust($color, $saturation: $amount, $space: hsl).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%); // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986

Playground

Sass Syntax

@use 'sass:color'

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%)  // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%)  // #0a4986

• SCSS
• Sass

Playground

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

Playground

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

color.saturation($color)
saturation($color) //=> number

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

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

color.whiteness($color) //=> number

Compatibility:

Dart Sass

since 1.28.0

LibSass

✗

Ruby Sass

✗

Returns the HWB whiteness of $color as a number between 0% and 100%.

The $color must be in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

Playground

Sass Syntax

@use 'sass:color'

@debug color.whiteness(#e1d7d2)  // 82.3529411765%
@debug color.whiteness(white)  // 100%
@debug color.whiteness(black)  // 0%