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」というサイトが彩度・輝度で変更される色の確認に便利です

色を扱うサイト