Sassメモ: 色（カラー値）を扱う

Color 型変数の定義方法

CSS では下記のような色の指定方法があります。

color: red;                      // 定数名で指定
color: #ff0000;                  // 16進数で指定
color: rgb(255, 0, 0);           // 10進数で指定
color: rgba(255, 0, 0, 0.3);     // 10進数で指定（α値あり）
color: hsl(0, 100%, 50%);        // HSL指定
color: hsla(0, 100%, 50%, 0.3);  // HSL指定（α値あり）

CSS の rgba 関数は、上記のように4つのパラメータをとりますが、Sass の rgba 関数はより柔軟なパラメータ指定が可能になっています。

color: rgba(red, 0.3);       // 定数名 + α値
color: rgba(#ff0000, 0.3);   // 16進数 + α値

また、Sass では名前付きパラメータを使って値を指定できるので、各パラメータの意味を明確にすることができます。

color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);  // 赤になる

色を表す定数の一覧

Sass スクリプトの中で色を表現する方法としては、#ff00ff のような16進数での指定方法以外にも、下記のように色を表す定数を使用する方法があります。

$my-color: magenta;  // Color型の変数を定義
$my-color: #ff00ff;  // 同上

色を表す定数には下記のようなものが用意されています。

アルファ値に関しては、上記のようにすべて 0xff (255) の不透過になっています。 アルファ値部分だけを変更したい場合は、下記のように rgba 関数で指定することができます。

$my-color: rgba(red, 0.3);  // アルファ30%

色を調整するための関数

明度を調整する lighten() / darken()

lighten 関数、darken 関数を使用すると、ある色をパーセンテージ指定で明るくしたり暗くしたりすることができます。

彩度を調整する saturate() / desaturate()

saturate 関数、desaturate 関数を使用すると、ある色の彩度をパーセンテージ指定で上げたり下げたりすることができます。

2つの色の中間色を作成する mix()

mix 関数を使用すると、指定した2色の中間色を作成することができます。 第3引数（$weight パラメータ）を使って、1色目の比率を指定することもできます（デフォルトは 50%）。