RGB・CMYK・トーンなど色の基礎知識をデザイナーが解説｜配色のコツとおすすめの配色ツール

RGBやCMYKなど色の基礎知識は知っていても実践が難しいですが、知らないとさらにキツいです。

デザイナーでなくても、例えばスライド・プレゼンに使う配色を考えたり、社内や学校でチラシを作ったりする時に配色に悩んだりした機会もあると思います。色には様々な法則や原則などが存在しています。

そこで今回は「RGB・CMYK・トーン」などの様々な色に関する基礎知識と配色のコツを解説します。

▸RGBとCMYKの違いと使い分けについて

色表現の仕方は「RGBとCMYK」の2つあって、WEBでは「RGB」印刷では「CMYK」で考えます。

▸RGB（加法混色）とは？

RED・GREEN・BLUEの3色を混ぜ合わせて全ての色を表現する方法がRGB（加法混色）になります。

リアル世界の色の法則とは違っていて、赤・緑・青を混ぜ合わせると「白」になる法則の世界で色を表現していきます。赤・緑・青には「0～255」まで段階があって、全て255の状態が「白」を表現します。

RGBを使うと色をコードで表現できたり、WEBでは非常に便利な色表現なのでRGBが使われています。ただ、現実世界の色法則には則っていないので「RGB」のまま印刷を行うと色が変わってしまいます。

▸CMYK（減法混色）とは？

CYAN・MAGENTA・YELLOW・BLACKの4色で全て色を表現する方法がCMYK（減法混色）です。

リアル世界の色の法則に従ったのがコチラのCMYKなのですが、シアン・マゼンタ・イエローを混ぜると「黒」になる世界で色表現します。理論上「CMY」だけでOKなのですが「K」でキレイに仕上げます。

CMYKはそれぞれ濃度を「0～100」で表現していき、色が混ざるほどにどんどん暗くなっていきます。

印刷を前提としたデザイン物などは、最初からコチラの「CMYK」で作ると色の誤差が少なくなります。

▸色の三属性とトーンの関係性

▸色の三属性とは？

色相（Hue）・彩度（Saturation）・明度（Brightness）の3つから構成される色の考え方です。

この3つはかなり覚えにくいと思っていて、日本語だと非常に紛らわしいので英語で覚えてしまった方がいいと思います。私自身も「色相・彩度・明度」ってどれがどれだっけ？ってなった時期がありますね。

Hueは色合い・傾向を表していて、色の方向性はどうなのか色相環（色の種類）で示す大きな指針的な考え方です。Saturationは鮮やかさで、飽和・浸透という意味もあって、色がしみ込んでいく感じです。Brightnessは明るさで「白・黒」を表しています。この3つがどの程度なのか示せば色が決まります。

個人的に、特に分かりにくいと思うのが彩度（Saturation）と明度（Brightness）の関係性です。

彩度と明度の関係性は彩度が縦軸・明度が横軸の四角形で考えると分かりやすいです。たまに、三角形で示す場合もありますが、個人的には四角形で表現した方が理解しやすいかなと思うのでおすすめですね。

とにかく明度が0の場合には彩度に関わらず黒になるというのが四角形で示すと分かりやすい点です。

詳しく言えば四角形に近い形と三角形として彩度・明度を捉える方が正しい考え方です。主な3つの考え方として「マンセル表色系等色相面」「オストワルト表色系等色相面」「PCCS等色相面」があります。

上記の図は正しい等色相面では無いのですが、考え方として理解を促すための図になります。

マンセル表色系等色相面の場合には色相によって明度に対してどの位彩度の段階があるか（例えば黒は彩度を上げても黒なので1段階しかないという感じ）というのは変わってくるので、四角形でなくゴツゴツした凹凸のある形になります。今回は理解しやすさで四角形という形で「彩度・明度」を表現しました。

オストワルト表色系等色相面の場合には、明確には明度ではなく「白・黒」という色と純色で各色相の色を表現する形式になっていて、凸凹は無く全ての色相に対してキレイな三角形で表現する事ができます。

