色選びでもう迷わない!配色の定石パターン

よっしー


色選びでもう迷わない!配色の定石パターン

最近、チャリを手に入れた。しかも、新品のやつだ。前にかごもついてて、後ろに荷台もついてる!さらに鍵もついてる至れり尽くせりな優れものだが、どういうわけかチリンチリンがついてないんだ!なんでついてないんだチリンチリン!必要だろチリンチリン!人ごみとかこう、かきわけ、あ、どうも、僕です。

今日は色選びで迷わないための配色の定石パターンについて書こうと思うよ!

その前に色の表現方法の基礎知識についてちょっと勉強しようね!

色の表現方法

色とは、可視光線の波長の違いによって、
人間の目に存在する細胞が反応し、
脳に伝わって認知する現象のことを言うわけですが、

まあ、そんなめんどいことはおいといて、
色とは「赤」とか「青」とか「緑」とかそういうもののことをいうわけですな。

ちなみに色を識別する細胞は目の中心部分に集中してて、
視野の外周部分の色って実は実際には見えてなくて、
脳が視界を認知する際に補完してるんだよ!

HTMLのコーディングをやったことがある人は、
色の指定とかで「#FFFFFF」とかご覧になったことがあるかと思います。
これはそれぞれ赤、緑、青を2桁の16進数の256段階で示しており、
全部を混ぜ合わせると白色になります。

こういう色の表現方法を「加法混色」とか「RGB表記」といいます。

PCのディスプレイには1ピクセルが赤、緑、青の光を発する素子が組み込まれていて、
指定された強度で光を発することで加法混色して、
色を表現しているわけです。

これがコンピュータ的に分かりやすい色指定の仕方。

ちなみに人間の目は緑色を感じる細胞が一番多くて、
画像をモノクロに変換するときにも緑が最も重視されます。
むしろ赤とか青はおまけぐらいの強度です。

画像をモノクロにする計算式とか超簡単なんだけど、
それはよそでググってみてください。

人間に分かりやすい色の表現方法

RGB表記はコンピュータ的に分かりやすい表現ですが、
人間が認識しやすい色の表現方法があって、
それがHSV色空間です。

HSV色空間では、色相、彩度、明度っていう尺度で色を表します。

色相(H)は簡単に言うと色の種類。青系とか、赤系とか、そんな感じ。
彩度(S)は色の鮮やかさ。
明度(V)は色の明暗を表しているよ!

人間的な色の認知の仕方としては、
RGBとかそんなコンピュータ的な数値を使うのではなく、

  • その色が何系の色なのか
  • どれぐらい鮮やかなのか
  • どれぐらいの明暗なのか

で判断しているということだね。

PhotoshopとかIllustratorとか、
画像処理系のアプリ触ったことある人にはおなじみかもしれない。

あの、色が円のようになっていて、
それでいてこう、鮮やかさとか、明暗とか選べる、
って、スクリーンショット貼付けた方が早いよ!

マンセルの色相環

マンセルの色相環

そうそうこんなやつ。
色が円の上で変化してるやつね。
この絵は色相だけだけど、
これに彩度と明暗が加わります。

あと、Webサイトだと、HUE/260が色相環から配色が選べて便利!

配色で色をピックアップするときには、
RGBよりHSVで考えた方がしっくりくるし、
パターンにも当てはめやすいのです。

鉄板の配色パターン

実際に使える鉄板の配色パターンを紹介しようと思うよ!

モノクロマティックカラースキーム

配色パターンとしてお手軽で鉄板なのは、
色相環で一色だけを選択し、明度と彩度を変える方法。
これはモノクロマティックカラースキームと言われる配色パターンです。

モノクロカラースキーム

モノクロカラースキーム

アナログカラースキーム

彩度と明度の値を固定して、
色相だけ変えるというものです。

色相と明度が同じ色の組み合わせのことを、
トーンが同じ色とか言います。

お手軽なのが、色相環でメインカラーを選び、
それに近い色をピックアップするパターン。
これはアナログカラースキームと呼ばれるパターンで、
全体的にまとまったムードになります。

アナログカラースキーム

アナログカラースキーム

コンプリメンタリーカラースキーム

次に紹介するのが、コンプリメンタリーカラースキームというパターン。
色相環でメインカラーを選び、
それと180度反対側の色をアクセントとして使用する配色です。

ちなみに、色相環で180度反対側の色のことを、
「補色」といいます。

この補色をちょこっと入れると、
その部分がいい感じに目立って、お手軽だけど、
それらしい感じの配色になります!

メインカラーと補色の2色だけでも、
かなりそれらしい感じになります!

コンプリメンタリーカラースキーム

コンプリメンタリーカラースキーム

マンセルの色相環で遊んでみる(おまけ)

トーンを固定する配色パターンをご紹介したわけですが、
このテクニックを使って、エンジニアらしく、
ちょっと遊んでみたいと思います。

RGBとHSV色空間を相互変換して、
トーンを固定した配色の背景を、
マンセルの色相環上でぐりぐりさせてみましょう!

RGBからHSVに変換するJavaScriptはこんな感じ。

/**
 * 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の相互変換はほかにもいろんな応用が利くから試してみて!

以上、よっしーでした!

関係ないけど、ローラとトリンドルって見分けつかないよね。

よっしー
この記事を書いた人
よっしー

プログラマー

おすすめ記事

Recommended by