Scss　カラーコードを操作するための色関数まとめ

Scssでよく使われるカラーコードの操作について解説します。

Scssで色を扱う方法は色々あると聞いたのですが、どんな関数があるのでしょうか？

RGB値の変換や色相の操作、色の結合など、Scssには多くの色関数があります。代表的なものをまとめたので紹介しましょう。

10進数のRGB形式の色を16進数のRGB値（#RGB）に変換

10進数で表されたRGB形式の色を、16進数のRGB値（#RGB）に変換します。例えば、RGB(255, 0, 0)は#FF0000に変換されます。

$red: rgb(255, 0, 0);
$red-hex: #{ $red }; // #FF0000

10進数または16進数のRGBA形式の色を10進数のRGBA形式（rgba(R,G,B,A)）に変換

10進数または16進数で表されたRGBA形式の色を、10進数のRGBA形式（rgba(R,G,B,A)）に変換します。例えば、#FF0000FFはrgba(255, 0, 0, 1)に変換されます。

$red-hex: #FF0000FF;
$red-rgba: rgba($red-hex); // rgba(255, 0, 0, 1)

カラーコードから明度を指定して10進数のRGB値（#RGB）に変換

カラーコードから明度を指定して、10進数のRGB値（#RGB）に変換します。例えば、$color: #FF0000; adjust-color($color, $lightness: -50%)は#800000に変換されます。

$color: #FF0000;
$darken-color: adjust-color($color, $lightness: -50%); // #800000

カラーコードから彩度を指定して10進数のRGB値（#RGB）に変換

カラーコードから彩度を指定して、10進数のRGB値（#RGB）に変換します。例えば、$color: #FF0000; adjust-color($color, $saturation: -50%)は#BF4040に変換されます。

$base-color: #8BC34A;
$saturate-color: adjust-color($base-color, $saturation: 20%);
$desaturate-color: adjust-color($base-color, $saturation: -20%);

　上記の例では、 $base-color 変数には #8BC34A のカラーコードを代入しています。$saturate-color 変数には、 $base-color の彩度を 20% 増やした色を代入しています。$desaturate-color 変数には、 $base-color の彩度を 20% 減らした色を代入しています。

カラーコードから透明度を指定して10進数のRGBA形式に変換

以下は、カラーコードから透明度を指定して10進数のRGBA形式に変換する方法です。

$color: #FF0000;
$rgba-color: rgba($color, 0.5); // rgba(255, 0, 0, 0.5)

カラーコードから10進数として赤、緑、青を取り出す

カラーコードからRGB値を取り出すには、red()、green()、blue()を使います。これらの関数は、10進数の数値を返します。

$color: #FF0000;
$red: red($color); // 255
$green: green($color); // 0
$blue: blue($color); // 0

色の反転

色の各要素を255から引いて反転させることで、色を反転させます。invert()関数を使用して、色を反転させることができます。この関数は引数として1つの色を受け取り、その色の各要素を255から引いて反転させます。

$color: #2196F3;
$invert-color: invert($color);

.element {
  background-color: $color;
  color: $invert-color;
}

上記のサンプルプログラムでは、$color変数に格納された青色を持つカラーコード #2196F3 を、背景色として使用しています。そして、invert()関数を用いて $color 変数の色を反転させた $invert-color 変数を作成し、$invert-color 変数を文字色として使用しています。

色のグレースケール

色の各要素を平均化してグレースケール化します。

grayscale()関数を使用することで、色をグレースケール化することができます。この関数は引数として1つの色を受け取り、その色の各要素を平均化してグレースケール化します。

$color: #2196F3;
$gray-color: grayscale($color);

.element {
  background-color: $color;
  color: $gray-color;
}

上記のサンプルプログラムでは、$color変数に格納された青色を持つカラーコード #2196F3 を、背景色として使用しています。そして、grayscale()関数を用いて $color 変数の色をグレースケール化した $gray-color 変数を作成し、$gray-color 変数を文字色として使用しています。

色相の補色（色相環で正反対に位置する色）

色相の補色とは、色相環においてある色と正反対に位置する色のことです。例えば、赤と緑、青とオレンジなどが補色の関係にあります。CSSやSCSSでは、hue()関数を使って色相を指定することができます。

hue()関数に色相を指定した場合、その色の補色を計算することができます。

// 赤の補色である青を取得する
$red: #ff0000;
$complementary-color: hue($red) + 180;
// $complementary-colorの値は 240 になります（180度足した結果）

// グラデーションの始点と終点の補色を計算して、グラデーションを作成する
$color-1: #ff0000; // 赤
$color-2: #00ff00; // 緑
$gradient: linear-gradient(to right, $color-1, $color-2);

// 補色の色相を取得する関数
@function complementary-color($color) {
  @return hue($color) + 180;
}

複数の色を混在して中間色を取得

複数の色を混在して、それらの色の中間色を求めることができます。SCSSには、mix()関数を使用することで、複数の色を混在させた中間色を求めることができます。

// 赤と青を混ぜた紫の色を取得する
$red: #ff0000;
$blue: #0000ff;
$purple: mix($red, $blue);

// 複数の色を混在して、重み付けして中間色を計算する
$color-1: #ff0000;
$color-2: #0000ff;
$mix-percentage: 50%; // 50%ずつ混ぜ合わせる
$intermediate-color: mix($color-1, $color-2, $mix-percentage);

色を混ぜる（結合する）

SCSSで色を混ぜる方法は、mix()関数を使用することです。この関数は、2つの色とその割合を指定することで、2つの色を混ぜて新しい色を作成することができます。

mix()関数の書式は以下の通りです。

mix($color1, $color2, $weight)

$color1と$color2には、混ぜる2つの色を指定します。$weightには、どの程度の割合で混ぜるかを指定します。この値は、0から100の範囲で指定することができます。値が大きいほど、$color2の割合が増えます。

以下のサンプルプログラムでは、赤色(#ff0000)と青色(#0000ff)を50:50の割合で混ぜた色を作成します。

$color1: #ff0000;
$color2: #0000ff;

.mix-color {
  background-color: mix($color1, $color2, 50%);
}

この場合、$color1と$color2の割合を50:50に指定しています。mix()関数によって新しい色が生成され、.mix-colorクラスの背景色として設定されます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

Scssの色関数について、RGB値の変換や演算方法について解説しました。

Scssの色関数を使いこなすことで、Web開発において色に関する多くの処理を簡単に行うことができます。ぜひこの記事を参考に、Scssの色関数について学び、開発の効率を上げていきましょう。