diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss index 48f893fcc..108ac2b5e 100644 --- a/source/assets/sass/visual-design/_theme.scss +++ b/source/assets/sass/visual-design/_theme.scss @@ -32,6 +32,10 @@ body { color: var(--text, var(--sl-color--pale-sky)); } +.fade { + opacity: 0.7; +} + ::selection { background: var(--sl-color--iron); } diff --git a/source/documentation/values/colors.md b/source/documentation/values/colors.md index 0309d1041..b5fde43fb 100644 --- a/source/documentation/values/colors.md +++ b/source/documentation/values/colors.md @@ -1,77 +1,331 @@ --- title: Colors +table_of_contents: true --- -{% compatibility 'dart: "1.14.0"', 'libsass: "3.6.0"', 'ruby: "3.6.0"', 'feature: "Level 4 Syntax"' %} +{% compatibility 'dart: "1.78.0"', 'libsass: false', 'ruby: false', 'feature: "Color Spaces"' %} + LibSass, Ruby Sass, and older versions of Dart Sass don't support color spaces + other than `rgb` and `hsl`. +{% endcompatibility %} + +{% compatibility 'dart: "1.14.0"', 'libsass: false', 'ruby: "3.6.0"', 'feature: "Level 4 Syntax"' %} LibSass and older versions of Dart or Ruby Sass don't support [hex colors with an alpha channel][]. [hex colors with an alpha channel]: https://drafts.csswg.org/css-color/#hex-notation {% endcompatibility %} -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()`][]. +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()`]. [sRGB color space]: https://en.wikipedia.org/wiki/SRGB [color functions]: /documentation/modules/color -[HSL coordinates]: 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()`]: /documentation/modules#rgb -[`rgba()`]: /documentation/modules#rgba -[`hsl()`]: /documentation/modules#hsl -[`hsla()`]: /documentation/modules#hsla +[`lab()`]: /documentation/modules#lab +[`color()`]: /documentation/modules#color {% codeExample 'colors', false %} @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 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) === @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 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) {% endcodeExample %} -{% funFact %} - No matter how a Sass color is originally written, it can be used with both - HSL-based and RGB-based functions! -{% endfunFact %} +## Color Spaces + +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. + +[legacy color space]: #legacy-color-spaces +[`color.to-space()`]: /documentation/modules/color#to-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. + +{% headsUp %} + CSS requires that some color functions clip their input channels. For example, + `rgb(500 0 0)` clips its red channel to be within [0, 255] and so is + equivalent to `rgb(255 0 0)` even though `rgb(500 0 0)` is a distinct value + that Sass can represent. You can always use Sass's [`color.change()`] function + to set an out-of-gamut value for any space. + + [`color.change()`]: /documentation/modules/color#change +{% endheadsUp %} + +Following is a full list of all the color spaces Sass supports. You can read +learn about these spaces [on MDN]. + +[on MDN]: https://developer.mozilla.org/en-US/docs/Glossary/Color_space + +
Space | +Syntax | +Channels [min, max] | +
---|---|---|
rgb * |
+
+ rgb(102 51 153) + #663399 + rebeccapurple
+ |
+ + red [0, 255]; + green [0, 255]; + blue [0, 255] + | +
hsl * |
+ hsl(270 50% 40%) |
+ + hue [0, 360]; + saturation [0%, 100%]; + lightness [0%, 100%] + | +
hwb * |
+ hwb(270 20% 40%) |
+ + hue [0, 360]; + whiteness [0%, 100%]; + blackness [0%, 100%] + | +
srgb |
+ color(srgb 0.4 0.2 0.6) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
srgb-linear |
+ color(srgb-linear 0.133 0.033 0.319) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
display-p3 |
+ color(display-p3 0.374 0.21 0.579) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
a98-rgb |
+ color(a98-rgb 0.358 0.212 0.584) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
prophoto-rgb |
+ color(prophoto-rgb 0.316 0.191 0.495) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
rec2020 |
+ color(rec2020 0.305 0.168 0.531) |
+ + red [0, 1]; + green [0, 1]; + blue [0, 1] + | +
xyz , xyz-d65 |
+
+ color(xyz 0.124 0.075 0.309) + color(xyz-d65 0.124 0.075 0.309)
+ |
+ + x [0, 1]; + y [0, 1]; + z [0, 1] + | +
xyz-d50 |
+ color(xyz-d50 0.116 0.073 0.233) |
+ + x [0, 1]; + y [0, 1]; + z [0, 1] + | +
lab |
+ lab(32.4% 38.4 -47.7) |
+ + lightness [0%, 100%]; + a [-125, 125]; + b [-125, 125] + | +
lch |
+ lch(32.4% 61.2 308.9deg) |
+ + lightness [0%, 100%]; + chroma [0, 150]; + hue [0deg, 360deg] + | +
oklab |
+ oklab(44% 0.088 -0.134) |
+ + lightness [0%, 100%]; + a [-0.4, 0.4]; + b [-0.4, 0.4] + | +
oklch |
+ oklch(44% 0.16 303.4deg) |
+ + lightness [0%, 100%]; + chroma [0, 0.4]; + hue [0deg, 360deg] + | +