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

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

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

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

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

このように$から始まる変数に色を規定し、あとは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 Generatorhttp://scg.ar-ch.org/

使い方はとっても簡単です。

Sass Color Generator

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

Sass Color Generator

もちろん彩度も生成されますよ。

配色の基本はベースとなる色の明度や彩度でまとめていくことなので、配色が苦手という人はSassのカラーコントロールを活用するといいと思います。
Sassを使っていない人も明度、彩度で同系色のまとまった配色をするなら、このジェネレーターはかなり重宝するんじゃないでしょうか?

Commentsコメントしてもらえると励みになります