# Color Maninpulations in CSS

Given the base set of color values for a single color:

    :root {
      --h: 100;
      --s: 50%;
      --l: 50%;
      --hsl: var(--h), var(--s), var(--l);
      --hslf: hsl(var(--hsl));
    }

You can play with color in any of the following ways.

## Alpha Channel

### Base color with variations using the alpha channel

    background-color: hsla(
      var(--hsl),
      1
    );

    background-color: hsla(
      var(--hsl),
      .8
    );

    background-color: hsla(
      var(--hsl),
      .6
    );

    background-color: hsla(
      var(--hsl),
      .4
    );

    background-color: hsla(
      var(--hsl),
      .2
    );

## Sass Color Function Equivalents

### `adjust-hue`

    background-color: hsl(
      var(--h),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      calc(var(--h) + 72),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      calc(var(--h) + 144),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      calc(var(--h) + 216),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      calc(var(--h) + 288),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      calc(var(--h) + 360),
      var(--s),
      var(--l)
     );

### `saturate`

    background-color: hsl(
      var(--h),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) + 10%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) + 20%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) + 30%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) + 40%),
      var(--l)
     );

### `desaturate`

    background-color: hsl(
      var(--h),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) - 10%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) - 20%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) - 30%),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      calc(var(--s) - 40%),
      var(--l)
     );

### `lighten`

    background-color: hsl(
      var(--h),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) + 10%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) + 20%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) + 30%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) + 40%)
     );

### `darken`

    background-color: hsl(
      var(--h),
      var(--s),
      var(--l)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) - 10%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) - 20%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) - 30%)
     );

    background-color: hsl(
      var(--h),
      var(--s),
      calc(var(--l) - 40%)
     );