Sassの色指定をlighten/darkenでするときに便利すぎな「Sass Color Generator」

Sassには便利なカラーコントロール機能があるんですが、そのカラーコントロールをする際に、えらく便利なジェネレーターがありました。

Sass Color Generator」というそのものズバリな名前なんですが、このジェネレーターを使えば想定した色にするための指定数値が見える化されますよ。

Sassのカラーコントロール機能

まずは、Sassのカラーコントロールについて触れておきましょう。
Sassコーディングには変数が利用できます。SCSSファイル上で、その変数を使って色を規定することができるようになっているんです。

$color-text:#525252;
$color-background:#f0f0f0;

このように$から始まる変数に色(カラーコード ※RGBA指定も可能)を規定し、あとはCSSで色指定したいところに当該の変数を使うだけです。

$color-text:#525252;
$color-background:#f0f0f0;

body {
	color:$color-text;
	background:$color-background;
}

こうしておくことで、色を変えたいときは変数に規定したカラーコードを変えれば、変数を指定した全ての値が一括変更されるわけです。これはとても便利。

で、この応用と言うべきなのがカラーコントロール機能。
明度を示すlighten/darken、彩度を示すsaturate/desaturateを用いてパーセント指定してやるだけで、同系色でまとまりのある配色を作っていくことができます。

上記例で言うと、テキストカラーと背景色は同系色になるので、以下のようにすることができます。

$color-text:#525252;

body {
	color:$color-text;
	background:lighten($color-text, 62%);
}

もしくは、

$color-text:darken($color-background, 62%);
$color-background:#f0f0f0;

body {
	color:$color-text;
	background:$color-background;
}

これをCSSにコンパイルすると、

body {
	color:#525252;
	background:#f0f0f0;
}

となります。うーん簡単。

「Sass Color Generator」で見える化

とは言え、パーセント指定だとはっきりした色がわかりにくいですよね。
そんなときに使えるのが今回紹介する「Sass Color Generator」です。

Sass Color Generator
http://scg.ar-ch.org/

使い方はとっても簡単です。めちゃくちゃ簡単です。

Sass Color Generator

ベースとなるカラーコード、それとパーセンテージの数値を入力してやるだけで、さくっと入力数値によって出力された各色とカラーコードが表示されます。
入力するパーセンテージの数値の倍数で出力されるようになっていて、5%と入力した場合は、5の倍数のカラーだけが表示されるようになっています。

Sass Color Generator

もちろん彩度も生成されるようになっていますよ。

配色の基本はベースとなる色の明度や彩度でまとめていくことなので、配色が苦手という人はSassのカラーコントロールを活用するといいと思います。

Sassを使っていない人も明度、彩度で同系色のまとまった配色をするなら、このジェネレーターはかなり重宝するんじゃないでしょうか?