続きを読む… »

色相を動かす

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

すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかし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をお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。

« 隠す

続きを読む… »

HSBの色相環

HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。

しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。

HSBの色相環と均等な色相環

ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。

« 隠す

続きを読む… »

「FE – Color Palette」のご紹介

Windowsをお使いの方で、HSBを扱うことの出来るグラフィックソフトをお持ちでない方は、何らかのソフトを用意してHSBを扱える環境を整える必要があります。

他のソフトでも可能ですが、「FE – Color Palette」という非常に優秀なソフトがフリーソフトとして配布されておりますので、こちらを利用して配色を進めていくことをおすすめいたします。

Windowsの「色の編集」パネル

Windowsの「色の編集」パネルは色合い（色相:0-239）、鮮やかさ（彩度:0-240）、明るさ（明度:0-240）で色を決めることになります。こちらでも色の三属性による配色は可能ですが、HSBとWindowsの色の編集パネルでは明度と彩度の扱い方が違いますので、注意が必要です。

« 隠す

続きを読む… »

HSBとは

HSBカラーモデルとはコンピューター上で扱う色を数値化した物の一つで、色の三属性である色相(Hue)、彩度(Saturation)、明度(BrightnessもしくはValue)を用いて色を指定するものです。マシンやOS、ソフト等によってHSV（VはValue)もしくはHSL（LはLightness)と呼ばれるものもあります。これらは異なるものですが、ここでは同じものと考えても差し支えないでしょう。

このホームページでは呼称をHSBで統一して説明していきます。

Illustrator、PhotoshopとMacでのHSB

これらのソフトとMacでは標準でHSBで色を変える機能がついております。またその他のグラフィックソフトでもHSBを扱える物は数多くありますので、お手持ちのソフトなども一度ご確認下さい。

左側の色空間は横軸に彩度がとられており、右にいくほど彩度が高くなっていきます。縦軸は明度となっております。上に行くほど明度は高くなり、明るくなっていきます。これら2つは0～100%の範囲で調整が可能です。

右側にあるのは色相のバーです。一番下が赤の原色(0°）で、上にいくにつれて橙、黄、黄緑と色相が変わっていき、最後には赤（360°= 0°）に戻ってきます。

注意しなければならないのは明度100%の色が白ではないことです。選ばれた色相と彩度における最も明るい色が100%となりますので、白に近づける場合には彩度を下げながら、明度を上げていくことになります。つまりトーンを移動させて白に近づけていくのと同じ事になります。

« 隠す