同系色の配色に迷ったときに使う3つのテクニック

同系色の配色に迷ったときに使う3つテクニック

ひさしぶりにデザイナーらしいエントリー。
Webデザインをやっていると、配色って結構悩んだりします。デザインにとりかかる前に、ある程度の色味ってアタマの中にあるのですが、細かく色を置いていくとバランスが悪かったりすることがあるんですよね。スライダーバーやカラーホイールで調整してみてもイマイチ・・・なんてことあるんじゃないでしょうか?

今回は同系色の色味に迷った際に、私が使っている方法を3つほど紹介します。

1.同じ色の乗算したものと重ねる

同じ色の乗算したものと重ねる

同じ色のオブジェクトを重ね、配置が上のオブジェクトに対して「乗算」をかけます。そうすると、濃い色が出来上がります。

2.同じ色のスクリーンしたものと重ねる

同じ色のスクリーンしたものと重ねる

1の「スクリーン」版ですね。同じ色のオブジェクトを重ね、配置が上のオブジェクトに対して「スクリーン」をかけます。そうすると、薄い色が出来上がります。

3.透明度を調節し薄い色をつくる

透明度を調節し薄い色をつくる

これはシンプルなんですが、オブジェクトに透明度をかけて薄くする感じです。スライダーバーやカラーホイールをいじって薄くするよりも、原色よりも馴染みのある薄い色に仕上がるような気がします。

1や2に対して透明度をかけたりすることで、さらにバリエーションが広がります。元の色が薄いときは乗算の3度重ねとかやったりしますね。
ただ、1ページ内に同じような色がありすぎるのも、まとまりがなくなることがますから、ご注意ください。
同系色の配色に迷った際は是非ご活用ください。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー