> 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/mixin/color/bg-color-variant.md).

# bg-color-variant()

The mixin contains the **two** CSS classes, the CSS class of the name prefixed with `bg-`, and prefixed `#{$prefix}-bg-` with the given [`$name`](#usdname-primary) that includes the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color of the given [`$color`](#usdcolor-primary-color) CSS variable name, and `color` style equal to `light-color` depending on whether the given SCSS variable [`$hex-color`](#usdhex-color-usdprimary-color) lightness is below **`60`**.

By default, [`$prefix`](#usdprefix-usdvar-prefix) is equal to the globally customizable [`$var-prefix`](/variables/css-variable-name.md#usdvar-prefix).

{% hint style="success" %}
The mixin contains additional CSS class that includes in its name global prefix `$var-prefix`. 

`.#{$prefix}-bg-#{$name}`
{% endhint %}

{% code title="src/mixins/color/\_bg-color-variant.mixin.scss" %}

```scss
@mixin bg-color-variant($name, $color, $hex-color, $prefix: $var-prefix) {
  .bg-#{$name},
  .#{$prefix}-bg-#{$name} {
    @include background($color, $important: !important);
    @if (lightness($hex-color) < 60) {
      @include color('light');
    }
  }
}
```

{% endcode %}

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

### Parameters

#### `$name: 'primary'`

The suffix for the name of the contained CSS class `.bg`, by default it is set to `primary`.

#### `$color: 'primary-color'`

A color name that exists as a CSS variable of a string type is passed to the [`color()`](/function/color/color.md) function to set the [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) color.

#### `$hex-color: $primary-color`

The hex color of the given [`$color`](#usdcolor-primary-color) CSS variable name is used to add `color` style equal to `light-color` depending on whether its lightness is below **`60`**. By default, it is set to the [`$primary-color`](/variables/colors/color-code.md#usdprimary-color).

#### `$prefix: $var-prefix`

The parameter is to customize the prefix of the second contained CSS class name. By default, it is set to the global SASS variable [`$var-prefix`](/variables/css-variable-name.md#usdvar-prefix).

## Example usage

```scss
// Get mixin.
@use 'node_modules/@angular-package/spectre.css/src/mixins/color' as *;


```