> 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/css-color-classes/background-colors.md).

# Background colors

### Based on CSS variable

In the original [Spectre.css](https://picturepan2.github.io/spectre/), the background color is based on the [SCSS variable](https://sass-lang.com/documentation/variables), but in the [`@angular-package/spectre.css`](https://www.npmjs.com/package/@angular-package/spectre.css) it is based on the [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). It is set by the modified [`bg-color-variant()`](/mixin/color/bg-color-variant.md) mixin, to use the [`color()`](/function/color/color.md) function to set the `background` and `color` style, and the SCSS variable is used to add the color property `light-color` the same way by checking whether the lightness of the SCSS variable is below **`60`**.

```scss
@if (lightness($hex-color) < 60) {
  color: color('light-color');
}
```

For example to add `.bg-accent` CSS class color that uses CSS variable `accent-color`.

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

// Include
@include bg-color-variant('.bg-accent', 'accent-color', $accent-color);
```

### Naming consistency

All colors have equivalent background CSS classes even with `dark` and `light` shades. [Spectre.css](https://picturepan2.github.io/spectre/) backgrounds are using the same SCSS variable name as the class name except one `.bg-gray`, which uses `$bg-color`. [@angular-package/spectre.css](https://www.npmjs.com/package/@angular-package/spectre.css) version modified it, now `$bg-color` SASS variable is used in the new background `.bg` and `.bg-bg` class, and `.bg-gray` uses `$gray-color` to have consistent naming. The class name does not include suffix `color`, but there is one exception in the `.bg-color`, which includes.

It's because of the SCSS variable `$bg-color` below, its shades, and treating prefix `bg` like not a color name, but it is the color name.

```scss
$bg-color: lighten($dark-color, 75%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
```

If I want to create background CSS class color `.bg-dark`, it should refer to the SCSS variable `$dark-color` to preserve naming consistency, but it can refer also to the `$bg-color-dark` with losing consistency. In the **`beta`** version, I decided to add the `.bg-bg` background class name to have full naming consistency, so the non-consistent `.bg-color` is treated as deprecated.

&#x20;Let's look at how CSS background class colors finally are defined.

### Core colors

{% code title="src/\_variables.scss" %}

```scss
// Accent
@include bg-color-variant('accent', 'accent-color', $accent-color);

// Primary.
@include bg-color-variant('primary', 'primary-color', $primary-color);
@include bg-color-variant('primary-dark', 'primary-color-dark', $primary-color-dark);
@include bg-color-variant('primary-light', 'primary-color-light', $primary-color-light);

// Secondary.
@include bg-color-variant('secondary', 'secondary-color', $secondary-color);
@include bg-color-variant('secondary-dark', 'secondary-color-dark', $secondary-color-dark);
@include bg-color-variant('secondary-light', 'secondary-color-light', $secondary-color-light);
```

{% endcode %}

### Shades

{% code title="src/\_variables.scss" %}

```scss
@include bg-color-variant('dark', 'dark-color', $dark-color);
@include bg-color-variant('light', 'light-color', $light-color);
```

{% endcode %}

### Gray colors

{% code title="src/\_variables.scss" %}

```scss
@include bg-color-variant('gray', 'gray-color', $gray-color);
@include bg-color-variant('gray-dark', 'gray-color-dark', $gray-color-dark);
@include bg-color-variant('gray-light', 'gray-color-light', $gray-color-light);
```

{% endcode %}

### Link colors

{% code title="src/\_variables.scss" %}

```scss
@include bg-color-variant('link', 'link-color', $link-color);
@include bg-color-variant('link-dark', 'link-color-dark', $link-color-dark);
@include bg-color-variant('link-light', 'link-color-light', $link-color-light);
```

{% endcode %}

### Body colors

{% code title="" %}

```scss
@include bg-color-variant('body', 'body-bg-color', $body-bg-color);
```

{% endcode %}

### Bg colors

{% code title="src/\_variables.scss" %}

```scss
// @include bg-color-variant('.bg', 'bg-color', $bg-color); // @deprecated
@include bg-color-variant('bg', 'bg-color', $bg-color);
@include bg-color-variant('bg-dark', 'bg-color-dark', $bg-color-dark);
@include bg-color-variant('bg-light', 'bg-color-light', $bg-color-light);

@include bg-color-variant('color', 'bg-color', $bg-color); // @deprecated
@include bg-color-variant('color-dark', 'bg-color-dark', $bg-color-dark); // @deprecated
@include bg-color-variant('color-light', 'bg-color-light', $bg-color-light); // @deprecated
```

{% endcode %}

### Control colors

{% code title="src/\_variables.scss" %}

```scss
@include bg-color-variant('disabled', 'disabled-color', $disabled-color);
@include bg-color-variant('error', 'error-color', $error-color);
@include bg-color-variant('info', 'info-color', $info-color);
@include bg-color-variant('success', 'success-color', $success-color);
@include bg-color-variant('warning', 'warning-color', $warning-color);
```

{% endcode %}

### Other colors

{% code title="src/\_variables.scss" %}

```scss
@include bg-color-variant('.bg-code', 'code-color');
@include bg-color-variant('.bg-highlight', 'highlight-color');
```

{% endcode %}

{% embed url="<https://angular-package.dev/ui-kit/utility/color>" %}
Click to see demonstration
{% endembed %}

{% embed url="<https://sass-lang.com/documentation/variables>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties>" %}