 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 using HSL coordinates (which are just another way of expressing sRGB colors). 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
Sass

@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)
@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)
 
💡 Fun fact: No matter how a Sass color is originally written, it can be used with both HSL-based and RGB-based functions!  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
Sass

$venus: #998099;

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

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

    
{'path': 'public/docs/sass/values/colors.html', 'source': 'DevDocs.IO'}