最近、チャリを手に入れた。しかも、新品のやつだ。前にかごもついてて、後ろに荷台もついてる！さらに鍵もついてる至れり尽くせりな優れものだが、どういうわけかチリンチリンがついてないんだ！なんでついてないんだチリンチリン！必要だろチリンチリン！人ごみとかこう、かきわけ、あ、どうも、僕です。
今日は色選びで迷わないための配色の定石パターンについて書こうと思うよ！
その前に色の表現方法の基礎知識についてちょっと勉強しようね！
色の表現方法
色とは、可視光線の波長の違いによって、
人間の目に存在する細胞が反応し、
脳に伝わって認知する現象のことを言うわけですが、
まあ、そんなめんどいことはおいといて、
色とは「赤」とか「青」とか「緑」とかそういうもののことをいうわけですな。
ちなみに色を識別する細胞は目の中心部分に集中してて、
視野の外周部分の色って実は実際には見えてなくて、
脳が視界を認知する際に補完してるんだよ！
HTMLのコーディングをやったことがある人は、
色の指定とかで「#FFFFFF」とかご覧になったことがあるかと思います。
これはそれぞれ赤、緑、青を2桁の16進数の256段階で示しており、
全部を混ぜ合わせると白色になります。
こういう色の表現方法を「加法混色」とか「RGB表記」といいます。
PCのディスプレイには１ピクセルが赤、緑、青の光を発する素子が組み込まれていて、
指定された強度で光を発することで加法混色して、
色を表現しているわけです。
これがコンピュータ的に分かりやすい色指定の仕方。
ちなみに人間の目は緑色を感じる細胞が一番多くて、
画像をモノクロに変換するときにも緑が最も重視されます。
むしろ赤とか青はおまけぐらいの強度です。
画像をモノクロにする計算式とか超簡単なんだけど、
それはよそでググってみてください。
人間に分かりやすい色の表現方法
RGB表記はコンピュータ的に分かりやすい表現ですが、
人間が認識しやすい色の表現方法があって、
それがHSV色空間です。
HSV色空間では、色相、彩度、明度っていう尺度で色を表します。
色相（H）は簡単に言うと色の種類。青系とか、赤系とか、そんな感じ。
彩度（S）は色の鮮やかさ。
明度（V）は色の明暗を表しているよ！
人間的な色の認知の仕方としては、
RGBとかそんなコンピュータ的な数値を使うのではなく、
- その色が何系の色なのか
- どれぐらい鮮やかなのか
- どれぐらいの明暗なのか
で判断しているということだね。
PhotoshopとかIllustratorとか、
画像処理系のアプリ触ったことある人にはおなじみかもしれない。
あの、色が円のようになっていて、
それでいてこう、鮮やかさとか、明暗とか選べる、
って、スクリーンショット貼付けた方が早いよ！
<img loading="lazy" class="size-full wp-image-4709" src="https://liginc.co.jp/wp-content/uploads/2012/12/MunsellColorCircle.png" alt="マンセルの色相環" width="512" height="512" /> マンセルの色相環[/caption]
そうそうこんなやつ。
色が円の上で変化してるやつね。
この絵は色相だけだけど、
これに彩度と明暗が加わります。
あと、Webサイトだと、<a href="http://hue360.herokuapp.com/" target="top">HUE/260</a>が色相環から配色が選べて便利！
配色で色をピックアップするときには、
RGBよりHSVで考えた方がしっくりくるし、
パターンにも当てはめやすいのです。
<h2>鉄板の配色パターン</h2>
実際に使える鉄板の配色パターンを紹介しようと思うよ！
<h4>モノクロマティックカラースキーム</h4>
配色パターンとしてお手軽で鉄板なのは、
色相環で一色だけを選択し、明度と彩度を変える方法。
これはモノクロマティックカラースキームと言われる配色パターンです。
<pre>[code]<img loading="lazy" class="size-full wp-image-4759" src="https://liginc.co.jp/wp-content/uploads/2012/12/mono-color-scheme.png" alt="モノクロカラースキーム" width="229" height="25" /> モノクロカラースキーム[/caption]
<h4>アナログカラースキーム</h4>
彩度と明度の値を固定して、
色相だけ変えるというものです。
色相と明度が同じ色の組み合わせのことを、
トーンが同じ色とか言います。
お手軽なのが、色相環でメインカラーを選び、
それに近い色をピックアップするパターン。
これはアナログカラースキームと呼ばれるパターンで、
全体的にまとまったムードになります。
<pre>[code]<img loading="lazy" class="size-full wp-image-4760" src="https://liginc.co.jp/wp-content/uploads/2012/12/analog-color-scheme.png" alt="アナログカラースキーム" width="245" height="26" /> アナログカラースキーム[/caption]
<h4>コンプリメンタリーカラースキーム</h4>
次に紹介するのが、コンプリメンタリーカラースキームというパターン。
色相環でメインカラーを選び、
それと180度反対側の色をアクセントとして使用する配色です。
ちなみに、色相環で180度反対側の色のことを、
「補色」といいます。
この補色をちょこっと入れると、
その部分がいい感じに目立って、お手軽だけど、
それらしい感じの配色になります！
メインカラーと補色の２色だけでも、
かなりそれらしい感じになります！
<pre>[code]<img loading="lazy" class="size-full wp-image-4761" src="https://liginc.co.jp/wp-content/uploads/2012/12/comp-color-sheme.png" alt="コンプリメンタリーカラースキーム" width="155" height="25" /> コンプリメンタリーカラースキーム[/caption]
<h2>マンセルの色相環で遊んでみる(おまけ)</h2>
トーンを固定する配色パターンをご紹介したわけですが、
このテクニックを使って、エンジニアらしく、
ちょっと遊んでみたいと思います。
RGBとHSV色空間を相互変換して、
トーンを固定した配色の背景を、
マンセルの色相環上でぐりぐりさせてみましょう！
RGBからHSVに変換するJavaScriptはこんな感じ。
<pre>[code]
/**
* Convert RGB to HSV format.
* @param array rgb RGB(red[0-255], green[0-255], blue[0-255]) format color of array.
* @return color HSV(hue[0-365], saturation[0-255], value[0-255]) format color of array.
*/
function convertRgbToHsv(rgb) {
if (!(rgb instanceof Array) || rgb.length < 3) return null;
var max = Math.max.apply(null, rgb);
var min = Math.min.apply(null, rgb);
var hue = 0;
if (max == min) {
hue = 0;
}
else if (rgb[0] >= rgb[1] && rgb[0] >= rgb[2]) {
hue = (60 * (rgb[1] - rgb[2]) / (max - min)) + 360;
}
else if (rgb[1] >= rgb[0] && rgb[1] >= rgb[2]) {
hue = (60 * (rgb[2] - rgb[0]) / (max - min)) + 120;
}
else if (rgb[2] >= rgb[0] && rgb[2] >= rgb[1]) {
hue = (60 * (rgb[1] - rgb[0]) / (max - min)) + 240;
}
hue %= 360;
var saturation = 0;
if (max == 0) {
saturation = 0;
}
else {
saturation = 255 * ((max - min) / max);
}
var value = max;
return new Array(hue, saturation, value);
}さらにHSVからRGBに変換するのはこんな感じ。
/**
* Convert HSV to RGB format.
* @param array hsv HSV(hue[0-365], saturation[0-255], value[0-255]) format color of array.
* @return color RGB(red[0-255], green[0-255], blue[0-255]) format color of array.
*/
function convertHsvToRgb(hsv) {
if (!(hsv instanceof Array) || hsv.length < 3) return null;
var i = Math.floor(hsv[0] / 60.0) % 6;
var f = (hsv[0] / 60.0) - Math.floor(hsv[0] / 60.0);
var m = (Math.round(hsv[2] * (1.0 - (hsv[1] / 255.0))));
var n = (Math.round(hsv[2] * (1.0 - (hsv[1] / 255.0) * f)));
var k = (Math.round(hsv[2] * (1.0 - (hsv[1] / 255.0) * (1.0 - f))));
var v = hsv[2];
var rgb = new Array(0, 0, 0);
switch (i) {
case 0 : rgb[0] = v; rgb[1] = k; rgb[2] = m; break;
case 1 : rgb[0] = n; rgb[1] = v; rgb[2] = m; break;
case 2 : rgb[0] = m; rgb[1] = v; rgb[2] = k; break;
case 3 : rgb[0] = m; rgb[1] = n; rgb[2] = v; break;
case 4 : rgb[0] = k; rgb[1] = m; rgb[2] = v; break;
case 5 : rgb[0] = v; rgb[1] = m; rgb[2] = n; break;
}
return rgb;
}線形近似変換だから厳密な値じゃないけど、
この式で近かりし値を得ることができるよ！
ちなみにこの関数を使ってタイマーで色相を変化させてやると、背景色をミラーボール見たいにぐりんぐりん変化させることができるよ！
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
/* RGB<=>HSV変換関数 (上の関数をコピペ) */
/**
* Converted to a string of hexadecimal color of the RGB.
* @param array rgb RGB(red[0-255], green[0-255], blue[0-255]) format color of array.
* @return color in a string of hexadecimal digits.
*/
function rgbToHex(rgb) {
var hex = "#";
for (var i = 0; i < 3; i++) {
var str = rgb[i].toString(16);
if (str.length == 1) {
str = "0" + str;
}
hex += str;
}
return hex;
}
function changeBackground() {
hsv[0] += 1; // 100msごとに色相を加算
rgb = convertHsvToRgb(hsv);
$("body").css("background-color", rgbToHex(rgb));
}
var rgb = new Array(255, 128, 128);
var hsv = convertRgbToHsv(rgb);
setInterval("changeBackground()", 100);
// ]]></script>できたサンプルはこんな感じ。
まとめ
配色パターンを知っているとなにかと便利だよね！
また、HSVとRGBの相互変換はほかにもいろんな応用が利くから試してみて！
以上、よっしーでした！
関係ないけど、ローラとトリンドルって見分けつかないよね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
