前回「無彩色の便利な使い方」を紹介しました。続いて「有彩色」の配色の手法と便利なツールをご紹介したいと思います。
色の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: Sphere (Color Theory Visualizer)
こちらも簡単に調和のとれた配色を作ってくれます。
もうひとつご紹介するのは、色見本と配色ツールを同時に提供しているサイトです。色は使う面積によっても大きく印象が変わります。こちらの 配色サンプル画面 で背景とサブカラーを入れ替えるとイメージを比較しやすいと思います。
▼サンプル（クリックで拡大します）
一番のポイントは無駄に「色数を増やさない」ことだと思います。 日本には古くから、「捨色」（すていろ）という概念があります。ある色を際立たせるために引き立て役になる色のことです。引き算の美学 でも述べたように、思い切って色を捨てることも大切ですね。
また、Web での配色は「機能性」を忘れてはなりません。じゃあどうすればいいのか？ その話は、無駄に長くなるから、坂本邦夫の「基礎からわかるホームページの配色」 - 自分で効果的な配色を行うための情報 を見てくれ！ （無駄に外山風） 。
↓こちらの本もわかりやすい一冊です。
ちゃんと知りたい配色の手法 (MdN DESIGN BASICS)
石田 恭嗣
関連商品
やさしいデザイン―誰でもかんたん、レイアウト・配色・文字組
知っておきたいレイアウトデザインの基本 (MdN DESIGN BASICS)
グラフィック素材集 ユーロカルチャー&アンティーク
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
カラー・ルールズ 色とデザインについて知っておきたいこと
by G-Tools
【関連エントリー】
ご指摘感謝します。
訂正、追記しますた。
勉強になります。
色彩検定受けられるとのことで、激しく応援しています！
検定そのものは、経験上、準拠テキストをキチっと理解して覚えていればカンペキです。
というより、このエントリ書けるくらいなら、間違いなく合格しますっ！！
応援ありがとうございます！
試験まであと10日と迫ってきたので必死で復習しています。
今回は2級にチャレンジなんですが、現場のWebデザインに生かせるようしっかり勉強したいと思います。
コメントありがとう。
いままで、彩度ってあざやかさ、明度って明るい暗いだと思っていたのですが、上のピンクの見本を見ていると、彩度って、白を混ぜるってことですか？明度って、黒を混ぜるってことですか？
明度が白黒両方担っていると思っていたので、で、あざやかってどういうことってちょっと考えてしまいました。
試験が終わるの待っていました。らぶさんの説明はわかりやすいので、もし、よければ教えてください。
彩度はあざやかさ（色みの強さ）、明度は明るさ（暗さ）という覚え方でいいと思います。
おっしゃるとおり、色に白を加えると明度は上がり（高明度）、黒を加えると暗く（低明度）なりますね。
彩度は低くなればなるほど「無彩色」（白、灰色、黒）に近づいていきます。
ちなみに「オストワルト表色系」では、純色に白を加えると明清色(ティント) 、黒を加えると暗清色(シェード)と呼ばれます。
上のピンクの見本より、こちらのサイトの説明のほうがわかりやすいかと。
http://www.color-club.com/special/school/060915.html
＞試験が終わるの待っていました。
お気遣いありがとうございます。試験はバッチリでしたよ。
今度は11月に1級にチャレンジしようと思っていますが、彩度差は見分けがむずかしいです。
コメントありがとう。