> 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>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://spectrecss.angular-package.dev/function/color/color.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.