sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ
HSL［色相（Hue）、彩度（Saturation）、輝度（Lightness）］ベース
Photoshop等で使用されるHSB(HSV)［色相（Hue）、彩度（Saturation）、明度（Brightness・Value）］ではない
HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています
色相の変更
adjust-hue($color, $degrees)
色相環の度数($degrees)を○○degで指定
// ベースとなる色
$base-color: #79a5e0;
.adjust-hue {
color: adjust-hue($base-color, 60deg);
}
彩度の変更
saturate($color, $amount)
desaturate($color, $amount)
$amountを○○%で指定
// ベースとなる色
$base-color: #79a5e0;
// 彩度を上げる
.saturate {
color: saturate($base-color, 15%);
}
// 彩度を下げる
.desaturate {
color: desaturate($base-color, 15%);
}
輝度の変更
lighten($color, $amount)
darken($color, $amount)
$amountを○○%で指定
// ベースとなる色
$base-color: #999;
// 輝度を上げる
.lighten {
color: lighten($base-color, 15%);
}
// 輝度を下げる
.darken {
color: darken($base-color, 15%);
}
透明度の変更
rgba($color, $alpha)
// ベースとなる色
$base-color: #333;
// rgbaで透明度を変える
.rgba {
color: rgba($base-color, 0.8);
}
色の反転
invert($color)
// ベースとなる色
$base-color: #333;
// 色の反転
.invert {
color: invert($base-color);
}
グレースケールに変更
grayscale($color)
// ベースとなる色
$base-color: #79a5e0;
// グレースケール
.grayscale {
color: grayscale($base-color);
}
色相の補色(色相環の反対色)に変更
complement($color)
// ベースとなる色
$base-color: #79a5e0;
// 反対色
.complement {
color: complement($base-color);
}
2つのカラーコードの中間色
mix($color1, $color2, [$weight])
$weightを○○%で指定
// ベースとなる色
$base-color1: #fff;
$base-color2: #000;
.mix {
color: mix(#fff, #000);
}
作成される色の確認に便利なサイト
「Sass Color Generator」というサイトが彩度・輝度で変更される色の確認に便利です 