# Using CSS variable color

To easily use color defined in **four** CSS variables with the help comes [`color()`](https://spectrecss.angular-package.dev/function/color/color) function, which takes **six** parameters: `$name`, `$hue`, `$lightness`, `$saturation`, `$alpha`, and `$prefix`, and returns color in [**hsla()**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) form.

There is only `$name` parameter **required**, and the `$hue` `$lightness` `$saturation` default values are set to `0`, `$alpha` default value is set to `1`, and `$prefix` default value is equal to [`$var-prefix`](https://spectrecss.angular-package.dev/css-variable-name#usdvar-prefix). So, it's very easy to insert the color into any style and change the default value of the CSS variable color, for example `primary-color` or `primary-color-dark` can be inserted as follows.

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

.primary-color {
  background: color('primary-color');
}

.primary-color-dark {
  background: color('primary-color-dark');
}
```

With the optional parameters, it's possible to inject `primary-color` lighter or darker by **`30%`**, and it's useful, especially on mixing background with font color, and it works like [`darken()`](https://sass-lang.com/documentation/modules/color#darken) and [`lighten()`](https://sass-lang.com/documentation/modules/color#lighten), but with the ability to change the value on the fly cause of the CSS variables.

```scss
@use 'node_modules/@angular-package/spectre.css/functions' as *;

.primary-color-lighter {
  background: color('primary-color', $lightness: -30%);
  color: color('primary-color', $lightness: 30%);
}

.primary-color-darker {
  background: color('primary-color', $lightness: -30%);
}
```

There are other SASS variables besides colors, that have equivalent CSS variables and default prefix **`s`**.