color()

The function color() returns the hsla() color from the four CSS variables of the given $name. The $name parameter can be passed as two-index list, where the second item is the $lightness, or can be passed as three-index list, where the third item is the $alpha.

The function color() returns the hsla() color from a CSS variables of the given $name.

src/functions/_color.function.scss

@function color(
  $name,
  $hue: 0deg,
  $saturation: 0%,
  $lightness: 0%,
  $alpha: 0,
  $prefix: $var-prefix
) {
  @return hsla-color(
    $name,
    $hue,
    $saturation,
    $lightness,
    $alpha,
    $prefix
  );
}

spectre.css/_color.scss at master · angular-package/spectre.cssGitHub

Parameters

$name

A color name that exists as a CSS variable of a string or two/three-index list type is passed to the color() function to set the CSS variable's color name.

If name is passed as two-index list the first item refers to the CSS variable color name, the second refers to $lightness, and the third of the three-index list item refers to its $alpha.

$hue: 0deg

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. By default, it's set to 0deg.

$saturation: 0%

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. By default, it's set to 0%.

$lightness: 0%

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

$alpha: 1

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

$prefix: $var-prefix

The name's prefix of the four CSS variables, by default it's set to $var-prefix.

Example usage

@use 'node_modules/@angular-package/spectre.css/src/functions/color' as *;

.example-bg {
  background-color: color('secondary-color');
}

Source

Source of definitions hex, saturation, lightness, and alpha.

CSS HSL Colors