ホーム » ４色以上使うには » サブカラーの分割

サブカラーの分割

サブカラーを分割することでベースカラーの印象を損なうことなく色を増やすことが出来ます。

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

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

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

サブカラーの分割例1

サブカラーの分割例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

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

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

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

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

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

投稿日時: 2010年01月27日 15時17分
カテゴリー： ４色以上使うには | 1件のコメント »
タグ： ,

Trackback :

関連記事

“サブカラーの分割”に1件のコメントがあります

  1. アクセントカラーの分割 « 坂本邦夫の「基礎からわかるホームページの配色」 より:
    2010年4月28日 2:23 AM

    [...] サブカラーの分割 [...]

何かコメントがあればどうぞ

▲このページの先頭に戻る