> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/function/color/color.md).

# color()

The function `color()` returns the [**hsla()**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) color from the **four** CSS variables of the given [`$name`](#usdname-.bg-primary). The [`$name`](#usdname-.bg-primary) parameter can be passed as two-index list, where the second item is the [`$lightness`](#usdlightness-0), or can be passed as three-index list, where the third item is the [`$alpha`](#usdalpha-1).

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

{% code title="src/functions/\_color.function.scss" lineNumbers="true" %}

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

{% endcode %}

{% embed url="<https://github.com/angular-package/spectre.css/blob/master/src/functions/_color.scss>" %}

### Parameters

#### `$name`

A color name that exists as a CSS variable of a string or two/three-index [list](https://sass-lang.com/documentation/values/lists) type is passed to the [`color()`](/function/color/color.md) 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`](#usdlightness-0), and the third of the three-index list item refers to its [`$alpha`](#usdalpha-1).

#### `$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`](/variables/css-variable-name.md#usdvar-prefix).

## Example usage

```scss
@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.

{% embed url="<https://www.w3schools.com/css/css_colors_hsl.asp>" %}