サブカラーの分割でカラフルに

ここまでの色彩設計の考え方だと、カラフルな配色にはなり得ないのではないかということにすでにお気づきになられている方もいらっしゃることでしょう。そして3色だけでは配色しきれないとも感じられておられると思います。

色を増やしていく方法はいろいろあるのですが、ここではサブカラーを分割する方法を使います。ここまでの段階でサブカラーはベースカラーよりも地味に作られているはずですし、調和もしているはずです。上手くサブカラーが出来ていれば違和感なく分けられるはずです。

サブカラーの分割例1

両方とも同じ色を使ったサンプルです。ベースカラーの明度と彩度を少し動かしたHSB[30:40:60]のサブカラーを最初に作り、それを分割して色相を動かしたHSB[90:40:60]の緑を作り、それに明度と彩度を動かしたHSB［90:20:70]を加えております。アクセントカラーはベースカラーの色相だけを大きく動かしたHSB[220:60:80]の紺色を用いております。

ベースカラーであるHSB[30:60:80]に明度と彩度を動かしたHSB[30:40:60]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。これらは左右のサンプルで共通している色です。左のサンプルでは出来上がった3色をそのまま配置しております。

次に右のサンプルですが、もっとカラフルにするためにサブカラーを4分割しております。サブカラーの色相は左の青から30、47、90、144となっております。この数値は目で確認しながら適当に動かしておりますが、明度と彩度が等しいので、同じような印象の５色が出来上がっていると思います。

サブカラーのうちの3色をボタンの色として配置いたしました。残った緑を見出しとして用いております。

これによって使用している色は増えておりますが、ベースカラーの面積は変えておりませんので、その印象は損なわれていません。

サブカラーの分割例2

こちらは左右で違ったサンプルをご用意しました。

まず左のサンプルですが、ベースカラーであるHSB[200:35:100]に明度と彩度を動かしたHSB[200:20:100]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。

サブカラーを分割し、少し動きを付けるために色相だけを大きめに動かしたHSB[60:20:100]を作り、そのままメニューの部分に使っております。ここではテキストでのリンクを想定しておりますが、このリンクの背景の色をそのままボタンの色に使うことも可能です。

次に右のサンプルですが、少しカラフルな感じを出すためにHSB[340:30:100]の明るいピンクをベースカラーに持ってきました。サブカラーにはHSB[100:30:100]を最初に決定いたしました。サブカラーを分割して2色追加しております。これは看板部分にそのままの面積と形で用いております。アクセントはベースカラーの明度と彩度だけを動かしたHSB[340:60:50]を選びました。他の色が全て明るい色なので、十分にアクセントとして目を引くと思います。

カラフルになった印象を受けると思いますが、ベースカラーのピンクの印象は損なわれていないはずです。これは面積比を維持したことによります。

投稿者 坂本邦夫 : 最終更新日 2007年04月28日 : 投稿日 2005年11月14日

コメント・トラックバック

コメント

コメントしてください