【SCSS】色を変更できる便利な関数まとめ

こんにちは。すずきです。

この記事では、SCSSの色を変更する関数で、自分がよく使うものをまとめました。
SCSSでは色の明度などを自動で計算して出力してくれますので、コーディングを効率的に行うことができます。

こんな人にオススメ

• CSSで色を毎回記述するのがめんどう
• 色の管理を簡単にしたい
• CSSの中で、簡単に色を作成したい

よく使う変数一覧

以下がSCSSの色を変更する関数で、よく使用するものです。
$primaryという変数に基本となる色を入れ、関数で変更しています。

$primary: #42a5f5;

// -----------------------------------------------------------------
//明度を変える
// -----------------------------------------------------------------
.lighten-color {
  background-color: lighten($primary, 20%);
}
.darken-color {
  background-color: darken($primary, 20%);
}

// -----------------------------------------------------------------
//彩度を変える
// -----------------------------------------------------------------
.desaturate-color {
  background-color: desaturate($primary, 20%);
}
.saturate-color {
  background-color: saturate($primary, 20%);
}

// -----------------------------------------------------------------
//色相を変える
// -----------------------------------------------------------------
.adjust-hue-color {
  background-color: adjust-hue($primary, 60deg);
}

// -----------------------------------------------------------------
//透明度を変える
// -----------------------------------------------------------------
.rgba-color {
  background-color: rgba($primary, 0.2);
}

明度を変える

lighten、darkenを使うことで色の明度を変えることができます。
個人的にはhover時の色の変更などに使用しています。

lighten(元となる色, 上昇値(%) )で記述します。

$primary: #42a5f5;
.base-color {
  background-color: $primary;
}

// -----------------------------------------------------------------
//明度を変える
// -----------------------------------------------------------------
.lighten-color {
  background-color: lighten($primary, 20%);
}
.darken-color {
  background-color: darken($primary, 20%);
}

lighten-color
（#a3d3fa）

base-color
(#42a5f5)

darken-color
(#0b72c6)

彩度を変える

saturate、desaturateを使うことで色の彩度を変えることができます。
落ち着いた色合いが欲しい場合などに使用しています。

こちらもlightenと同じく、元となる色と変化率を%で記述します。

$primary: #42a5f5;
.base-color {
  background-color: $primary;
}

// -----------------------------------------------------------------
//彩度を変える
// -----------------------------------------------------------------
.desaturate-color {
  background-color: desaturate($primary, 20%);
}
.saturate-color {
  background-color: saturate($primary, 20%);
}

desaturate-color
(#56a3e1)

base-color
(#42a5f5)

saturate-color
（#38a6ff）

色相を変える

adjust-hueを使うことで色相を変えることができます。
同じトーンの別の色が必要な時や、複数の色が必要な時などに使用しています。

今まで%表記でしたが、こちらは度数表記(deg)で記述します。

$primary: #42a5f5;
.base-color {
  background-color: $primary;
}

// -----------------------------------------------------------------
//色相を変える
// -----------------------------------------------------------------
.adjust-hue-color1 {
  background-color: adjust-hue($primary, -60deg);
}
.adjust-hue-color2 {
  background-color: adjust-hue($primary, 60deg);
}

adjust-hue-color1
（#42f592）

base-color
(#42a5f5)

adjust-hue-color2
(#9242f5)

透明度を変える

CSSでもbackground-color: rgba();の記述はありましたが、RGB値で記述する必要がありました。
しかし、SCSSでは16進数で記述できるので、格納した変数をそのまま使用することができます。

$primary: #42a5f5;
.base-color {
  background-color: $primary;
}

// -----------------------------------------------------------------
//透明度を変える
// -----------------------------------------------------------------
.rgba-color1 {
  background-color: rgba($primary, 0.2);
}
.rgba-color2 {
  background-color: rgba($primary, 0.8);
}

rgba-color1
rgba(66, 165, 245, 0.2)

rgba-color2
rgba(66, 165, 245, 0.8)

base-color
(#42a5f5)

終わりに

SCSSで色を変更できる関数のうち、個人的によく使用するものを紹介しました。

CSSで色を設定していると、変更があった際に全て手作業で変更する必要があります。
しかしSCSSの変数で設定しておけば、基準となる色を変更すれば全て自動で変更してくれます。

他にも色を変更できる関数はあるので、新しく覚え次第更新していきます。