ホーム » カテゴリー:色彩の基礎知識 » トーンとイメージ
カテゴリー:トーンとイメージの記事
明度と彩度の複合概念であるトーンを使えば、イメージや印象を作りやすくなります。今までに色彩を学習したことのある方でPCCS(日本色研配色体系)やCCIC(商工会議所カラーコーディネーションチャート)のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このホームページでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。
トーンの概念を知れば配色が格段に行いやすくなります。
トーンとは明度と彩度の複合概念
※今までに色彩を学習したことのある方でPCCS(日本色研配色体系)やCCIC(商工会議所カラーコーディネーションチャート)のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このウェブサイトでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。
トーンとは日本語で色調のことで、明度と彩度を複合した概念です。まずは下のトーン表をご覧下さい。同じトーン同士で配色をまとめると明度、彩度が近い色が集まるため、調和しやすくなります。

HSBを使い、SとBを変えずにHだけを動かせばトーンが出来ます。ここでは便宜上、彩度の段階を4つに分けておりますが、他の数値でも全く問題はありません。ご自分のイメージに近いトーンを作り出してから配色を考える方法もありますので、一度トーンの作成をお試し下さい。
明度、彩度が100のトーン
明度と彩度が共に100の場合は原色となります。派手なイメージが表現できますが、このまま使用して配色するとまぶしくて目が疲れる配色となる可能性がありますので、なるべく使わないようにすると、妙に華美でうさんくさい配色から一歩遠ざかることが出来ます。
« 隠す
トーンはイメージを作りやすいという利点もあります。自分のホームページの理想のトーンを見つけておきましょう。
トーンからのイメージ
また同じトーン同士でまとめると非常にイメージが作りやすく、明度、彩度が近いため調和しやすく、「派手な」とか「優しい」などといったイメージを生み出しやすいのが特徴です。
トーンを上手く利用できれば、配色の幅が広がります。トーンから生み出される代表的なイメージを下記の表にまとめております。ご自分が表現したいイメージの単語を見つけだしておけば、トーンを用いた配色が出来るようになりますので、自分が今から配色するウェブサイトのイメージにふさわしいトーンを見つけておきましょう。

トーンとイメージの対応表
| トーン番号 |
イメージワード |
| トーン1 |
あざやかな、派手な |
| トーン2 |
明るい、陽気な |
| トーン3 |
強い、情熱的な |
| トーン4 |
深い、伝統的な |
| トーン5 |
楽しい、軽い、さわやかな |
| トーン6 |
柔らかい、穏やかな |
| トーン7 |
鈍い、くすんだ |
| トーン8 |
暗い、大人っぽい |
| トーン9 |
柔らかい、やさしい |
| トーン10 |
落ち着いた、おとなしい |
| トーン11 |
地味な、濁った |
| トーン12 |
重い、固い |
| トーン13 |
清潔な、冷たい |
| トーン14 |
寂しい、しゃれた、 |
| トーン15 |
高級な、フォーマルな |
トーン12を見て明るくかわいらしいイメージが浮かぶなど大きくトーンがずれる場合はともかく、隣接したトーンくらいでイメージとイメージワードがずれていても、それほど大きな問題ではありません。どの辺りのトーンが自分が表現したいことに近いのかを覚えておくだけでも結構です。
« 隠す
▲このページの先頭に戻る