2018-10-22 23:24:05 +02:00
|
|
|
---
|
2019-09-03 01:32:14 +02:00
|
|
|
title: sass:color
|
2018-10-22 23:24:05 +02:00
|
|
|
---
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<%= partial '../snippets/built-in-module-status' %>
|
|
|
|
|
|
|
|
<% function <<SIGNATURE, 'adjust-color(...)', returns: 'color' do
|
|
|
|
color.adjust($color,
|
2018-10-22 23:24:05 +02:00
|
|
|
$red: null, $green: null, $blue: null,
|
|
|
|
$hue: null, $saturation: null, $lightness: null,
|
2020-10-30 00:37:08 +01:00
|
|
|
$whiteness: null, $blackness: null,
|
2018-10-22 23:24:05 +02:00
|
|
|
$alpha: null)
|
|
|
|
SIGNATURE
|
|
|
|
%>
|
2020-10-30 00:37:08 +01:00
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false, feature: "$whiteness and $blackness" %>
|
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
Increases or decreases one or more properties of `$color` by fixed amounts.
|
|
|
|
|
|
|
|
Adds the value passed for each keyword argument to the corresponding property
|
|
|
|
of the color, and returns the adjusted color. It's an error to specify an RGB
|
|
|
|
property (`$red`, `$green`, and/or `$blue`) at the same time as an HSL
|
2020-10-30 00:37:08 +01:00
|
|
|
property (`$hue`, `$saturation`, and/or `$lightness`), or either of those at
|
|
|
|
the same time as an [HWB][] property (`$hue`, `$whiteness`, and/or
|
|
|
|
`$blackness`).
|
|
|
|
|
|
|
|
[HWB]: https://en.wikipedia.org/wiki/HWB_color_model
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
All optional arguments must be numbers. The `$red`, `$green`, and `$blue`
|
|
|
|
arguments must be [unitless][] and between -255 and 255 (inclusive). The
|
2020-10-30 00:37:08 +01:00
|
|
|
`$hue` argument must have either the unit `deg` or no unit. The `$saturation`,
|
|
|
|
`$lightness`, `$whiteness`, and `$blackness` arguments must be between `-100%`
|
2020-12-29 23:59:01 +01:00
|
|
|
and `100%` (inclusive), and may not be unitless. The `$alpha` argument must be
|
2020-10-30 00:37:08 +01:00
|
|
|
unitless and between -1 and 1 (inclusive).
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.scale()`](#scale) for fluidly scaling a color's properties.
|
|
|
|
* [`color.change()`](#change) for setting a color's properties.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.adjust(#6b717f, $red: 15); // #7a717f
|
|
|
|
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
|
|
|
|
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.adjust(#6b717f, $red: 15) // #7a717f
|
|
|
|
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10) // #c8e1e7
|
|
|
|
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4) // rgba(71, 57, 71, 0.6)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-22 23:24:05 +02:00
|
|
|
<% end %>
|
|
|
|
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-22 23:24:05 +02:00
|
|
|
<% function 'adjust-hue($color, $degrees)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Increases or decreases `$color`'s hue.
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$hue` must be a number between `-360deg` and `360deg` (inclusive) to add
|
2020-12-29 23:59:01 +01:00
|
|
|
to `$color`'s hue. It may be [unitless][] but it may not have any unit other
|
|
|
|
than `deg`.
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
[unitless]: ../values/numbers#units
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
See also [`color.adjust()`](#adjust), which can adjust any property of a
|
2018-10-23 22:42:40 +02:00
|
|
|
color.
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% heads_up do %>
|
|
|
|
Because `adjust-hue()` is redundant with [`adjust()`](#adjust), it's not
|
|
|
|
included directly in the new module system. Instead of
|
|
|
|
`adjust-hue($color, $amount)`, you can write
|
|
|
|
[`color.adjust($color, $hue: $amount)`](#adjust).
|
|
|
|
<% end %>
|
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Hue 222deg becomes 282deg.
|
|
|
|
@debug adjust-hue(#6b717f, 60deg); // #796b7f
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 164deg becomes 104deg.
|
|
|
|
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 210deg becomes 255deg.
|
|
|
|
@debug adjust-hue(#036, 45); // #1a0066
|
|
|
|
===
|
|
|
|
// Hue 222deg becomes 282deg.
|
|
|
|
@debug adjust-hue(#6b717f, 60deg) // #796b7f
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 164deg becomes 104deg.
|
|
|
|
@debug adjust-hue(#d2e1dd, -60deg) // #d6e1d2
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 210deg becomes 255deg.
|
|
|
|
@debug adjust-hue(#036, 45) // #1a0066
|
|
|
|
<% end %>
|
2018-10-22 23:24:05 +02:00
|
|
|
<% end %>
|
|
|
|
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.alpha($color)',
|
|
|
|
'alpha($color)',
|
|
|
|
'opacity($color)',
|
|
|
|
returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the alpha channel of `$color` as a number between 0 and 1.
|
|
|
|
|
|
|
|
As a special case, this supports the Internet Explorer syntax
|
|
|
|
`alpha(opacity=20)`, for which it returns an [unquoted string][].
|
|
|
|
|
2019-01-09 23:14:29 +01:00
|
|
|
[unquoted string]: ../values/strings#unquoted
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.alpha(#e1d7d2); // 1
|
|
|
|
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
|
2018-10-23 22:42:40 +02:00
|
|
|
@debug alpha(opacity=20); // alpha(opacity=20)
|
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.alpha(#e1d7d2) // 1
|
|
|
|
@debug color.opacity(rgb(210, 225, 221, 0.4)) // 0.4
|
2018-10-23 22:42:40 +02:00
|
|
|
@debug alpha(opacity=20) // alpha(opacity=20)
|
|
|
|
<% end %>
|
2018-10-22 23:24:05 +02:00
|
|
|
<% end %>
|
|
|
|
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2020-10-30 00:37:08 +01:00
|
|
|
<% function 'color.blackness($color)', returns: 'number' do %>
|
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false %>
|
|
|
|
|
|
|
|
Returns the [HWB][] blackness of `$color` as a number between `0%` and `100%`.
|
|
|
|
|
|
|
|
[HWB]: https://en.wikipedia.org/wiki/HWB_color_model
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
@debug color.blackness(#e1d7d2); // 11.7647058824%
|
|
|
|
@debug color.blackness(white); // 0%
|
|
|
|
@debug color.blackness(black); // 100%
|
|
|
|
===
|
|
|
|
@debug color.blackness(#e1d7d2) // 11.7647058824%
|
|
|
|
@debug color.blackness(white) // 0%
|
|
|
|
@debug color.blackness(black) // 100%
|
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.blue($color)', 'blue($color)', returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the blue channel of `$color` as a number between 0 and 255.
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.blue(#e1d7d2); // 210
|
|
|
|
@debug color.blue(white); // 255
|
|
|
|
@debug color.blue(black); // 0
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.blue(#e1d7d2) // 210
|
|
|
|
@debug color.blue(white) // 255
|
|
|
|
@debug color.blue(black) // 0
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function <<SIGNATURE, 'change-color(...)', returns: 'color' do
|
|
|
|
color.change($color,
|
2018-10-23 02:04:41 +02:00
|
|
|
$red: null, $green: null, $blue: null,
|
|
|
|
$hue: null, $saturation: null, $lightness: null,
|
2020-10-30 00:37:08 +01:00
|
|
|
$whiteness: null, $blackness: null,
|
2018-10-23 02:04:41 +02:00
|
|
|
$alpha: null)
|
|
|
|
SIGNATURE
|
|
|
|
%>
|
2020-10-30 00:37:08 +01:00
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false, feature: "$whiteness and $blackness" %>
|
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
Sets one or more properties of a color to new values.
|
|
|
|
|
|
|
|
Uses the value passed for each keyword argument in place of the corresponding
|
|
|
|
property of the color, and returns the changed color. It's an error to specify
|
|
|
|
an RGB property (`$red`, `$green`, and/or `$blue`) at the same time as an HSL
|
2020-10-30 00:37:08 +01:00
|
|
|
property (`$hue`, `$saturation`, and/or `$lightness`), or either of those at
|
|
|
|
the same time as an [HWB][] property (`$hue`, `$whiteness`, and/or
|
|
|
|
`$blackness`).
|
|
|
|
|
|
|
|
[HWB]: https://en.wikipedia.org/wiki/HWB_color_model
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
All optional arguments must be numbers. The `$red`, `$green`, and `$blue`
|
|
|
|
arguments must be [unitless][] and between 0 and 255 (inclusive). The `$hue`
|
2020-10-30 00:37:08 +01:00
|
|
|
argument must have either the unit `deg` or no unit. The `$saturation`,
|
|
|
|
`$lightness`, `$whiteness`, and `$blackness` arguments must be between `0%`
|
2020-12-29 23:59:01 +01:00
|
|
|
and `100%` (inclusive), and may not be unitless. The `$alpha` argument must be
|
2020-10-30 00:37:08 +01:00
|
|
|
unitless and between -1 and 1 (inclusive).
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.scale()`](#scale) for fluidly scaling a color's properties.
|
|
|
|
* [`color.adjust()`](#adjust) for adjusting a color's properties by fixed
|
2018-10-23 22:42:40 +02:00
|
|
|
amounts.
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.change(#6b717f, $red: 100); // #64717f
|
|
|
|
@debug color.change(#d2e1dd, $red: 100, $blue: 50); // #64e132
|
|
|
|
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.change(#6b717f, $red: 100) // #64717f
|
|
|
|
@debug color.change(#d2e1dd, $red: 100, $blue: 50) // #64e132
|
|
|
|
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5) // rgba(85, 68, 85, 0.5)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.complement($color)',
|
|
|
|
'complement($color)',
|
|
|
|
returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the RGB [complement][] of `$color`.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
This is identical to [`color.adjust($color, $hue: 180deg)`](#adjust).
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
[complement]: https://en.wikipedia.org/wiki/Complementary_colors
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Hue 222deg becomes 42deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#6b717f); // #7f796b
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 164deg becomes 344deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#d2e1dd); // #e1d2d6
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 210deg becomes 30deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#036); // #663300
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// Hue 222deg becomes 42deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#6b717f) // #7f796b
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 164deg becomes 344deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#d2e1dd) // #e1d2d6
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Hue 210deg becomes 30deg.
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.complement(#036) // #663300
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
|
|
<% function 'darken($color, $amount)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Makes `$color` darker.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$amount` must be a number between `0%` and `100%` (inclusive). Decreases
|
|
|
|
the HSL lightness of `$color` by that amount.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% heads_up do %>
|
|
|
|
The `darken()` function decreases lightness by a fixed amount, which is often
|
|
|
|
not the desired effect. To make a color a certain percentage darker than it was
|
2019-09-03 01:32:14 +02:00
|
|
|
before, use [`color.scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `darken()` is usually not the best way to make a color darker, it's
|
|
|
|
not included directly in the new module system. However, if you have to
|
|
|
|
preserve the existing behavior, `darken($color, $amount)` can be written
|
|
|
|
[`color.adjust($color, $lightness: -$amount)`](#adjust).
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
|
|
|
|
@debug darken(#036, 30%); // black
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% darker than it was originally.
|
|
|
|
@debug color.scale(#036, $lightness: -30%); // #002447
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
|
|
|
|
@debug darken(#036, 30%) // black
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% darker than it was originally.
|
|
|
|
@debug color.scale(#036, $lightness: -30%) // #002447
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Lightness 92% becomes 72%.
|
|
|
|
@debug darken(#b37399, 20%); // #7c4465
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 85% becomes 45%.
|
|
|
|
@debug darken(#f2ece4, 40%); // #b08b5a
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 20% becomes 0%.
|
|
|
|
@debug darken(#036, 30%); // black
|
|
|
|
===
|
|
|
|
// Lightness 92% becomes 72%.
|
|
|
|
@debug darken(#b37399, 20%) // #7c4465
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 85% becomes 45%.
|
|
|
|
@debug darken(#f2ece4, 40%) // #b08b5a
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 20% becomes 0%.
|
|
|
|
@debug darken(#036, 30%) // black
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
|
|
<% function 'desaturate($color, $amount)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Makes `$color` less saturated.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$amount` must be a number between `0%` and `100%` (inclusive). Decreases
|
|
|
|
the HSL saturation of `$color` by that amount.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% heads_up do %>
|
|
|
|
The `desaturate()` function decreases saturation by a fixed amount, which is
|
|
|
|
often not the desired effect. To make a color a certain percentage less
|
2019-09-03 01:32:14 +02:00
|
|
|
saturated than it was before, use [`color.scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `desaturate()` is usually not the best way to make a color less
|
|
|
|
saturated, it's not included directly in the new module system. However, if
|
|
|
|
you have to preserve the existing behavior, `desaturate($color, $amount)`
|
|
|
|
can be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
|
|
|
|
// returns gray.
|
|
|
|
@debug desaturate(#d2e1dd, 30%); // #dadada
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% less saturated than it was originally.
|
|
|
|
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
|
|
|
|
// returns gray.
|
|
|
|
@debug desaturate(#d2e1dd, 30%) // #dadada
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% less saturated than it was originally.
|
|
|
|
@debug color.scale(#6b717f, $saturation: -30%) // #6e727c
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Saturation 100% becomes 80%.
|
|
|
|
@debug desaturate(#036, 20%); // #0a335c
|
|
|
|
|
|
|
|
// Saturation 35% becomes 15%.
|
|
|
|
@debug desaturate(#f2ece4, 20%); // #eeebe8
|
|
|
|
|
|
|
|
// Saturation 20% becomes 0%.
|
|
|
|
@debug desaturate(#d2e1dd, 30%); // #dadada
|
|
|
|
===
|
|
|
|
// Saturation 100% becomes 80%.
|
|
|
|
@debug desaturate(#036, 20%) // #0a335c
|
|
|
|
|
|
|
|
// Saturation 35% becomes 15%.
|
|
|
|
@debug desaturate(#f2ece4, 20%) // #eeebe8
|
|
|
|
|
|
|
|
// Saturation 20% becomes 0%.
|
|
|
|
@debug desaturate(#d2e1dd, 30%) // #dadada
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.grayscale($color)',
|
|
|
|
'grayscale($color)',
|
|
|
|
returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns a gray color with the same lightness as `$color`.
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
This is identical to [`color.change($color, $saturation: 0%)`](#change).
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.grayscale(#6b717f); // #757575
|
|
|
|
@debug color.grayscale(#d2e1dd); // #dadada
|
|
|
|
@debug color.grayscale(#036); // #333333
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.grayscale(#6b717f) // #757575
|
|
|
|
@debug color.grayscale(#d2e1dd) // #dadada
|
|
|
|
@debug color.grayscale(#036) // #333333
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.green($color)', 'green($color)', returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the green channel of `$color` as a number between 0 and 255.
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-10-22 23:24:05 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.green(#e1d7d2); // 215
|
|
|
|
@debug color.green(white); // 255
|
|
|
|
@debug color.green(black); // 0
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.green(#e1d7d2) // 215
|
|
|
|
@debug color.green(white) // 255
|
|
|
|
@debug color.green(black) // 0
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-22 23:24:05 +02:00
|
|
|
<% end %>
|
|
|
|
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.hue($color)', 'hue($color)', returns: 'number' do %>
|
2020-05-11 18:40:13 +02:00
|
|
|
Returns the hue of `$color` as a number between `0deg` and `360deg`.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.hue(#e1d7d2); // 20deg
|
|
|
|
@debug color.hue(#f2ece4); // 34.2857142857deg
|
|
|
|
@debug color.hue(#dadbdf); // 228deg
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.hue(#e1d7d2) // 20deg
|
|
|
|
@debug color.hue(#f2ece4) // 34.2857142857deg
|
|
|
|
@debug color.hue(#dadbdf) // 228deg
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2020-12-01 19:05:53 +01:00
|
|
|
<% function 'color.hwb($hue $whiteness $blackness)',
|
|
|
|
'color.hwb($hue $whiteness $blackness / $alpha)',
|
|
|
|
'color.hwb($hue, $whiteness, $blackness, $alpha: 1)', returns: 'color' do %>
|
2020-10-30 00:37:08 +01:00
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false %>
|
|
|
|
|
|
|
|
Returns a color with the given [hue, whiteness, and blackness][] and the given
|
|
|
|
alpha channel.
|
|
|
|
|
|
|
|
[hue, whiteness, and blackness]: https://en.wikipedia.org/wiki/HWB_color_model
|
|
|
|
|
|
|
|
The hue is a number between `0deg` and `360deg` (inclusive). The whiteness and
|
|
|
|
blackness are numbers between `0%` and `100%` (inclusive). The hue may be
|
|
|
|
[unitless][], but the whiteness and blackness must have unit `%`. The alpha
|
|
|
|
channel can be specified as either a unitless number between 0 and 1
|
|
|
|
(inclusive), or a percentage between `0%` and `100%` (inclusive).
|
|
|
|
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
|
|
|
|
<% heads_up do %>
|
|
|
|
Sass's [special parsing rules][] for slash-separated values make it
|
|
|
|
difficult to pass variables for `$blackness` or `$alpha` when using the
|
2020-12-01 19:05:53 +01:00
|
|
|
`color.hwb($hue $whiteness $blackness / $alpha)` signature. Consider using
|
|
|
|
`color.hwb($hue, $whiteness, $blackness, $alpha)` instead.
|
2020-10-30 00:37:08 +01:00
|
|
|
|
|
|
|
[special parsing rules]: ../operators/numeric#slash-separated-values
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2020-12-01 19:05:53 +01:00
|
|
|
@debug color.hwb(210, 0%, 60%); // #036
|
|
|
|
@debug color.hwb(34, 89%, 5%); // #f2ece4
|
|
|
|
@debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)
|
2020-10-30 00:37:08 +01:00
|
|
|
===
|
2020-12-01 19:05:53 +01:00
|
|
|
@debug color.hwb(210, 0%, 60%) // #036
|
|
|
|
@debug color.hwb(34, 89%, 5%) // #f2ece4
|
|
|
|
@debug color.hwb(210 0% 60% / 0.5) // rgba(0, 51, 102, 0.5)
|
2020-10-30 00:37:08 +01:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.ie-hex-str($color)',
|
|
|
|
'ie-hex-str($color)',
|
|
|
|
returns: 'unquoted string' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns an unquoted string that represents `$color` in the `#AARRGGBB` format
|
|
|
|
expected by Internet Explorer's [`-ms-filter`][] property.
|
|
|
|
|
|
|
|
[`-ms-filter`]: https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-filter
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.ie-hex-str(#b37399); // #FFB37399
|
|
|
|
@debug color.ie-hex-str(#808c99); // #FF808C99
|
|
|
|
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.ie-hex-str(#b37399); // #FFB37399
|
|
|
|
@debug color.ie-hex-str(#808c99); // #FF808C99
|
|
|
|
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.invert($color, $weight: 100%)',
|
|
|
|
'invert($color, $weight: 100%)',
|
|
|
|
returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the inverse or [negative][] of `$color`.
|
|
|
|
|
|
|
|
[negative]: https://en.wikipedia.org/wiki/Negative_(photography)
|
|
|
|
|
|
|
|
The `$weight` must be a number between `0%` and `100%` (inclusive). A higher
|
|
|
|
weight means the result will be closer to the negative, and a lower weight means
|
|
|
|
it will be closer to `$color`. Weight `50%` will always produce `#808080`.
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.invert(#b37399); // #4c8c66
|
|
|
|
@debug color.invert(black); // white
|
|
|
|
@debug color.invert(#550e0c, 20%); // #663b3a
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.invert(#b37399) // #4c8c66
|
|
|
|
@debug color.invert(black) // white
|
|
|
|
@debug color.invert(#550e0c, 20%) // #663b3a
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
|
|
<% function 'lighten($color, $amount)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Makes `$color` lighter.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$amount` must be a number between `0%` and `100%` (inclusive). Increases
|
|
|
|
the HSL lightness of `$color` by that amount.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% heads_up do %>
|
|
|
|
The `lighten()` function increases lightness by a fixed amount, which is often
|
|
|
|
not the desired effect. To make a color a certain percentage lighter than it was
|
2019-09-03 01:32:14 +02:00
|
|
|
before, use [`scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `lighten()` is usually not the best way to make a color lighter,
|
|
|
|
it's not included directly in the new module system. However, if you have to
|
|
|
|
preserve the existing behavior, `lighten($color, $amount)` can be written
|
|
|
|
[`adjust($color, $lightness: $amount)`](#adjust).
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
|
|
|
|
@debug lighten(#e1d7d2, 30%); // white
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% lighter than it was originally.
|
|
|
|
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
|
|
|
|
@debug lighten(#e1d7d2, 30%) // white
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% lighter than it was originally.
|
|
|
|
@debug color.scale(#e1d7d2, $lightness: 30%) // #eae3e0
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Lightness 46% becomes 66%.
|
|
|
|
@debug lighten(#6b717f, 20%); // #a1a5af
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 20% becomes 80%.
|
|
|
|
@debug lighten(#036, 60%); // #99ccff
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 85% becomes 100%.
|
|
|
|
@debug lighten(#e1d7d2, 30%); // white
|
|
|
|
===
|
|
|
|
// Lightness 46% becomes 66%.
|
|
|
|
@debug lighten(#6b717f, 20%) // #a1a5af
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 20% becomes 80%.
|
|
|
|
@debug lighten(#036, 60%) // #99ccff
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
// Lightness 85% becomes 100%.
|
|
|
|
@debug lighten(#e1d7d2, 30%) // white
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.lightness($color)',
|
|
|
|
'lightness($color)',
|
|
|
|
returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the HSL lightness of `$color` as a number between `0%` and `100%`.
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.lightness(#e1d7d2); // 85.2941176471%
|
|
|
|
@debug color.lightness(#f2ece4); // 92.1568627451%
|
|
|
|
@debug color.lightness(#dadbdf); // 86.4705882353%
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.lightness(#e1d7d2) // 85.2941176471%
|
|
|
|
@debug color.lightness(#f2ece4) // 92.1568627451%
|
|
|
|
@debug color.lightness(#dadbdf) // 86.4705882353%
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.mix($color1, $color2, $weight: 50%)',
|
|
|
|
'mix($color1, $color2, $weight: 50%)',
|
|
|
|
returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns a number that's a mixture of `$color1` and `$color2`.
|
|
|
|
|
|
|
|
Both the `$weight` and the relative opacity of each color determines how much of
|
|
|
|
each color is in the result. The `$weight` must be a number between `0%` and
|
|
|
|
`100%` (inclusive). A larger weight indicates that more of `$color1` should be
|
|
|
|
used, and a smaller weight indicates that more of `$color2` should be used.
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.mix(#036, #d2e1dd); // #698aa2
|
|
|
|
@debug color.mix(#036, #d2e1dd, 75%); // #355f84
|
|
|
|
@debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
|
|
|
|
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.mix(#036, #d2e1dd) // #698aa2
|
|
|
|
@debug color.mix(#036, #d2e1dd, 75%) // #355f84
|
|
|
|
@debug color.mix(#036, #d2e1dd, 25%) // #9eb6bf
|
|
|
|
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f) // rgba(141, 144, 152, 0.75)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
|
|
<% function 'opacify($color, $amount)', 'fade-in($color, $amount)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Makes `$color` more opaque.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$amount` must be a number between `0` and `1` (inclusive). Increases the
|
|
|
|
alpha channel of `$color` by that amount.
|
|
|
|
|
|
|
|
<% heads_up do %>
|
|
|
|
The `opacify()` function increases the alpha channel by a fixed amount, which is often
|
|
|
|
not the desired effect. To make a color a certain percentage more opaque than it was
|
2019-09-03 01:32:14 +02:00
|
|
|
before, use [`scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `opacify()` is usually not the best way to make a color more opaque,
|
|
|
|
it's not included directly in the new module system. However, if you have to
|
|
|
|
preserve the existing behavior, `opacify($color, $amount)` can be written
|
|
|
|
[`adjust($color, $alpha: -$amount)`](#adjust).
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
|
|
|
|
// opaque color.
|
|
|
|
@debug opacify(rgba(#036, 0.7), 0.3); // #036
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more opaque than it was originally.
|
|
|
|
@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
|
|
|
|
// opaque color.
|
|
|
|
@debug opacify(rgba(#036, 0.7), 0.3) // #036
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more opaque than it was originally.
|
|
|
|
@debug color.scale(rgba(#036, 0.7), $alpha: 30%) // rgba(0, 51, 102, 0.79)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
|
|
|
|
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
|
|
|
|
@debug opacify(rgba(#036, 0.7), 0.3); // #036
|
|
|
|
===
|
|
|
|
@debug opacify(rgba(#6b717f, 0.5), 0.2) // rgba(107, 113, 127, 0.7)
|
|
|
|
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4) // rgba(225, 215, 210, 0.9)
|
|
|
|
@debug opacify(rgba(#036, 0.7), 0.3) // #036
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.red($color)', 'red($color)', returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the red channel of `$color` as a number between 0 and 255.
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-12-04 03:19:05 +01:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.red(#e1d7d2); // 225
|
|
|
|
@debug color.red(white); // 255
|
|
|
|
@debug color.red(black); // 0
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.red(#e1d7d2) // 225
|
|
|
|
@debug color.red(white) // 255
|
|
|
|
@debug color.red(black) // 0
|
2018-12-04 22:35:27 +01:00
|
|
|
<% end %>
|
2018-10-22 23:24:05 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'saturate($color, $amount)', 'saturate($color, $amount)', returns: 'color' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Makes `$color` more saturated.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
The `$amount` must be a number between `0%` and `100%` (inclusive). Increases
|
|
|
|
the HSL saturation of `$color` by that amount.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% heads_up do %>
|
|
|
|
The `saturate()` function increases saturation by a fixed amount, which is often
|
|
|
|
not the desired effect. To make a color a certain percentage more saturated than
|
2019-09-03 01:32:14 +02:00
|
|
|
it was before, use [`scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `saturate()` is usually not the best way to make a color more
|
|
|
|
saturated, it's not included directly in the new module system. However, if
|
|
|
|
you have to preserve the existing behavior, `saturate($color, $amount)` can
|
|
|
|
be written [`adjust($color, $saturation: $amount)`](#adjust).
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
|
|
|
|
// fully saturated.
|
|
|
|
@debug saturate(#0e4982, 30%); // #004990
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more saturated than it was originally.
|
|
|
|
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
|
|
|
|
// fully saturated.
|
|
|
|
@debug saturate(#0e4982, 30%) // #004990
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more saturated than it was originally.
|
|
|
|
@debug color.scale(#0e4982, $saturation: 30%) // #0a4986
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// Saturation 50% becomes 70%.
|
|
|
|
@debug saturate(#c69, 20%); // #e05299
|
|
|
|
|
|
|
|
// Saturation 35% becomes 85%.
|
|
|
|
@debug desaturate(#f2ece4, 50%); // #ebebeb
|
|
|
|
|
|
|
|
// Saturation 80% becomes 100%.
|
|
|
|
@debug saturate(#0e4982, 30%) // #004990
|
|
|
|
===
|
|
|
|
// Saturation 50% becomes 70%.
|
|
|
|
@debug saturate(#c69, 20%); // #e05299
|
|
|
|
|
|
|
|
// Saturation 35% becomes 85%.
|
|
|
|
@debug desaturate(#f2ece4, 50%); // #ebebeb
|
|
|
|
|
|
|
|
// Saturation 80% becomes 100%.
|
|
|
|
@debug saturate(#0e4982, 30%) // #004990
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function 'color.saturation($color)',
|
|
|
|
'saturation($color)',
|
|
|
|
returns: 'number' do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns the HSL saturation of `$color` as a number between `0%` and `100%`.
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.blue()`](#blue) for getting a color's blue channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
2020-10-30 00:37:08 +01:00
|
|
|
* [`color.whiteness()`](#whiteness) for getting a color's whiteness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.saturation(#e1d7d2); // 20%
|
|
|
|
@debug color.saturation(#f2ece4); // 30%
|
|
|
|
@debug color.saturation(#dadbdf); // 7.2463768116%
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.saturation(#e1d7d2) // 20%
|
|
|
|
@debug color.saturation(#f2ece4) // 30%
|
|
|
|
@debug color.saturation(#dadbdf) // 7.2463768116%
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
<% function <<SIGNATURE, 'scale-color(...)', returns: 'color' do
|
|
|
|
color.scale($color,
|
2018-10-23 02:04:41 +02:00
|
|
|
$red: null, $green: null, $blue: null,
|
|
|
|
$saturation: null, $lightness: null,
|
2020-10-30 00:37:08 +01:00
|
|
|
$whiteness: null, $blackness: null,
|
2018-10-23 02:04:41 +02:00
|
|
|
$alpha: null)
|
|
|
|
SIGNATURE
|
|
|
|
%>
|
2020-10-30 00:37:08 +01:00
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false, feature: "$whiteness and $blackness" %>
|
|
|
|
|
|
|
|
Fluidly scales one or more properties of `$color`.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
Each keyword argument must be a number between `-100%` and `100%` (inclusive).
|
|
|
|
This indicates how far the corresponding property should be moved from its
|
|
|
|
original position towards the maximum (if the argument is positive) or the
|
|
|
|
minimum (if the argument is negative). This means that, for example,
|
|
|
|
`$lightness: 50%` will make all colors `50%` closer to maximum lightness
|
|
|
|
without making them fully white.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
It's an error to specify an RGB property (`$red`, `$green`, and/or `$blue`) at
|
2020-10-30 00:37:08 +01:00
|
|
|
the same time as an HSL property (`$saturation`, and/or `$lightness`), or
|
|
|
|
either of those at the same time as an [HWB][] property (`$whiteness`, and/or
|
|
|
|
`$blackness`).
|
|
|
|
|
|
|
|
[HWB]: https://en.wikipedia.org/wiki/HWB_color_model
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
See also:
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.adjust()`](#adjust) for changing a color's properties by fixed
|
2018-10-23 22:42:40 +02:00
|
|
|
amounts.
|
2019-09-03 01:32:14 +02:00
|
|
|
* [`color.change()`](#change) for setting a color's properties.
|
2018-10-23 02:04:41 +02:00
|
|
|
|
2018-10-23 22:42:40 +02:00
|
|
|
<% example(autogen_css: false) do %>
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.scale(#6b717f, $red: 15%); // #81717f
|
|
|
|
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
|
|
|
|
@debug color.scale(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
2019-09-03 01:32:14 +02:00
|
|
|
@debug color.scale(#6b717f, $red: 15%) // #81717f
|
|
|
|
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%) // #b3d4cb
|
|
|
|
@debug color.scale(#998099, $alpha: -40%) // rgba(153, 128, 153, 0.6)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
|
|
|
|
<% function 'transparentize($color, $amount)', 'fade-out($color, $amount)', returns: 'color' do %>
|
|
|
|
Makes `$color` more transparent.
|
|
|
|
|
|
|
|
The `$amount` must be a number between `0` and `1` (inclusive). Decreases the
|
|
|
|
alpha channel of `$color` by that amount.
|
|
|
|
|
|
|
|
<% heads_up do %>
|
|
|
|
The `transparentize()` function decreases the alpha channel by a fixed amount,
|
|
|
|
which is often not the desired effect. To make a color a certain percentage more
|
2019-09-03 01:32:14 +02:00
|
|
|
transparent than it was before, use [`color.scale()`](#scale) instead.
|
|
|
|
|
|
|
|
Because `transparentize()` is usually not the best way to make a color more
|
|
|
|
transparent, it's not included directly in the new module system. However,
|
|
|
|
if you have to preserve the existing behavior,
|
|
|
|
`transparentize($color, $amount)` can be written
|
|
|
|
[`color.adjust($color, $alpha: -$amount)`](#adjust).
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
|
|
|
|
// returns a fully transparent color.
|
|
|
|
@debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more transparent than it was originally.
|
|
|
|
@debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)
|
2018-10-23 22:42:40 +02:00
|
|
|
===
|
|
|
|
// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
|
|
|
|
// returns a fully transparent color.
|
|
|
|
@debug transparentize(rgba(#036, 0.3), 0.3) // rgba(0, 51, 102, 0)
|
|
|
|
|
2019-09-03 01:32:14 +02:00
|
|
|
// scale() instead makes it 30% more transparent than it was originally.
|
|
|
|
@debug color.scale(rgba(#036, 0.3), $alpha: -30%) // rgba(0, 51, 102, 0.21)
|
2018-10-23 22:42:40 +02:00
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
@debug transparentize(rgba(#6b717f, 0.5), 0.2) // rgba(107, 113, 127, 0.3)
|
|
|
|
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4) // rgba(225, 215, 210, 0.1)
|
|
|
|
@debug transparentize(rgba(#036, 0.3), 0.3) // rgba(0, 51, 102, 0)
|
|
|
|
===
|
|
|
|
@debug transparentize(rgba(#6b717f, 0.5), 0.2) // rgba(107, 113, 127, 0.3)
|
|
|
|
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4) // rgba(225, 215, 210, 0.1)
|
|
|
|
@debug transparentize(rgba(#036, 0.3), 0.3) // rgba(0, 51, 102, 0)
|
|
|
|
<% end %>
|
2018-10-23 02:04:41 +02:00
|
|
|
<% end %>
|
2020-10-30 00:37:08 +01:00
|
|
|
|
|
|
|
|
|
|
|
<% function 'color.whiteness($color)', returns: 'number' do %>
|
|
|
|
<% impl_status dart: '1.27.0', libsass: false, ruby: false %>
|
|
|
|
|
|
|
|
Returns the [HWB][] whiteness of `$color` as a number between `0%` and `100%`.
|
|
|
|
|
|
|
|
[HWB]: https://en.wikipedia.org/wiki/HWB_color_model
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
|
|
|
* [`color.red()`](#red) for getting a color's red channel.
|
|
|
|
* [`color.green()`](#green) for getting a color's green channel.
|
|
|
|
* [`color.hue()`](#hue) for getting a color's hue.
|
|
|
|
* [`color.saturation()`](#saturation) for getting a color's saturation.
|
|
|
|
* [`color.lightness()`](#lightness) for getting a color's lightness.
|
|
|
|
* [`color.blackness()`](#blackness) for getting a color's blackness.
|
|
|
|
* [`color.alpha()`](#alpha) for getting a color's alpha channel.
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
@debug color.whiteness(#e1d7d2); // 82.3529411765%
|
|
|
|
@debug color.whiteness(white); // 100%
|
|
|
|
@debug color.whiteness(black); // 0%
|
|
|
|
===
|
|
|
|
@debug color.whiteness(#e1d7d2) // 82.3529411765%
|
|
|
|
@debug color.whiteness(white) // 100%
|
|
|
|
@debug color.whiteness(black) // 0%
|
|
|
|
<% end %>
|
|
|
|
<% end %>
|