PCCS等色相面は日本のローカルの色形式ですが、マンセルの形式に近く明度・彩度によりゴツゴツとした形になります。「トーン」はコチラのPCCSの明度・彩度を組み合わせた形から作られた考え方です。

▸色相環について｜補色・近似色など

色相環とは色相を円状に並べたもので「黄・赤・紫・青・緑」という感じになります。

色相環で隣にある色を近似色と呼んで、反対にある色を補色と呼びます。近似色だとまとまりが出るし、補色を使うとメリハリが出るので、組み合わせを覚えて場面に合わせて使い分けるのが好ましいです。

ちなみに、先ほどの3方式によって色相環も異なっていて、色相の数や補色の組み合わせが異なります。

特に「マンセル」と「PCCS」の色相環では補色の捉え方が微妙に異なっていて、マンセルでは補色を合わせると無彩色（灰色）になる物理補色で、PCCSでは色の残像として見える心理補色になっています。

▸トーンってなに？

デザインとか色に関して「トーン」という言葉を聞く機会はあると思いますが実は簡単な概念です。

先ほどお話した「彩度・明度」の組み合わせの事を「トーン」と呼んで「彩度・明度」が一緒の色をトーンが合っていると表現します。色相は違っていても「彩度・明度」が一緒なら同じトーンという事です。

PCCSの分類ではトーンは17種類に分類されています。このトーン名を覚えておくと色の共通認識がしやすいので便利です。左上に行くほど可愛らしいイメージで、左下に行くほど落ち着いたイメージです。

▸色の知識を活用した配色のコツ

色の基礎知識をベースとして活用することで配色を論理的に上手く組み立てることが可能になります。

▸1色の場合｜ドミナントカラー＆トーン・オン・トーン配色

1色の場合ベースとなる色相を決めてその色相・近似色を固定して「明度・彩度」を調整し配色します。

ドミナントカラーの方がどっしりとその色で占有する感じの配色で、トーン・オン・トーンの方は色の統一感はあるものの軽やかなイメージの配色に仕上がります。1色メインだと色の統一感がありますね。

どの色相を選ぶのかというのは、ブランドイメージや色彩心理的なモノから決めるのがいいと思います。

色彩心理というのは、例えば「白：純真・清廉・広大・神秘的」の様な色から受けるイメージで、同じ様なデザインでも紫色を採用したより青色を採用した方が爽やかに見えるというのが心理的な影響ですね。

▸2色以上の場合｜ドミナントトーン＆トーン・イン・トーン配色

近似色ではなく2色以上使う場合には、トーンを固定して「色相」を調整して配色していきます。

このドミナントトーンとトーン・イン・トーンは違いが分かりにくいと思います。特に「トーンって彩度・明度が一緒の色相の集まりでしょ？それなのに明度差が小さいって何？」って考えると思います。

先ほども紹介した様に、色相によって明度・彩度で表現できる色の数や位置にバラつきがあります（等色相面参照）。なので同じトーンに所属させていても色相によって微妙に彩度・明度の値は違っています。

特に彩度が高いトーンでは明度差が大きくなるため、トーンを合わせた状態で明度差の大きくなる配色は「ドミナントトーン配色」となり明度差の小さくなる配色は「トーン・イン・トーン配色」となります。

トーンにおいても調整によって印象が異なるので、先ほどの色彩心理の様に、目的やターゲットに合わせて使うトーンを決めるのが効果的です。「淡い・暗い・濃い」の3トーンを使い分ける様にしましょう。

▸配色の面積を考える

コチラは以前書いたスライド制作のコツでも解説していますが、色の占める面積によって与える印象が大きく変わります。なので、色相やトーンなどを決めたら上記の様なバランスで配色をしていきましょう。

デザインによって3色をバランスよく使うのもアリですが、この構成だと見やすいデザインになります。

