「HTML」「CSS」WEBページ背景色に悩んだら#f1f1f1

WEBページ制作ではデザインをどうしようか悩むものですよね。

背景色もどうしようかと思って、何度もいろいろ試してしまいます。

コンテンツの色など、ほかの要素との相性によってはしっくりくる色を見つけるのは、なかなか難しいです。

そんなときに便利なのが#f1f1f1です。

スクロールバーと似た色で、整合性が保たれて全体的にしっくりくるデザインになります。これに近い色を使用しているサイトも多々あります。

派手さもなく不自然さもなく、真っ白でないので目にもやさしいです。
（私はもう長い間画面の明るさをずいぶん下げているので関係ありませんが...）

 背景色の設定

[要素]{
    background-color:#f1f1f1;
}

 全体の背景色を変える

body{
    background-color:#f1f1f1;
}

 

 おまけ

　スクロールバーの色が#f1f1f1に近いのは、グーグルクロームのブラウザにおいてです。
　クローム以外使うときがあまりないのでどうでもいいですが、一応ブラウザ別にスクロールバーの色を調べました。

• firefox：#f1f1f1に近い
• edge：#f1f1f1に近い

　二つしか調べてないですが、ほとんどのブラウザでこの色でしょう。firefoxにおいてはブラウザトップ画面の背景色自体が#f1f1f1に近い色でした。

　開発ツールを開いて全体の背景色を確認しましたが、hsl型で(0,0%,95%)でした。
HEX型(#......の形)で知りたかったのですが、クロームのように型を変えて調べることができず、クロームに戻って調べました。結果#f2f2f2で、#f1f1f1に近い色でした。