# CSS variable color

### Structure and defining

Each **hex** color is in [**`hsla()`**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla) form defined by the [`define-color()`](https://spectrecss.angular-package.dev/mixin/var/define-color) mixin, split into **four** CSS variables, where suffix `h` indicates hue, `s` saturation, `l` lightness and `a` alpha.

The single CSS color is defined as follows.

```css
--#{$var-prefix}-#{$name}-color-h: hue($color)
--#{$var-prefix}-#{$name}-color-s: saturation($color)
--#{$var-prefix}-#{$name}-color-l: lightness($color)
--#{$var-prefix}-#{$name}-color-a: alpha($color)
```

The SCSS [`$var-prefix`](https://spectrecss.angular-package.dev/css-variable-name#usdvar-prefix) variable is to make CSS variable **unique**, `$name` is the color name and `$color` is the hex color to obtain hue, saturation, lightness and alpha.

{% hint style="info" %}
It's possible to customize the CSS variables' names with the SCSS variable [`$var-prefix`](https://spectrecss.angular-package.dev/css-variable-name#usdvar-prefix), which by default is set to **`s`**.
{% endhint %}

For example, the **`primary-color`** is built from the CSS variables based on hex **`#5755d9`**.

```css
--s-primary-color-h: 240.9090909091deg; // Hue.
--s-primary-color-s: 63.4615384615%; // Saturation.
--s-primary-color-l: 59.2156862745%; // Lightness.
--s-primary-color-a: 1; // Alpha.
```

It is core color and it's defined in the [`_core-colors.scss`](https://github.com/angular-package/spectre.css/blob/master/src/css-variables/_core-colors.scss) file.

```scss
@use '../mixins/define-color' as *;
@use '../variables' as *;

:root, :host {
  // Primary.
  @include define-color('primary-color', $primary-color); // #5755d9
  @include define-color-based-on('primary-color-dark', 'primary-color', $lightness: -3%); // darken($primary-color, 3%)
  @include define-color-based-on('primary-color-light', 'primary-color', $lightness: +3%); // lighten($primary-color, 3%)
}
```

Each color that is based on settable color is defined by the mixin [`define-color-based-on()`](https://spectrecss.angular-package.dev/mixin/var/define-color-based-on), and it's also split into **four** CSS variables, which values refer by using [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) CSS function to settable colors CSS property names, where suffix `h` indicates hue, `s` saturation, `l` lightness and `a` alpha.

For example `secondary-color` that based on `primary-color` is defined in both [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host) elements and built from the CSS variables as follows.

```css
--s-secondary-color-h: var(--s-primary-color-h);
--s-secondary-color-s: var(--s-primary-color-s);
--s-secondary-color-l: calc(var(--s-primary-color-l) + 37.5%);
--s-secondary-color-a: var(--s-primary-color-a);
```

CSS variables that are based on others are also defined in both [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) and [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host) elements, and `secondary-color` is also in the [`_core-colors.scss`](https://github.com/angular-package/spectre.css/blob/master/src/css-variables/_core-colors.scss) file.

```scss
@use '../mixins/define-color-based-on' as *;

:root, :host {
  // Secondary.
  @include define-color-based-on('secondary-color', 'primary-color', $lightness: +37.5%); // lighten($primary-color, 37.5%) !default;
  @include define-color-based-on('secondary-color-dark', 'secondary-color', $lightness: -3%); // darken($secondary-color, 3%) !default;
  @include define-color-based-on('secondary-color-light', 'secondary-color', $lightness: +3%); // lighten($secondary-color, 3%) !default;
}
```