デザインのための配色見本帳(WEBサイト、ECサイトカラーパターン)

15年以上のデザイナーの仕事を経て、多数のECサイト、WEBサイト、LP作成を手がけた経験から、ECサイトの売上げアップ、転換率(CV率)アップに役立つ「売れる色 (カラーマーケティング)」をベースとしたカラーパターンを紹介しています。

印象 色について

【ベージュ系、茶色】大人 配色

投稿日:2019年10月1日 更新日:

色のキーワード…ベージュ、茶色系統で高級感と大人な配色を

「ベージュ、茶色系統」表現では、「同色系統」でまとめます。茶色系統で配色し、濃い茶色や黒で画面をシャープにします。
化粧品などや高級感も連想できます。アクセントは白か黒です。
「背景のグラデーション」は、上記の配色で不透明度をさげたものになります。
「文字のグラデーション」は、上記の配色の「まま」です。
グラデーションを使うことで雰囲気をねらった表現を可能にします。

茶系統カラーパターンの一例(RGB/HTMLカラーコード)

●メインカラー(ベージュ)
R216 G186 B157/ #d8ba9d

[連想するイメージ]やさしい、肌、落ち着いた、明るい
こちらのベージュを使うことで明るい印象をもたせます。

●サブカラー1(濃いベージュ)
R195 G150 B101/ #c39665

[連想するイメージ]やさしい、肌、 落ち着いた、明るい
こちらも明るい印象を持たせ、落ち着いた色です。

●サブカラー2(明るい茶)
R145 G85 B36/ #915524

連想するイメージ]温かい、落ち着いた、大人な
赤やオレンジの色に近くやや暖色でやや暗いこの色は、心地よさを感じさせます。
彩度の高い明るい茶色です。

●アクセントカラー1(暗い茶)
R111 G63 B30 / #6f3f1e

[連想するイメージ]暗い、落ち着いた、大人な
サブカラー2に近いです。彩度も高く、暗いので他の配色に近く、アクセントとしては弱いように思える選びです。明るい色と反対でかつ馴染みやすい茶色は他の茶色を補う意味で、アクセントに使います。今回の黒色に補えるようにも、こちらを選びました。

●アクセントカラー2(黒)
R14 G14 B14 / #0e0e0e

[連想するイメージ]落ち着いた、高級な、大人な
重厚感や、高級なイメージをもたせる黒は、画面をシャープに表現できます。
今回の配色では、明るい茶色にかぶせることで、アクセントをねらいます。

●アクセントカラー3(白)
R244 G244 B244/ #f4f4f4

[連想するイメージ]清潔、爽やか、高級な
グラデーションとしても白をさしこむことで、今回の暗い配色などでは、効果的です。暗い色にかぶせて使うことで、より効果的です。

-印象, 色について
-, , ,

執筆者:

関連記事

【黒】男性らしさを表現する配色

色のキーワード…男性、かっこいい、強い、堅い、暗い、厳粛 男性が好む色とされる黒や寒色系の色で、力強さやかっこよさを表現します。また比較的、赤も男性に好まれる色のようです。 男性にかっこいいと思っても …

【若い】 清涼な色彩配色

色のキーワード…清涼な、若い、爽やかな、透明 白を基調とした配色では、とても目立つ配色になります。こちらのRGB指定色の不透明度を下げて、重ねて表現することでとても爽やかな印象になります。 暗色カラー …

【黒】高級感を表現する配色

色のキーワード…高級、厳か、貴重、豪華、プレミアム、金 高級感は、黒や金や銀の他に、赤や紺などいろいろな色で表現できますが、色数を極力少なくして、シンプルにすることが大切です。光沢をイメージできるグラ …

【暗色】 白の映える 配色

色のキーワード…テキスタイル、花、落ち着いた 暗い色でまとめ、白い花を映えさせる配色です。テキスタイルなどに扱えます。アクセントはオレンジか白色です。 暗色カラーパターンの一例(RGB/HTMLカラー …

【ピンク】女性らしさを表現する配色

色のキーワード…女性、かわいい、やわらかい、優しい、明るい、エレガント ピンク系やベージュなどの明るい色合いで、女性のかわいらしさや柔らかさを表現します。 さらに紫をアクセントにすることで、エレガント …