mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
208 lines
7.7 KiB
Plaintext
208 lines
7.7 KiB
Plaintext
---
|
|
title: Color Functions
|
|
---
|
|
|
|
<% function <<SIGNATURE, returns: 'color' do
|
|
adjust-color($color,
|
|
$red: null, $green: null, $blue: null,
|
|
$hue: null, $saturation: null, $lightness: null,
|
|
$alpha: null)
|
|
SIGNATURE
|
|
%>
|
|
Increases or decreases one or more properties of `$color` by fixed amounts.
|
|
|
|
The value passed for each keyword is added to the corresponding property of the
|
|
color, and the adjusted color is returned. It's an error to specify an RGB
|
|
property (`$red`, `$green`, and/or `$blue`) at the same time as an HSL property
|
|
(`$hue`, `$saturation`, and/or `$alpha`).
|
|
|
|
All optional arguments must be numbers. The `$red`, `$green`, and `$blue`
|
|
arguments must be [unitless][] and between -255 and 255 (inclusive). The `$hue`
|
|
argument must have either the unit `deg` or no unit. The `$saturation` and
|
|
`$lightness` arguments must be between `-100%` and `100%` (inclusive), and may
|
|
be unitless. The `$alpha` argument must be unitless and between -1 and 1
|
|
(inclusive).
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
See also:
|
|
|
|
* [`scale-color()`](#scale-color) for fluidly scaling a color's properties.
|
|
* [`change-color()`](#change-color) for setting a color's properties.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug adjust-color(#6b717f, $red: 15); // #7a717f
|
|
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
|
|
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)
|
|
===
|
|
@debug adjust-color(#6b717f, $red: 15) // #7a717f
|
|
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10) // #c8e1e7
|
|
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4) // rgba(71, 57, 71, 0.6)
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% function 'adjust-hue($color, $degrees)', returns: 'color' do %>
|
|
Increases or decreases `$color`'s hue.
|
|
|
|
The `$hue` must be a number between `-360deg` and `360deg` (inclusive) to add to
|
|
`$color`'s hue. It may be [unitless][].
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
See also [`adjust-color()`](#adjust-color), which can adjust any property of a
|
|
color.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
// This will produce a color with hue 180deg.
|
|
@debug adjust-hue(hsl(120deg, 30%, 90%), 60deg); // #deeded
|
|
|
|
// This will produce a color with hue 60deg.
|
|
@debug adjust-hue(hsl(120deg, 30%, 90%), -60deg); // #ededde
|
|
|
|
// #036 has hue 210deg, so the result has hue 255deg.
|
|
@debug adjust-hue(#036, 45); // #1a0066
|
|
===
|
|
// This will produce a color with hue 180deg.
|
|
@debug adjust-hue(hsl(120deg, 30%, 90%), 60deg) // #deeded
|
|
|
|
// This will produce a color with hue 60deg.
|
|
@debug adjust-hue(hsl(120deg, 30%, 90%), -60deg) // #ededde
|
|
|
|
// #036 has hue 210deg, so the result has hue 255deg.
|
|
@debug adjust-hue(#036, 45) // #1a0066
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% function 'alpha($color)', 'opacity($color)', returns: 'color' do %>
|
|
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][].
|
|
|
|
[unquoted string]: ../documentation/values/strings#unquoted
|
|
|
|
<% example(autogen_css) do %>
|
|
@debug alpha(#e1d7d2); // 1
|
|
@debug alpha(rgb(210, 225, 221, 0.4)); // 0.4
|
|
@debug alpha(opacity=20); // alpha(opacity=20)
|
|
===
|
|
@debug alpha(#e1d7d2) // 1
|
|
@debug alpha(rgb(210, 225, 221, 0.4)) // 0.4
|
|
@debug alpha(opacity=20) // alpha(opacity=20)
|
|
<% end %>
|
|
<% end %>
|
|
|
|
alpha($color) / opacity($color) : Gets the alpha component (opacity) of a color.
|
|
blue($color) : Gets the blue component of a color.
|
|
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) : Changes one or more properties of a color.
|
|
complement($color) : Returns the complement of a color.
|
|
darken($color, $amount) : Makes a color darker.
|
|
desaturate($color, $amount) : Makes a color less saturated.
|
|
grayscale($color) : Converts a color to grayscale.
|
|
green($color) : Gets the green component of a color.
|
|
|
|
<% function 'hsl($hue, $saturation, $lightness)', returns: 'color' do %>
|
|
Returns a color with the given [hue, saturation, and lightness][] and the given
|
|
alpha channel.
|
|
|
|
[hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV
|
|
|
|
The hue is a number between `0deg` and `360deg` (inclusive). The saturation and
|
|
lightness are numbers between `0%` and `100%` (inclusive). All these numbers may
|
|
be [unitless][].
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug hsl(210deg, 100%, 20%); // #036
|
|
@debug hsl(34, 35%, 92%); // #f2ece4
|
|
===
|
|
@debug hsl(210deg, 100%, 20%) // #036
|
|
@debug hsl(34, 35%, 92%) // #f2ece4
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% function 'hsla($hue, $saturation, $lightness, $alpha)', returns: 'color' do %>
|
|
<% impl_status dart: true, libsass: false, ruby: '3.7.0' do %>
|
|
LibSass and older versions of Ruby Sass don't support alpha values specified as
|
|
percentages.
|
|
<% end %>
|
|
|
|
Returns a color with the given [hue, saturation, and lightness][].
|
|
|
|
[hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV
|
|
|
|
The hue is a number between `0deg` and `360deg` (inclusive). The saturation and
|
|
lightness are numbers between `0%` and `100%` (inclusive). All these numbers may
|
|
be [unitless][]. 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
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug hsl(210deg, 100%, 20%, 50%); // rgba(0, 51, 102, 0.5)
|
|
@debug hsl(34, 35%, 92%, 0.5); // rgba(242, 236, 228, 0.2)
|
|
===
|
|
@debug hsl(210deg, 100%, 20%, 50%) // rgba(0, 51, 102, 0.5)
|
|
@debug hsl(34, 35%, 92%, 0.5) // rgba(242, 236, 228, 0.2)
|
|
<% end %>
|
|
<% end %>
|
|
|
|
hue($color) : Gets the hue component of a color.
|
|
ie-hex-str($color) : Converts a color into the format understood by IE filters.
|
|
invert($color, [$weight]) : Returns the inverse of a color.
|
|
lighten($color, $amount) : Makes a color lighter.
|
|
lightness($color) : Gets the lightness component of a color.
|
|
mix($color1, $color2, [$weight]) : Mixes two colors together.
|
|
opacify($color, $amount) / fade-in($color, $amount) : Makes a color more opaque.
|
|
red($color) : Gets the red component of a color.
|
|
|
|
<% function 'rgb($red, $green, $blue)', returns: 'color' do %>
|
|
Returns a color with the given red, green, and blue channels.
|
|
|
|
Each channel can be specified as either a [unitless][] number between 0 and 255
|
|
(inclusive), or a percentage between `0%` and `100%` (inclusive).
|
|
|
|
[unitless]: ../values/numbers#units
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug rgb(0, 51, 102); // #036
|
|
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
|
|
===
|
|
@debug rgb(0, 51, 102) // #036
|
|
@debug rgb(95%, 92.5%, 89.5%) // #f2ece4
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% function 'rgba($red, $green, $blue, $alpha)', returns: 'color' do %>
|
|
<% impl_status dart: true, libsass: false, ruby: '3.7.0' do %>
|
|
LibSass and older versions of Ruby Sass don't support alpha values specified as
|
|
percentages.
|
|
<% end %>
|
|
|
|
Returns a color with the given red, green, blue, and alpha channels.
|
|
|
|
The red, green, and blue channels can be specified as either a [unitless][]
|
|
number between 0 and 255 (inclusive), or a percentage between `0%` and `100%`
|
|
(inclusive). 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
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug rgba(0, 51, 102, 0.5); // rgba(0, 51, 102, 0.5)
|
|
@debug rgba(95%, 92.5%, 89.5%, 20%); // rgba(242, 236, 228, 0.2)
|
|
===
|
|
@debug rgba(0, 51, 102, 0.5) // rgba(0, 51, 102, 0.5)
|
|
@debug rgba(95%, 92.5%, 89.5%, 20%) // rgba(242, 236, 228, 0.2)
|
|
<% end %>
|
|
<% end %>
|
|
|
|
|
|
saturate($color, $amount) : Makes a color more saturated.
|
|
saturation($color) : Gets the saturation component of a color.
|
|
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) : Fluidly scales one or more properties of a color.
|
|
transparentize($color, $amount) / fade-out($color, $amount) : Makes a color more transparent.
|