よく分からんかった色の3属性HSBのまとめ、色相、彩度、明度の違い

ご無沙汰してます。職業訓練校に通い始めて一週間がすぎました。

自己紹介も終わり、訓練校って本当にいろんな方がいるなあと思いました。

上は60代から下は18歳まで幅広い年齢層ですし、職業もみなさんバラバラ、

なので授業は今のところゆっく~りと進んでおります。

早くHTML書きたいなあとか、卒業した先輩のWEBサイトを真似て作ってみたいとか

色々思いますが、とりあえず今は学科で行われることを復習しつつ、

自分なりにまとめようかと思います。

 

 

学科の授業では色彩についても学びました。色の三原則RGBから印刷物に

使われるCMYKなど座りながらフムフムと聞いていたのですが、

なんとなく授業が進んでいくと具体的なイメージが降りてこない。

タイトルにもあるように色相、彩度、明度の違いをよく理解していませんでした。

 

でも先生がPhotoshopを使ってこの違いを説明してくださったので、とてもわかり

やすく、スッと頭に入ったのでここで自分のためにまとめようかと思います。

なにかわからないことがあったら実際にソフトをいじってみるといいかも

しれませんね。

 

まず色相(Hue)、これはなんとなく分かります。こちらは色の変化をあらわします。

Photoshopでいじると分かりやすいですね。

まずは元の画像「枝豆」を用意しました。

f:id:ka8ppiq:20151114042737j:plain

Photoshopを実際にいじってみます。

レイヤーパネルから

塗りつぶしまたは調整レイヤーを新規作成→色相・彩度

ここからバーをいじってみます。

「色相-100の場合」

f:id:ka8ppiq:20151114042810p:plain

赤のような紫のような色になりました。

「色相+100の場合」

f:id:ka8ppiq:20151114042925p:plain

青っぽくなりました。

色が変化していることが分かりますね。

続いて彩度(Saturation)ですが、明度(Brightness)との違いが分かりにくい。

彩度は色の鮮やかさ、明度は明るさをあらわすとのことですが、よくわからんかった

ですが、こんな感じになります。

「彩度-100の場合」

f:id:ka8ppiq:20151114043421p:plain

鮮やかさがなくなった!

続いて「彩度+100の場合」

f:id:ka8ppiq:20151114043536p:plain鮮やかすぎるくらい鮮やかになってますね。

明度はどうでしょう

「明度-95の場合」※明度を-100にすると真っ黒にf:id:ka8ppiq:20151114043846p:plain彩度の場合と違って色が抜ける感じというよりも暗くなった感じがしますね。

続いて「明度+100の場合」

f:id:ka8ppiq:20151114044125p:plain明るくなりすぎてもう見えないくらいです。

 

こんな感じで実際にいじってみると分かりやすいですね。

ちょっとした写真加工などもこうして色相、彩度、明度をいじることで

大分見た目が変わってくるので、Photoshopの授業の時に再復習したいと

思います。