坂本邦夫の「基礎からわかるホームページの配色」» サブカラーを決定

色相だけを変えてサブカラーを作る

坂本邦夫 — Wed, 27 Jan 2010 07:10:01 +0000

色相だけを変えることで明るさや鮮やかさに統一感を与える配色です。一番イメージを変えやすい配色技法になります。

色相を動かす

まずは色相だけ動かしてみることにします。明度と彩度は変わりません。サブカラーはあくまでもベースカラーを支える色ですので、ベースカラーに似た色を選ぶことで、最初に選んだ一色を支えるような色を作ります。

すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかしHSBの色空間で色を変えるとそのような事は起きてしまうものとしてご了承下さい。どうしても気になる方はご自分の目で確認しながら色を決めるか、デジタル色彩マニュアル（日本色研事業編）のカラーチャートなどを確認するのもよいでしょう。

色相の角度は均等ではない

ここで注意することは隣り合う色同士でHの数値が均等ではないということです。左の表をご覧いただければわかると思いますが、11と12の幅が172-181と9しか幅がないのに対し、8と9の差は41もあったりします。困ったことにHSBの色相の角度は均等ではないのです。

例えばベースカラーのHSB[30:60:80]の色相に対して、HSB[50:60:80]のサブカラーを配色した場合とHSB[120:60:80]とHSB[140:60:80]の場合では見た目の印象が全く異なってしまいます。数値としてはHの差はどちらも20ですが、その色相次第で色の差が大きく出る場合とあまり変わらない場合があります。

一般的に色彩学でいうところの類似色相配色と呼ばれる場合は隣の色相もしくはもう一つ隣の色相との配色をさしますので、例えばベースカラーに赤を選んだ場合は赤紫もしくは橙といった前後の色相を選んで配色するとよいでしょう。対応表の数値の差を見ながら類似した色を見つけると良いでしょう。

サブカラーの方が目立つ場合

このまま隣の色相を選んでしまうと、場合によってはベースカラーよりもサブカラーの方が目立ってしまう場合があります。アクセントカラーは目立たせたりするために使う色なのでよいのですが、サブカラーの方が目立ってしまうと、一生懸命考えたベースカラーの理由付けが崩れてしまうことにもなりかねません。

この場合、サブカラーがベースカラーと同等に見えるか地味になるように色を変えてやると無難な配色になりやすいです。HSBをお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。

関連記事：

色の三属性の２つを動かす

坂本邦夫 — Wed, 27 Jan 2010 04:40:52 +0000

色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。

２つの属性は慎重に動かす

色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。

ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。

特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。

色相と明度を変えたサブカラー

まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。

色相と彩度を変えたサブカラー

また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。

明度と彩度を変えたサブカラー

この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。

関連記事：

彩度だけを変えてサブカラーを作る

坂本邦夫 — Wed, 27 Jan 2010 04:27:43 +0000

彩度を下げていくと無彩色に近くなっていきます。派手・地味感を調整するのに便利です。

彩度と色のイメージ

高彩度になると派手になったような印象を生みだします。彩度を考えるにあたっては、以前に決めていた「女性向きで柔らかい感じの配色」などの言葉のイメージを思い出しましょう。もちろん子供向けの楽しい配色を想定するならベースカラーとサブカラーの両方の彩度を高めにすることも必要です。

サブカラーの方を低彩度に

彩度を動かす場合は特に注意が必要となります。サブカラーの方に彩度の高い色を持ってくると目立ってしまうと、ベースカラーとの力関係が逆転してしまうことになりかねません。

一番上のサンプルをご覧いただければおわかりになるかと思いますが、高彩度かつ高明度の色はまぶしく見えたりして目が痛くなるような印象を受けてしまう場合があります。ベースカラーに用いられた穏やかな草色のイメージが損なわれてしまいます。

このように彩度だけを動かす場合にはサブカラーに地味な色を持ってきた方が配色としてはしっくり来やすくなります。目立たせる部分にはアクセントカラーを用いることが出来ますので、サブカラーの彩度には十分に注意しましょう。

ただし一番下の例のようにベースカラーとサブカラーの彩度がともに60以下だとそれほど印象は損なわれません。ベースカラーの彩度が低い場合には全体が地味で陰鬱な感じにならないように、サブカラーの彩度を上げる必要も出てきますので、柔軟に対応しましょう。

関連記事：

明度だけを変えてサブカラーを作る

坂本邦夫 — Wed, 27 Jan 2010 03:42:19 +0000

ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。

メリハリのある配色に

印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。

可読性は明度差によって決まる

明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。

2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。

関連記事：