お絵描きホーホー論

理屈で絵が描ける事を証明する

デジタルイラストの色を調和させる配色パターン

配色の種類の紹介

この記事はデジタルイラストを描くための色彩理論概論の記事の続編として書いています。では、はじめに配色パターンの見方について定義しておきます。配色を構成する要素は色相・明度・彩度の3つです。そのうち明度・彩度はまとめてトーンとして考えます。そして色相・トーンはPCCSによってそれぞれ段階が定められています。色相は色相環として24段階、トーンは等色相面として12種類となっています。

色相とトーン

出典 IROUSE

配色は色相差やトーンの差を相対的に考えるので、ここからは下図を使って説明していきます。赤くなっている部分がその配色で使う色ということです。色相環の中心点は無彩色です。白(W)や黒(Bk)を使うことがあります。

a

これから配色パターンを一気に紹介していきますが、難しく考えずに知っておくと役に立つくらいに考えて読んでください。配色パターンは幾何学的な図で作ることができることが分かればとりあえずは儲け物だと思います。

色相差による配色パターン

配色名称 条件 関係図の例 配色例
同一色相配色 色相差0 a a
a
隣接色相配色 色相差1 a a
a
類似色相配色 色相差2,3 a a
a
中差色相配色 色相差4~7 a a
a
対照色相配色 色相差8~10 a a
a
補色色相配色 色相差11,12 a a
a
ダイアード 色相差12(補色) a a
スプリット・コンプリメンタリー 説明むずい
三角形の底辺は色相差2~4
a a
トライアド 色相差8 a a
テトラード 色相差6 a a
ペンタード 説明むずい
中心点はWとBk
a
a
a
ヘクサード 色相差4
中心点はWとBk
a
a
a

トーンの差による配色パターン

配色名称 条件 関係図の例 配色例
同一トーン配色 同じトーン a
a
a
a
類似トーン配色 隣合うトーン a
a
a
a
対照トーン配色 明度差・彩度差が対極のトーン a
a
a
a

実用的なのはここからですね。上で書いていた配色パターンは色相やトーンの組み合わせを総当たりで一覧したに過ぎません。今から紹介する配色パターンは総当たりではなく、目的の雰囲気の調和が得られるように考案された配色パターンです。下で紹介する限りではありませんが、これらのようなパターンがあるということは知っておきましょう。

色相・トーン差のによる配色パターン

配色名称 条件 関係図の例 配色例
ナチュラル・ハーモニー 見慣れの原理 a a
a
コンプレックス・ハーモニー 見慣れの原理の逆 a a
a
ドミナント・カラー 色相差0 a a
a
ドミナント・トーン 同一トーン a a
a
トーン・オン・トーン 色相差1~3
明度差
a a
a
トーン・イン・トーン 同一トーン, 類似トーン a a
a
トーナル配色 トーン:d, sf, ltg, g a a
a
カマイユ配色 同一色相, 隣接色相
同一トーン, 類似トーン
a a
a
フォカマイユ配色 類似色相
同一トーン, 類似トーン
a a
a
ビコロール トーン:v, W, Bk a a
a
トリコロール トーン:v, W, Bk a a
a

配色が調和する原理

ナチュラル・ハーモニー配色は、自然的な色の使い方によって調和しています。聞いた事があるかも知れませんが、自然界には見慣れの原理というものが存在し、これは光が当たっている部分の色相はやや黄色寄りになり、陰の部分の色相はやや青紫寄りになるというものです。おそらく太陽光が黄色帯びているため人間自身にそのような習慣が染み付いているんだと思います。強いて言えば陰部分が青紫寄りになるわけではなく、明るい部分が黄色寄りになっているために相対的に青紫寄りに感じるということでしょう。

配色を調和させるサンプル風景写真

前回のデジタルイラストを描くための色彩理論概論の記事で説明した陰部分を塗るときの3種類の方法を思い出してください。暗い色の作り方は①明度を下げる、②固有明度の低い色相で塗る、③明度を下げて固有明度の低い色相で塗る、という選択肢がありました。実はこのときの3つ目の方法は見慣れの原理に従っていることになります。まず明るい暗いをトーンで考え、そこから色相をずらします。リアルな塗りのイラストを描くときは見慣れの原理に従って色を選ぶのがセオリーです。

