色彩理論とは、色どうしがどう関係し、人の目にどう見え、どう組み合わせれば調和するのかを説明する原則のことです。ロゴをつくるときも、サイトの配色を決めるときも、部屋を飾るときも、ブランドの世界観をつくるときも、この原則を知っているかどうかで仕上がりは大きく変わります。
色相環とは
色相環は、色を順番に並べて関係性を目に見えるようにしたものです。1666年、アイザック・ニュートンが太陽光をプリズムに通してスペクトルを観察したことから生まれ、その後ヨハン・ヴォルフガング・フォン・ゲーテやジョセフ・アルバースといった理論家の手で何世紀もかけて洗練されてきました。
色相環は主要な12の位置に分かれていて、あらゆる配色を見分ける土台になります。環の上での位置関係を見るだけで、その色どうしが補色なのか、類似色なのか、トライアドを組んでいるのかがわかります。
🎨 実践のヒント：ImageToolsのパレットを使えば、この記事で説明する補色・類似色・トライアド・テトラード・モノクロマティックの配色を、その場で目で確かめられます。
色の分類
一次色（原色）
一次色とは、ほかの色を混ぜてつくることができない色です。絵の具や印刷、アートで使う色料の体系では、一次色は 赤・黄・青です。画面やモニター、照明で使う光の体系では、一次色は 赤・緑・青です。これがRGBの土台になっています。
二次色
二次色は、一次色を2つ同じ割合で混ぜてできる色です。
- オレンジ — 赤＋黄
- 緑 — 黄＋青
- バイオレット — 青＋赤
三次色
三次色は、一次色と、色相環でその隣にある二次色を混ぜてできる色です。黄緑、黄橙、赤橙、赤紫、青紫、青緑の6色がこれにあたります。一次色3つ、二次色3つ、三次色6つを合わせて、伝統的な色相環の12の位置ができあがります。
色の3属性
どんな色も、次の3つの基本的な属性で言い表せます。
| 属性 | 何を表すか | 例 |
|---|---|---|
| 色相（Hue） | 色そのもの。色相環での位置 | 赤、青、緑 |
| 彩度 | 色の鮮やかさ、純度 | 鮮やかな緑とくすんだ緑 |
| 明度 | 色の明るさ、暗さ | 水色と紺色 |
この3つの値の組み合わせがあれば、どんな色も正確に言い表せます。これがそのまま HSL（Hue, Saturation, Lightness）というモデルで、デザインツールやウェブ制作の現場で使われています。
色温度
色は、色温度によって大きく2つのグループに分かれます。
- 暖色 — 赤、オレンジ、黄など。活力、あたたかさ、緊急性、動きを感じさせます。視覚的には「進出色」で、見る人に近づいてくるように見えます。
- 寒色 — 青、緑、バイオレットなど。落ち着き、信頼、誠実さ、そして距離感を伝えます。「後退色」で、遠くにあるように見えます。
この色温度の感じ方は、ブランディングで幅広く使われています。銀行やIT企業が青（信頼）に寄るのに対し、食品ブランドは赤やオレンジ（食欲と活力）を好みます。
💡 豆知識：マクドナルド、バーガーキング、KFCが赤と黄を使っているのは意図的です。この2色は食欲を刺激し、「早く」という感覚を生むため、ファストフードとの相性が抜群なのです。
配色の調和
調和とは、見ていて心地よい色の組み合わせのことです。色彩理論では代表的な5種類が定義されていて、どれも色相環での位置関係がもとになっています。
補色配色
色相環で向かい合う2色を使う配色です。青とオレンジ、赤と緑などが代表例です。コントラストが最大になるため、印象がとても強くなります。ボタンやバナーなど、短時間で目を引く必要があるものでもっともよく使われます。難点はやりすぎになりやすいこと。2色を同じ割合で使うと刺激が強すぎるので、一方をベース、もう一方をアクセントにするのが理想です。
類似色配色
色相環で隣り合う色を使う配色です。青、青紫、バイオレットのように、連続する3色を使うのが一般的です。仕上がりは穏やかで自然、視覚的な緊張がありません。落ち着きや上品さ、まとまりを出したいデザインでよく使われます。自然の風景はたいてい類似色でできています。
トライアド配色
色相環を三等分する位置の3色、つまり正三角形を描く3色を使う配色です。赤・黄・青が古典的なトライアドです。鮮やかさとバランスを両立でき、まとまりを保ったまま変化をつけられます。創造性や多様性を打ち出したいブランドの世界観づくりでよく使われます。
テトラード配色（四角形）
色相環上で正方形や長方形を描く4色を使う配色です。もっとも複雑で色数も多く取れますが、そのぶんバランスに注意が必要です。ふつうは4色のうち1色をベースにして、残りは控えめに使います。
モノクロマティック配色
1色だけを使い、彩度と明度を変えてバリエーションをつくる配色です。たとえば青を、ごく淡い・淡い・中間・濃い・ごく濃いの5段階で展開します。洗練されていて、まとまりがあり、上品な仕上がりになります。デジタルのUIや、抑制のきいた表現を好む高級ブランドでよく使われます。
すべての配色を実際に試す
ベースの色を選ぶだけで、補色・類似色・トライアド・テトラード・モノクロマティックのパレットがその場で表示されます。HEX・RGB・HSLのコードもそのまま使えます。
無料でパレットを作成する60-30-10の法則
色彩理論をデザインに落とし込むうえで、もっとも実用的な目安のひとつが60-30-10の法則です。画面の中で色をどの割合で配ればバランスが取れるかを示しています。
- 60% — ベースカラー。全体の印象を決める色です。ニュートラルな色や、落ち着いた色を選ぶのが一般的です。
- 30% — サブカラー。ベースと差をつけつつ、主役を奪わない色です。
- 10% — アクセントカラー。いちばん鮮やかな色で、ボタンやアイコンなど、すぐ気づいてほしい要素に使います。
この比率は絶対的な決まりではありませんが、SNSの1投稿から企業のブランド設計まで、どんな案件でも信頼できる出発点になります。
色彩心理
色は感情的な反応や文化的な連想を引き起こし、ブランドやデザインの受け取られ方を直接左右します。連想の中身は文化によって異なりますが、次のように欧米圏で広く共有されているものもあります。
| 色 | よくある連想 | 使っているブランド |
|---|---|---|
| 赤 | 活力、緊急性、情熱、食欲 | Coca-Cola, Netflix, YouTube |
| 青 | 信頼、安心、テクノロジー、落ち着き | Samsung, Facebook, PayPal |
| 緑 | 自然、健康、成長、サステナビリティ | Natura, Starbucks, Whole Foods |
| 黄 | 前向きさ、注意喚起、あたたかさ、創造性 | McDonald's, IKEA, Snapchat |
| オレンジ | 高揚感、親しみやすさ、若々しさ | Amazon, Fanta, Harley-Davidson |
| 紫 | 高級感、創造性、精神性、神秘 | Cadbury, Hallmark, Twitch |
| 黒 | 優雅さ、洗練、力強さ、特別感 | Apple, Chanel, Nike |
| 白 | 清らかさ、シンプルさ、清潔感、ミニマル | Apple, Tesla, Muji |
カラーモデル：RGB、CMYK、HEX、HSL
デジタルと印刷の世界では、色はいくつかの数学的なモデルで表されます。それぞれ向いている場面が違います。
- RGB（Red, Green, Blue） — 画面やモニターなど、デジタル媒体全般で使います。各チャンネルは0〜255。白は(255, 255, 255)、黒は(0, 0, 0)です。
- HEX — RGBを16進数で表したもので、CSSやウェブデザインで広く使われます。白は#ffffff、黒は#000000です。
- HSL（Hue, Saturation, Lightness） — 色を色相（0〜360°）、彩度（0〜100%）、明度（0〜100%）で表します。色を調整したり配色を組んだりするには、いちばん直感的なモデルです。
- CMYK（Cyan, Magenta, Yellow, Key/Black） — 印刷で使います。インクを混ぜて色をつくるため減法混色で、数値が大きいほどインクが増えて色は暗くなります。
💡 デジタルデザインでは： HEXかRGBで作業してください。印刷する場合は、入稿前にCMYKへ変換します。同じ色でも、2つのモデルでは見え方がかなり変わることがあります。
プロらしいカラーパレットのつくり方
色彩理論の考え方がわかっていれば、パレットづくりは筋道立てて進められます。
- メインカラーを決める。ブランドや案件の芯になる色です。色彩心理と、届けたい相手を踏まえて選びます。
- 配色の種類を選ぶ。落ち着いた雰囲気ならモノクロマティックか類似色、印象を強くしたいなら補色かトライアドを選びます。
- 60-30-10の法則を当てはめる。パレットの色を、正しい割合で画面に配ります。
- 実物で試す。暗い背景、明るい背景、スマホ表示など、実際のものに当てて確認します。単体で見ると良くても、当ててみると崩れるパレットは少なくありません。
- コントラストを検証する。背景の上に載る文字が、アクセシビリティ指針WCAGの定める4.5:1以上のコントラストを満たしているか確かめます。
パレットツールは、手順2と3を自動化します。ベースの色と配色の種類を選ぶだけで、各色のHEX・RGB・HSLコード付きのパレットができあがります。