Edited at

Sassで色を調整する

More than 1 year has passed since last update.

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


色を扱うサイト