sass-site/source/documentation/values/colors.html.md.erb

---
title: Colors
---

<% impl_status dart: '1.14.0', libsass: '3.6.0', ruby: '3.6.0' do %>
  Support for [hex colors with an alpha channel][] is not supported by LibSass
  or older versions of Dart or Ruby Sass.

  [hex colors with an alpha channel]: https://drafts.csswg.org/css-color/#hex-notation
<% end %>

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()`][].

[sRGB color space]: https://en.wikipedia.org/wiki/SRGB
[color functions]: ../functions/color
[HSL color space]: https://en.wikipedia.org/wiki/HSL_and_HSV
[CSS color names]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords
[`rgb()`]: ../functions/color#rgb
[`rgba()`]: ../functions/color#rgba
[`hsl()`]: ../functions/color#hsl
[`hsla()`]: ../functions/color#hsla

<% example(autogen_css: false) do %>
  @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)
<% end %>

<% fun_fact do %>
  No matter how a Sass color is originally written, it can be used with both
  HSL-based and RGB-based functions!
<% end %>

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.

[functional notation]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

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][].

[mixing colors together]: ../functions/color#mix
[scaling their hue, saturation, or lightness]: ../functions/color#scale-color

<% example(autogen_css: false) do %>
  $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
<% end %>