コンプレックス・ハーモニー配色は見慣れの原理に逆らった配色です。明るくも暗くもない中性的な配色になるので、落ち着いた雰囲気のビンテージっぽさがでます。見慣れの原理に逆らっているからといって現実に存在しない配色なわけではなくて、黄色い物が陰になっていたり青い物に光が当たっている場合などにあり得る配色です。デザインとしてこの配色にすると奇抜に思えるかも知れませんが、現実のシチュエーションを描くイラストの場合は普通の色使いということですね。

ドミナント・カラー配色はとてもCG向きの配色です。なぜなら色相を一つに統一するフィルターをかけるだけで調和が得られるからです。ドミナント・トーン配色も同じ考え方です。フィルターのイメージとしては、色相を統一するのはカラーフィルム越しに風景をみたり、トーンを統一するなら無彩色のサングラス越しに風景を見る感じです。

風景写真をドミナント・トーンで色相統一して調和

風景写真を明度と彩度でトーンを統一して調和

その他の配色も別に特別なわけではなく、近い色で調和させるか、対極の色で調和させるか、どの辺りの色で調和させるかというだけの話です。トーン・イン・トーン配色は色の変化をトーンの明度差のみに限定させたものです。トーン・イン・トーン配色やトーナル配色、さらにカマイユ配色・フォカマイユ配色も色相やトーンの変化を狭く限定したものです。ビコロール配色やトリコロール配色も同じように明確なコントラストが出るような色相とトーンを選択しているだけです。

つまり、これまで長々と多くの配色パターンを紹介してきたものを暗記する必要は皆無です。CGにはフィルターという便利な機能があるからです。塗り始めの段階の時点で配色を決定しなくても、ごく自然な感覚で塗ったイラストを後からフィルターで色調補正をかけることができます。色相・明度・彩度を変更する手順さえ覚えれば調和は得られるということです。自由にフィルターをかけるにはCGソフトの知識が必要ですが、レイヤーモードや色補正機能について押さえておけば十分対応できると思います。

CGソフトで配色を調和させる方法の予備知識

CGソフト上で色相を調節するには色補正ツールのうち、色相補正、カラーバランス、着色を使います。色相補正とカラーバランスは全体の色相の相対関係を維持したまま調節できるので、微妙に雰囲気を変える色調整レイヤーを作成するときなどに使えます。着色は全体を一つの色相に統一してしまうので、それを利用して色相差を小さくする調整レイヤーとして使えます。色相差を小さくできることは配色を落ち着けて調和を得らることができるということです。ドミナント・カラー配色やカマイユ配色にしたいときに役立つんじゃないでしょうか。

さきほどから調整レイヤーということを言っていますが、どのレイヤーモードを使えば目的の効果を得られるか把握しておく必要があります。レイヤーモードの種類は乗算に始まり、除算、加算、減算、スクリーン、覆い焼き、焼き込み、ハードライト、ソフトライトなどいろいろあって、適用させるレイヤーの色によって効果は千差万別なのでここで説明すると長たらしくなるので省略します。これについてはまた後日。そのときまでに、調和が取れているのかどうかを目測でなく数値で確かめる方法も考えときます。おそらくレベル補正ツールで表示されるヒストグラムで確認できると思います。ヒストグラムは画像の輝度の分布を表したグラフのことですが、CGソフトによってはRGBチャンネル別の色の強さも比較できます。写真家には必須の知識ですね。そしてヒストグラムの曲線が平坦であれば地味な配色になっているということでしょう。下図はさきほどの鳥居の写真のヒストグラムです。

レベル補正画面

もっと言えば色相も明度も彩度も、全体の調和も、基本的には目的のレイヤーモードで合成したレイヤーに色補正ツールで加工を施すことで調整します。さらに調和を持たらす方法は色を変化させるだけでなく、ぼかしフィルタをかけて合成することで得られるグロー効果やデフュージョン効果をを使って空気感を出す調和方法もあります。この辺りはかなりマニアックな使い方をしなければならないのでもっと勉強してからまとめようと思います。次の記事あたりで色相・明度・彩度を必要なだけ必要な方向に変化させる加工方法についてでも書きますか。

執筆者

村上豪一

理屈人間。お絵描きや作曲などの作品制作の理論化に挑戦中。独自開発の手法、「透視図法解剖図」「対角線分割法」「お絵描きのメカニズム」など。

Copyright © お絵描きホーホー論
∧ PAGE TOP