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

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

よっしー

よっしー

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

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

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

色の表現方法

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

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

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

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

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

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

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

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

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

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

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度反対側の色のことを、
「補色」といいます。

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

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

<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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

どうも僕です!ジェイさんのエンジニア募集のツイートを見て、のこのこと面接にきて採用されたのが僕だ。Twitterは気軽にフォローしてね!「@mas_yda」僕は寂しがってますよ!もう一度言う。僕は寂しがってますよ!関係ないけど、石原さとみっていいよね。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL