# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.