色の3つの要素
配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。
- 色相（しきそう：Hue）
- 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。
（色相はつながりあって色相環という輪になります。）
- 彩度（さいど：Saturation：Chroma）
- 色の鮮やかさ、強弱の度合いのこと。
彩度が高い（鮮やか）⇔彩度が低い（鈍い）
- 明度（めいど：Value：Brightness）
- 色の明るさの度合いのこと。
明るい（白）⇔暗い（黒）
配色の手法
配色の手法には、法則のようなものがあります。
- 色相を手がかりにした配色
- 明度を手がかりにした配色
- 彩度を手がかりにした配色
- トーンを手がかりにした配色
- ドミナントカラー配色
- 同じ色相で統一させた配色
- ドミナントトーン配色
- 同じトーンで統一させた配色
- トーンオントーン配色
- 同じ色相でトーン（色調）を変化させた配色
穏やかで落ち着いた配色ですが、平凡になりやすい
- トーンイントーン配色
- 明度は同じで色相を変化させた配色
明暗が同じなので、違う色相を使っても違和感がない
- カマイユ配色
- 色相 ・トーン共に近い色を組み合わせた配色
- フォカマイユ配色
- カマイユ配色よりやや色相差がある配色
- コントラスト配色
- 色相・明度・彩度いずれも反対色で配色
- グラデーション配色
- 色相 ・明度 ・彩度を段階ごとに変化させる
- ワンポイント配色
- アクセントカラー（補色）を使うことで全体を引き締める役目をする
好みやセンスだけに頼らない配色
色相、彩度、明度の3つの要素を数値で表したカラーモデルのことを「HSV」と呼びます。（またはHSB）参考：HSV色空間 - Wikipedia
グラフィックデザインなどでよく用いられており、直感的にわかりやすい表現方法だと言われています。photoshop や Mac にはあらかじめ HSV の設定ができるカラーパネルがあります。
HSV による配色
色を HSV の数値で表すと次のようになります。
色相（H）のグラデーション
彩度（S）のグラデーション
明度（V）のグラデーション
配色とは2色以上の色の組み合わせのことです。色にも相性があって、人間関係と同じように似たもの同士（共通性）または正反対（対比）の色を選ぶとうまくいきます。
上のグラデーションの図のように「色相・明度・彩度」のいずれかが同じグループ、または色相環で正反対に位置する補色（反対色）を組み合わせると調和のとれた配色になります。
コントラストをつけたい場合は、色相や明度を60度、90度、120度･･･と差を大きくします。色相の差が180度なら補色（反対色）で、一番コントラストが強くなります。隣同士の色なら色相を15〜30度、彩度を落とす（低くする）と落ち着いたトーンになります。
参考：数で合理的にデザインする - カラー編 | d-spica
ソフトがないひとも Mac じゃない人でも、Web 上で HSV で簡単に調和のとれた配色ができるツールがあるので、実際に作ってみましょう。
ベースの色が決まったら、H・S・Vのいずれかの数値を変えてみてください。サンプルは、わたしの好きなピンクを選んで、明度と彩度はそのままで色相（H）を120度ずつ変化させてみました。
ColorJack
▼サンプル（クリックで拡大します）
ColorJack: Sphere (Color Theory Visualizer)
こちらも簡単に調和のとれた配色を作ってくれます。
もうひとつご紹介するのは、色見本と配色ツールを同時に提供しているサイトです。色は使う面積によっても大きく印象が変わります。こちらの 配色サンプル画面 で背景とサブカラーを入れ替えるとイメージを比較しやすいと思います。
色サンプル(色見本と配色)
▼サンプル（クリックで拡大します）
一番のポイントは無駄に「色数を増やさない」ことだと思います。 日本には古くから、「捨色」（すていろ）という概念があります。ある色を際立たせるために引き立て役になる色のことです。引き算の美学 でも述べたように、思い切って色を捨てることも大切ですね。
また、Web での配色は「機能性」を忘れてはなりません。じゃあどうすればいいのか？ その話は、無駄に長くなるから、坂本邦夫の「基礎からわかるホームページの配色」 - 自分で効果的な配色を行うための情報 を見てくれ！ （無駄に外山風）
。
↓こちらの本もわかりやすい一冊です。
ちゃんと知りたい配色の手法 (MdN DESIGN BASICS)
石田 恭嗣
関連商品
やさしいデザイン―誰でもかんたん、レイアウト・配色・文字組
知っておきたいレイアウトデザインの基本 (MdN DESIGN BASICS)
グラフィック素材集 ユーロカルチャー&アンティーク
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
カラー・ルールズ 色とデザインについて知っておきたいこと
by G-Tools
【関連エントリー】
CLOSE ↑
