Webデザインの色に悩んだら！薄いグレーの背景色7選
#
Web制作
背景に使いやすい薄いグレー
Webデザインでよく使う「薄いグレー系の背景色」。
でも色の使い方が悪いと野暮ったくなることもあるので、実は失敗しがち。今回は、背景に便利な「薄いグレー系の背景色」をご案内します。
① #f5f5f5
#f5f5f5はとても薄いグレー。クセがなく色も薄いのでテキストを邪魔しません。
背景にとても使いやすい色で、実際に多くのサイトで使用されています。
② #f5f8fa
#f5f8faは、わずかに青みがかった薄いグレーです。
「note」のテキストの背景色にも使われていて、通常のグレーよりもちょっと涼しげな印象。
③ #f8f7f6
#f8f7f6は、わずかにオレンジがかった薄いグレー。
温かみがプラスされたような色味で、優しくて親しみやすい雰囲気があります。
とても薄い色でテキストの視認性も悪くならないので、この色も背景に使いやすいです。
④ #f8f8f8
#f8f8f8は上述の#f5f5f5よりもさらに薄いグレー。モニターによっては、白色と接する部分（境目）がクッキリしない場合があるので気を付けましょう。
白色だとメリハリが強すぎる場合に、代わりにこの色を使用すると上手く馴染んだりします。
⑤ #f2f8f8
#f2f8f8は青緑系の薄いグレーです。
優しい印象になる背景色。とても薄い色なのでテキストの視認性も悪くなりません。
同系色の濃い色と組み合わせると全体のデザインにまとまりが生まれます。
⑥ #f3f1e7
#f3f1e7はベージュ系の薄いグレーです。
印象としては、上品だけどクールすぎない雰囲気。色も薄いのでテキストの背景にも使いやすいです。
デザインや配色の組み合わせ次第で高級感も演出できる色味になります。
⑦ #ececec
#ecececは薄いグレーですが、今回紹介した色の中では濃い目になります。
デザインや配色に失敗すると一気に野暮ったくなるので注意が必要。
でも、デザインや配色次第で可愛らしくなったり先進的な雰囲気を醸し出したりするグレーです。
まとめ
今回は背景色に使いやすい「薄いグレー」を紹介してみました。
すごく薄い色ですがデザインの中では存在感もあるので、背景色って悩みますよね。Webデザインの参考になれば幸いです。
ホームページの制作会社を探されている方は、当社へお気軽にお問い合わせください。
集客アップや新規顧客の開拓、ブランディングなど、当社はデザイン性だけでなく、お客様が期待される目的や成果に合わせて導線や視線誘導を重視したホームページを制作しています。
この記事を書いた人
田中 寛昭
Design / Marketing
アメリカ・フロリダ州にあるウォルト・ディズニー・ワールドでホテルマンとして働いた経験があり、当時はフランス・イタリア・スイス・ドイツ・アフリカ・モロッコ・メキシコの人達とルームシェアをして暮らしていました。
20代半ばからは、M&Aに伴うデューデリジェンスや国立大学・国立病院の独立行政法人化、地価動向の調査・分析など、官公庁や自治体、裁判所、上場企業、金融機関等の様々な案件を経験。その後、Webサイトの運営や制作を手掛けるようになり起業しました。