
前回「無彩色の便利な使い方」を紹介しました。続いて「有彩色」の配色の手法と便利なツールをご紹介したいと思います。
色の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級にチャレンジしようと思っていますが、彩度差は見分けがむずかしいです。
コメントありがとう。