■

hsl(Hue, Saturation, Lightness) による指定が便利で、 scssなどで書いていると、コンパイル時RGBに直してくれるので、サポートしてないブラウザでも使えて便利。

例えば

@mixin interactive-button($hue, $saturation, $lightness) {
  background-color: hsl($hue, $saturation, $lightness);
  &:hover {
    background-color: hsl($hue, $saturation, $lightness * 1.15);
  }
  &:active {
    background-color: hsl($hue, $saturation, $lightness * 0.6);
  }
}

みたいなmixin書いてると、Hue, Saturation, Lightnessを一つ指定するだけで、hoverした時にちょっと明るくなって、押すと暗くなるみたいなボタンを作れて便利。

色を変数に入れておくときに

$some_color_hue: なんとか;
$some_color_saturation: なんとか;
$some_color_lightness: なんとか;
$some_color = hsl($some_color_hue, $some_color_saturation, $some_color_lightness);

みたいにしておくとそのまま使う時は $some_color で使えるし、ちょっと暗くして使いたいときは hsl($some_color_hue, $some_color_saturation, $some_color_lightness * 0.8) とかって感じで使えるし良い。