Compatibility:
Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$x: null, $y: null, $z: null,
$chroma: null,
$alpha: null,
$space: null)
adjust-color(...) Compatibility ($x, $y, $z, $chroma, and $space):
Compatibility ($whiteness and $blackness):
Increases or decreases one or more channels of $color by fixed amounts.
Adds the value passed for each keyword argument to the corresponding channel of the color, and returns the adjusted color. By default, this can only adjust channels in $color’s space, but a different color space can be passed as $space to adjust channels there instead. This always returns a color in the same space as $color.
For historical reasons, if $color is in a legacy color space, any legacy color space channels can be adjusted. However, it’s an error to specify an RGB channel ($red, $green, and/or $blue) at the same time as an HSL channel ($hue, $saturation, and/or $lightness), or either of those at the same time as an HWB channel ($hue, $whiteness, and/or $blackness).
Even so, it’s a good idea to pass $space explicitly even for legacy colors.
All channel arguments must be numbers, and must be units that could be passed for those channels in the color space’s constructor. If the existing channel value plus the adjustment value is outside the channel’s native range, it’s clamped for:
rgb space;lab, lch, oklab, and oklch spaces;hsl, lch, and oklch spaces;See also:
color.scale() for fluidly scaling a color’s properties.color.change() for setting a color’s properties.@use 'sass:color';
@debug color.adjust(#6b717f, $red: 15);
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20);
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch);
@use 'sass:color'
@debug color.adjust(#6b717f, $red: 15) // #7a717f
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20) // lab(50% 10 40)
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch)
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$x: null, $y: null, $z: null,
$chroma: null,
$alpha: null,
$space: null)
change-color(...) Compatibility ($x, $y, $z, $chroma, and $space):
Compatibility ($whiteness and $blackness):
Sets one or more channels of a color to new values.
Uses the value passed for each keyword argument in place of the corresponding color channel, and returns the changed color. By default, this can only change channels in $color’s space, but a different color space can be passed as $space to adjust channels there instead. This always returns a color in the same space as $color.
For historical reasons, if $color is in a legacy color space, any legacy color space channels can be changed. However, it’s an error to specify an RGB channel ($red, $green, and/or $blue) at the same time as an HSL channel ($hue, $saturation, and/or $lightness), or either of those at the same time as an HWB channel ($hue, $whiteness, and/or $blackness).
Even so, it’s a good idea to pass $space explicitly even for legacy colors.
All channel arguments must be numbers, and must be units that could be passed for those channels in the color space’s constructor. Channels are never clamped for color.change().
See also:
color.scale() for fluidly scaling a color’s properties.color.adjust() for adjusting a color’s properties by fixed amounts.@use 'sass:color';
@debug color.change(#6b717f, $red: 100);
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1);
@debug color.change(#998099, $lightness: 30%, $space: oklch);
@use 'sass:color'
@debug color.change(#6b717f, $red: 100) // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1)
@debug color.change(#998099, $lightness: 30%, $space: oklch)
color.channel($color, $channel, $space: null) Compatibility ($space):
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.
@use 'sass:color';
@debug color.channel(hsl(80deg 30% 50%), "hue");
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch);
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb);
@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) Compatibility ($space):
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.
For historical reasons, $space is optional if $color is in a legacy color space. In that case, $space defaults to hsl. It’s always a good idea to pass $space explicitly regardless.
color.grayscale($color)
grayscale($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%.
color.ie-hex-str($color)
ie-hex-str($color) 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.
color.invert($color, $weight: 100%, $space: null)
invert($color, $weight: 100%, $space: null) Compatibility ($space):
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.
For historical reasons, $space is optional if $color is in a legacy color space. In that case, $space defaults to $color’s own space. It’s always a good idea to pass $space explicitly regardless.
color.is-legacy($color) Compatibility ($space):
Returns whether $color is in a legacy color space.
color.is-missing($color, $channel) Compatibility ($space):
Returns whether $channel is missing in $color. The $channel must be a quoted string.
color.is-powerless($color, $channel, $space: null) Compatibility ($space):
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:
hsl space, the hue is powerless if the saturation is 0%.hwb space, the hue is powerless if the whiteness plus the blackness is greater than 100%.lch and oklch spaces, the hue is powerless if the chroma is 0%.color.mix($color1, $color2, $weight: 50%, $method: null)
mix($color1, $color2, $weight: 50%, $method: null) Compatibility ($method):
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.
For historical reasons, $method is optional if $color1 and $color2 are both in legacy color spaces. In this case, color mixing is done using the same algorithm that Sass used historically, in which both the $weight and the relative opacity of each color determines how much of each color is in the result.
@use 'sass:color';
@debug color.mix(#036, #d2e1dd, $method: rgb);
@debug color.mix(#036, #d2e1dd, $method: oklch);
@debug color.mix(
color(rec2020 1 0.7 0.1),
color(rec2020 0.8 none 0.3),
$weight: 75%,
$method: rec2020
);
@debug color.mix(
oklch(80% 20% 0deg),
oklch(50% 10% 120deg),
$method: oklch longer hue
);
@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) Compatibility:
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.
@use 'sass:color';
@debug color.same(#036, #036);
@debug color.same(#036, #037);
@debug color.same(#036, color.to-space(#036, oklch));
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%));
@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.scale($color,
$red: null, $green: null, $blue: null,
$saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$x: null, $y: null, $z: null,
$chroma: null,
$alpha: null,
$space: null)
scale-color(...) Compatibility ($x, $y, $z, $chroma, and $space):
Compatibility ($whiteness and $blackness):
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. By default, this can only scale colors in $color’s space, but a different color space can be passed as $space to scale channels there instead. This always returns a color in the same space as $color.
For historical reasons, if $color is in a legacy color space, any legacy color space channels can be scaled. However, it’s an error to specify an RGB channel ($red, $green, and/or $blue) at the same time as an HSL channel ($saturation, and/or $lightness), or either of those at the same time as an HWB channel ($hue, $whiteness, and/or $blackness).
Even so, it’s a good idea to pass $space explicitly even for legacy colors.
See also:
color.adjust() for changing a color’s properties by fixed amounts.color.change() for setting a color’s properties.@use 'sass:color';
@debug color.scale(#6b717f, $red: 15%);
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch);
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);
@use 'sass:color'
@debug color.scale(#6b717f, $red: 15%) // rgb(129.2, 113, 127)
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch)
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%)
color.space($color) Compatibility:
Returns the name of $color’s space as an unquoted string.
color.to-gamut($color, $space: null, $method: null) Compatibility:
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.
The CSS working group and browser vendors are still actively discussing alternative options for a recommended gamut-mapping algorithm. Until they settle on a recommendation, the $method parameter is mandatory in color.to-gamut() so that we can eventually make its default value the same as the CSS default.
@use 'sass:color';
@debug color.to-gamut(#036, $method: local-minde);
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde);
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip);
@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)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip)
color.to-space($color, $space) Compatibility:
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.
This is the only Sass function that returns a color in a different space than the one passed in.
Deprecated FunctionsDeprecated Functions permalinkadjust-hue($color, $degrees) 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.
color.alpha($color)
alpha($color)
opacity($color) Returns the alpha channel of $color as a number between 0 and 1.
The $color must be in a legacy color space.
As a special case, this supports the Internet Explorer syntax alpha(opacity=20), for which it returns an unquoted string.
color.blackness($color)
blackness($color) Compatibility:
Returns the HWB blackness of $color as a number between 0% and 100%.
The $color must be in a legacy color space.
color.blue($color)
blue($color) Returns the blue channel of $color as a number between 0 and 255.
The $color must be in a legacy color space.
darken($color, $amount) 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.
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).
desaturate($color, $amount) 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.
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).
color.green($color)
green($color) Returns the green channel of $color as a number between 0 and 255.
The $color must be in a legacy color space.
color.hue($color)
hue($color) Returns the hue of $color as a number between 0deg and 360deg.
The $color must be in a legacy color space.
lighten($color, $amount) 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.
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).
color.lightness($color)
lightness($color) Returns the HSL lightness of $color as a number between 0% and 100%.
The $color must be in a legacy color space.
opacify($color, $amount)
fade-in($color, $amount) Makes $color more opaque.
The $color must be in a legacy color space.
The $amount must be a number between 0 and 1 (inclusive). Increases the alpha channel of $color by that amount.
The opacify() function increases the alpha channel by a fixed amount, which is often not the desired effect. To make a color a certain percentage more opaque than it was before, use scale() instead.
Because opacify() is usually not the best way to make a color more opaque, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, opacify($color, $amount) can be written color.adjust($color, $alpha: -$amount).
@use 'sass:color';
@debug opacify(rgba(#036, 0.7), 0.3);
@debug color.scale(rgba(#036, 0.7), $alpha: 30%);
@use 'sass:color'
@debug opacify(rgba(#036, 0.7), 0.3) // #036
@debug color.scale(rgba(#036, 0.7), $alpha: 30%) // rgba(0, 51, 102, 0.79)
@debug opacify(rgba(#6b717f, 0.5), 0.2);
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4);
@debug opacify(rgba(#036, 0.7), 0.3);
@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
color.red($color)
red($color) Returns the red channel of $color as a number between 0 and 255.
The $color must be in a legacy color space.
saturate($color, $amount) 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.
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).
color.saturation($color)
saturation($color) Returns the HSL saturation of $color as a number between 0% and 100%.
The $color must be in a legacy color space.
transparentize($color, $amount)
fade-out($color, $amount) Makes $color more transparent.
The $color must be in a legacy color space.
The $amount must be a number between 0 and 1 (inclusive). Decreases the alpha channel of $color by that amount.
The transparentize() function decreases the alpha channel by a fixed amount, which is often not the desired effect. To make a color a certain percentage more transparent than it was before, use color.scale() instead.
Because transparentize() is usually not the best way to make a color more transparent, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, transparentize($color, $amount) can be written color.adjust($color, $alpha: -$amount, $space: hsl).
@use 'sass:color';
@debug transparentize(rgba(#036, 0.3), 0.3);
@debug color.scale(rgba(#036, 0.3), $alpha: -30%);
@use 'sass:color'
@debug transparentize(rgba(#036, 0.3), 0.3) // rgba(0, 51, 102, 0)
@debug color.scale(rgba(#036, 0.3), $alpha: -30%) // rgba(0, 51, 102, 0.21)
@debug transparentize(rgba(#6b717f, 0.5), 0.2);
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4);
@debug transparentize(rgba(#036, 0.3), 0.3);
@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)
color.whiteness($color) Compatibility:
Returns the HWB whiteness of $color as a number between 0% and 100%.
The $color must be in a legacy color space.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4