Webサイトをデザインしていく際にメインカラーが決まっていて、サブカラーを何にしようか迷ってしまった場合、一番簡単な方法としてメインカラーをベースにトーンを変えた色で作っていくという方法があります。メインカラーのトーン違いで色を組み合わせてあげることで、まとまりも良くなり、しっくりしやすくなります。

トーン違いの色の作り方

Photoshopなどを使えば、簡単にメインカラーのトーン違いの色を作成することができます。まず、メインカラーとなるオブジェクトを作成します。次にサブカラーとして使いたい分だけレイヤーをコピーします。そして、それぞれのレイヤーの不透明度を下げてあげれば簡単にトーン違いの色を作ることができます。

トーン違いのパターンを作成する方法

あとは、スウォッチパネルに登録しておけば、いつでも色を抽出して使うことができます。

サブカラーの決定に迷ったときには、このようにトーン違いで配色してあげると、まとまりのあるページが作りやすくなるので試してみてください。

おすすめの記事