Sass(SCSS)でカラーの明度・彩度・色相・透明度などを%指定で変更できるカラー関数について、どんな種類があるのかをまとめてみました。
ちなみに、この「カラー関数」、英語サイトで「color function」と表記されていたので勝手にそう読んでいますが、公式の呼び方はわからないです。笑
//明度
lighten($color, 15%);
darken($color, 15%);
//彩度
saturate($color, 15%);
desaturate($color, 15%);
//色相
adjust-hue($color, 50deg);
//透明度・不透明度
transparentize( $color, 0.8 );
rgba( $color, 0.2 );
//白/黒とミックスさせる? (明度とだいたい同じ)
tint($color, 15%);
shade($color, 15%);こちらのサイトでそれぞれ詳しいことが説明されています。（英語のサイトです）
また、どのように色が変化しているかを実際に見ながら調節できる、「Sass Color Generator」というすごく便利なwebサービスもありますので、このようなサイトも活用するといいかもしれません！
