Colors

Compatibility (Color Spaces):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

➤

Compatibility (Level 4 Syntax):

Dart Sass

since 1.14.0

LibSass

✗

Ruby Sass

since 3.6.0

➤

Sass has built-in support for color values. Just like CSS colors, each color represents a point in a particular color space such as rgb or lab. Sass colors can be written as hex codes (#f2ece4 or #b37399aa), CSS color names (midnightblue, transparent), or color functions like rgb(), lab(), or color().

• SCSS
• Sass

Playground

SCSS Syntax

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

Playground

Sass Syntax

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

Color SpacesColor Spaces permalink

Sass supports the same set of color spaces as CSS. A Sass color will always be emitted in the same color space it was written in unless it’s in a legacy color space or you convert it to another space using color.to-space(). All the other color functions in Sass will always return a color in the same spaces as the original color, even if the function made changes to that color in another space.

Although each color space has bounds on the gamut it expects for its channels, Sass can represent out-of-gamut values for any color space. This allows a color from a wide-gamut space to be safely converted into and back out of a narrow-gamut space without losing information.

Following is a full list of all the color spaces Sass supports. You can read learn about these spaces on MDN.

Spaces marked with * are legacy color spaces.

Missing ChannelsMissing Channels permalink

Colors in CSS and Sass can have "missing channels", which are written none and represent a channel whose value isn’t known or doesn’t affect the way the color is rendered. For example, you might write hsl(none 0% 50%), because the hue doesn’t matter if the saturation is 0%. In most cases, missing channels are just treated as 0 values, but they do come up occasionally:

• If you’re mixing colors together, either as part of CSS interpolation for something like an animation or using Sass’s color.mix() function, missing channels always take on the other color’s value for that channel if possible.

• If you convert a color with a missing channel to another space that has an analogous channel, that channel will be set to none after the conversion is complete.

Although color.channel() will return 0 for missing channels, you can always check for them using color.is-missing().

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)

Playground

Sass Syntax

@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

Powerless ChannelsPowerless Channels permalink

A color channel is considered "powerless" under certain circumstances its value doesn’t affect the way the color is rendered on screen. The CSS spec requires that when a color is converted to a new space, any powerless channels are replaced by none. Sass does this in all cases except conversions to legacy spaces, to guarantee that converting to a legacy space always produces a color that’s compatible with older browsers.

For more details on powerless channels, see color.is-powerless().

Legacy Color SpacesLegacy Color Spaces permalink

Historically, CSS and Sass only supported the standard RGB gamut, and only supported the rgb, hsl, and hwb functions for defining colors. Because at the time all colors used the same gamut, every color function worked with every color regardless of its color space. Sass still preserves this behavior, but only for older functions and only for colors in these three "legacy" color spaces. Even so, it’s still a good practice to explicitly specify the $space you want to work in when using color functions.

Sass will also freely convert between different legacy color spaces when converting legacy color values to CSS. This is always safe, because they all use the same underlying color model, and this helps ensure that Sass emits colors in as compatible a format as possible.

Color FunctionsColor Functions permalink

Sass supports many useful color functions that can be used to create new colors based on existing ones by mixing colors together or scaling their channel values. When calling color functions, color spaces should always be written as unquoted strings to match CSS, while channel names should be written as quoted strings so that channels like "red" aren’t parsed as color values.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)

Playground

Sass Syntax

@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)