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

78 lines
3.0 KiB
Plaintext
Raw Normal View History

2018-09-01 22:35:20 +02:00
---
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.
2018-09-01 22:35:20 +02:00
[hex colors with an alpha channel]: https://drafts.csswg.org/css-color/#hex-notation
2018-09-01 22:35:20 +02:00
<% 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/colors
[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/colors#rgb
[`rgba()`]: ../functions/colors#rgba
[`hsl()`]: ../functions/colors#hsl
[`hsla()`]: ../functions/colors#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)
2018-09-01 22:35:20 +02:00
<% 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!
2018-09-01 22:35:20 +02:00
<% 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/colors#mix
[scaling their hue, saturation, or lightness]: ../functions/colors#scale-color
<% example(autogen_css: false) do %>
$venus: #998099;
2018-09-01 22:35:20 +02:00
@debug scale-color($venus, $lightness: +15%); // #a893a8
@debug mix($venus, midnightblue); // #594d85
===
$venus: #998099
2018-09-01 22:35:20 +02:00
@debug scale-color($venus, $lightness: +15%) // #a893a8
@debug mix($venus, midnightblue) // #594d85
2018-09-01 22:35:20 +02:00
<% end %>