「カラログ」におまかせ配色機能を追加しました

「カラログ」におまかせ配色機能を追加しました

2013年11月6日
Memo

先日リリースした配色パターン作成サイト「カラログ」に、調和のとれたサブカラーを選んでくれる「おまかせ配色機能」を追加しました。
機能の解説と仕組みなどご紹介します。

［Ad］

Contents

どんな機能？

レイアウト選択ボックスの横にある「おまかせ配色」のボタンをクリックすると、背景の色をベースにして、
・コンテンツ背景色はベースより明るい色
・フッター背景色はベースより暗い色
・ナビ背景色とサブメニュー背景色は類似色相色または対照色相色
と選択してくれる機能です。

「使いたい色は決まってるけど、合う色が思いつかない…」なんて時の参考にしてみてはいかがでしょうか。

調和のとれた配色について

色には、色相、彩度、明度があります。
このうちの彩度や明度はそのままに、色相だけを変えた色を選ぶと比較的調和のとれた配色をしやすいと言われています。

おまかせ配色はその方法をもとに「Analogy（アナロジー）」と「Opornent（オポーネント）」の２パターンを用意しました。
これはそれぞれ、類似色相配色（色相差30～45度）、対照色相配色（色相差120～150度）とよばれるもので、比較的調和のとりやすい配色といわれています。
やってみるとわかると思いますが、けっこう無難な配色、になります。

Analogy（アナロジー）

cololog2_analogy

Opornent（オポーネント）

cololog2_opornent

「Analogy（アナロジー）」や「Opornent（オポーネント）」など、配色については、以下のサイトが分かりやすくて参考になりました。
みずねこ色彩研究所

「調和のとれた色」ではありますが、計算上調和がとれているとされる色なので、頭をひねる配色が出てくることもあります。
なので「これこそが調和のとれた色だ！」と縛られずに、色々と試してみてくださいね。

JavaScriptで調和のとれた色を計算する

今回の機能を実装するにあたり、どうしてもHSB→RGB→HEXといった計算をしていかねばならず、色々調べて試してみましたが、綺麗な色が出ずにちょっと詰みました。
が、フォームにカラーピッカーを実装するColorPicker.JSを覗いたら、綺麗な計算式が。
JS読み込ませてるから呼び出して使えるかなーと思ったら使えなかったので、必要な部分を抜き出し＆改変して使ったりしてます。
カラログに組み込む前につくったおまかせ配色サンプルは以下の通り。

おまかせ配色：SAMPLE

詳細はソース等見てください。

色の計算メモ

ググっては試しググっては試し、と色々やったけど、結局以下の関数が思う通りの数字出してくれました。
今後使うこともあるかもなのでメモ。
HEXからHSBにしたいときは、一度RGBに直してからRGBをHEXに（逆も同じ）するべし。

// hexをRGBに
var hexToRgb = function (inHex) {
	R = inHex.substr(0,2);R = parseInt(R,16);
	G = inHex.substr(2,2);G = parseInt(G,16);
	B = inHex.substr(4,2);B = parseInt(B,16);
	return {r: R, g: G, b: B};
}
// hexをHSBに
var hexToHsb = function (hex) {
	return rgbToHsb(hexToRgb(hex));
}
// RGBをHSBに
var rgbToHsb = function (rgb) {
	var hsb = {
		h: 0,
		s: 0,
		b: 0
	};
	var min = Math.min(rgb.r, rgb.g, rgb.b);
	var max = Math.max(rgb.r, rgb.g, rgb.b);
	var delta = max - min;
		hsb.b = max;
	if (max != 0) {

	}
	hsb.s = max != 0 ? 255 * delta / max : 0;
	if (hsb.s != 0) {
		if (rgb.r == max) {
			hsb.h = (rgb.g - rgb.b) / delta;
		} else if (rgb.g == max) {
			hsb.h = 2 + (rgb.b - rgb.r) / delta;
		} else {
			hsb.h = 4 + (rgb.r - rgb.g) / delta;
		}
	} else {
		hsb.h = -1;
	}
	hsb.h *= 60;
	if (hsb.h < 0) {
		hsb.h += 360;
	}
	hsb.s *= 100/255;
	hsb.b *= 100/255;
	return hsb;
}

// hsbをhexに
var hsbToHex = function(hue, saturation, brightness){
	var rgb = {};
	var h = Math.round(hue);
	var s = Math.round(saturation*255/100);
	var v = Math.round(brightness*255/100);
	if(s == 0) {
		rgb.r = rgb.g = rgb.b = v;
	} else {
		var t1 = v;
		var t2 = (255-s)*v/255;
		var t3 = (t1-t2)*(h%60)/60;
		if(h==360) h = 0;
		if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
		else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
		else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
		else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
		else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
		else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
		else {rgb.r=0; rgb.g=0;	rgb.b=0}
	}
	return rgbToHex(Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b));
}

// RGBをhexに
var rgbToHex = function(r, g, b) {
	if(r >= 255){r = 255;}else if(r <= 0){r = 0;}
	if(g >= 255){g = 255;}else if(g <= 0){g = 0;}
	if(b >= 255){b = 255;}else if(b <= 0){b = 0;}
	var hex = [
			r.toString(16),
			g.toString(16),
			b.toString(16)
		];
		$.each(hex, function (nr, val) {
			if (val.length == 1) {
				hex[nr] = '0' + val;
			}
		});
	return hex.join('');
}

ちょっとだけパワーアップしたカラログ、今後ともよろしくお願い致します＠・ェ・＠

配色パターン作成サイト：カラログ
http://color.ark-under.net