Colors

Compatibility (Level 4 Syntax):
Dart Sass
since 1.14.0
LibSass
since 3.6.0
Ruby Sass
since 3.6.0

LibSass and older versions of Dart or Ruby Sass don’t support hex colors with an alpha channel.

Sass has built-in support for color values. Just like CSS colors, they represent points in the sRGB color space, although many Sass color functions operate in the HSL color space as well. Sass colors can be written as hex codes (#f2ece4 or #b37399aa), CSS color names (midnightblue, transparent), or the functions rgb(), rgba(), hsl(), and hsla().

SCSS Syntax

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

Sass Syntax

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204, 102, 153)  // #c69
@debug rgba(107, 113, 127, 0.8)  // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%)  // #dadbdf
@debug hsla(20, 20%, 85%, 0.7)  // rgb(225, 215, 210, 0.7)

CSS supports many different formats that can all represent the same color: its name, its hex code, and functional notation. Which format Sass chooses to compile a color to depends on the color itself, how it was written in the original stylesheet, and the current output mode. Because it can vary so much, stylesheet authors shouldn’t rely on any particular output format for colors they write.

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 hue, saturation, or lightness.

SCSS Syntax

$venus: #998099;

@debug scale-color($venus, $lightness: +15%); // #a893a8
@debug mix($venus, midnightblue); // #594d85

Sass Syntax

$venus: #998099

@debug scale-color($venus, $lightness: +15%)  // #a893a8
@debug mix($venus, midnightblue)  // #594d85