関連記事「デザイナーが教えるプレゼン資料の作り方のコツ｜スライド制作のポイントを解説」

▸おすすめの配色ツール

実際に自分で配色を作っていく事も大切ですが、配色ツールを使うと便利なケースも多いです。

▸HUE / 360

参考サイト「HUE / 360」

今回説明してきた明度・彩度・色相といった知識が生かしやすいスタンダードな感じの配色ツールです。

左側にある「明度」を決めると右に表示されている数段階の彩度スケールつきの色相環の明度も連動して変化します。その状態で好きな色を選ぶとその色に対して合う色だけが画面上に残る様になっています。

近似色・補色・トライアド（三角形）配色的な色相かつ彩度差を少しつけた色が残されるので、選びやすくハズレない配色になっています。選んだ色は画面下に配置されるのでパッと見の印象も確認できます。

画面左下の「Print User Color」をクリックするとカラーコードが出るのでコピーして使いましょう。

▸Adobe Color CC

参考サイト「Adobe Color」

Adobeが運営しているカラーツールで様々な配色ルールがあるのでそれに合わせて自分で調整します。

Adobeのソフトと連動しているのでログインしていればイラレ・フォトショなどにそのままカラーパレットをダウンロードする事もできます。王道の類似色・補色など全部で9種類の配色ルールがあります。

自分で配色ルールに沿って作る以外にも上部にある「探索」と「トレンド」のタブから画像に合ったカラーパレットや配色パターンが紹介されているので、中からイメージに合わせて採用するのもアリですね。

▸HELLO COLOR

参考サイト「HELLO COLOR」

めちゃくちゃシンプルなカラーツールで、画面をクリックすると自動的に画面上の配色が変化します。

特に自分で色を選ぶとかではなく、クリックするたびに自動で配色が変わっていき、画面下にそのカラーコードと他にも合う配色のカラーコードが表示されるのでそれをコピーして使う事ができる感じですね。

他の配色ツールとは違って偶然の出会いを楽しむ感じですが、全画面で色イメージが分かりやすいのが良い点です。狙って配色を決める事はできませんが、インパクトのある配色などは参考になると思います。

▸配色パターン見本40選｜サルワカ

参考サイト「配色パターン見本40選｜サルワカ」

配色のパターンが40種類ほどあって、クリックすると画面上で配色の感じを確かめることができます。

WEBやアプリなどの配色を決めるのにも使いやすい感じで確認ができて、その配色がどういう感じの印象を与えやすいか・どういうシーンで使いやすいかジャンル別に記載されているので分かりやすいです。

コチラも自分で配色をつくるという感じではなく参考にするという感じですが見やすくておすすめです。

▸NIPPON COLORS

参考サイト「NIPPON COLORS」

日本に昔から伝わる色の表現に対してどういうカラーコードで表示する事ができるか分かるツールです。

カラーコードと一緒にRGB・CMYKの値も表示してくれるので、印刷等に使う際にも正式な色味で使えて便利です。特に和系のデザインを制作する時にメイン色・サブ色などを選んだりするのに重宝します。

正確に言えば「配色」ではなく単色紹介ですが、なかなか和色のカラーは分かりにくいので便利です。右側の「MUNSELL」をクリックすると立体的に「マンセル表色系等色相面」の位置を表示してくれます。

まとめ：RGB・CMYK・トーンなど色の基礎知識をデザイナーが解説

今回は色の基礎知識から配色のコツまで、様々な色に関する理論を元にして解説してきました。

色というのは色相によって表現できる明度・彩度もかなりバラバラで、思っているよりもキレイな形をしている集団ではないという事と「トーン」は難しい考えじゃないって事が分かってもらえたと思います。

配色に関してご紹介した理論はあくまでも理論であって、理論に外れていても印象的な配色はいくらでもあります。ただ、知識や理論を知っている事で新しい色の見方ができるので身につけられると便利です。

関連記事「IllustratorとPhotoshopでカラースウォッチを保存・他ドキュメントで使用する方法」