コロナのせいでGWが激暇なので、ダークモードの背景色と文字色を調べました。
というのは半分嘘で、根っからのダークモードユーザーである私が自分のサイトをダークモードにしていない事に若干の後ろめたさがあるため、いつかやるかもしれない色変更のために調べました。
1. OS系
Windowsのエクスプローラー
背景色:#202020
メイン文字カラー:#FFFFFF
サブ文字カラー:#DEDEDE
メイン文字カラー:#FFFFFF
サブ文字カラー:#DEDEDE
MacのFinder
背景色:#1E2022
メイン文字カラー:#DDDDDD
サブ文字カラー:#9A9A9B
メイン文字カラー:#DDDDDD
サブ文字カラー:#9A9A9B
iOS
背景色:#1C1C1E
メイン文字カラー:#FFFFFF
サブ文字カラー:#98989E
メイン文字カラー:#FFFFFF
サブ文字カラー:#98989E
Android (Pixel3)
背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#B3B3B3
メイン文字カラー:#FFFFFF
サブ文字カラー:#B3B3B3
2. Google系
YouTube (ブラウザ)
背景色:#181818
メイン文字カラー:#FFFFFF
サブ文字カラー:#AAAAAA
メイン文字カラー:#FFFFFF
サブ文字カラー:#AAAAAA
Gmail (Androidアプリ)
背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
Google Photo (Androidアプリ)
背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
Google Keep (ブラウザ)
背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6
3. Microsoft系
Outlook (Macアプリ)
背景色:#2D2C2C
メイン文字カラー:#FFFFFF
サブ文字カラー:#C8C6C4
メイン文字カラー:#FFFFFF
サブ文字カラー:#C8C6C4
Teams (Macアプリ)
背景色:#1E1E1E
メイン文字カラー:#E6E6E6
サブ文字カラー:#B3B2B4
メイン文字カラー:#E6E6E6
サブ文字カラー:#B3B2B4
4. SNS
Twitter / ダークブルー (ブラウザ, Androidアプリ)
背景色:#15202B
メイン文字カラー:#FFFFFF
サブ文字カラー:#8899A6
メイン文字カラー:#FFFFFF
サブ文字カラー:#8899A6
Twitter / ブラック (iOSアプリ)
背景色:#000000
メイン文字カラー:#D9D9D9
サブ文字カラー:#6F767C
メイン文字カラー:#D9D9D9
サブ文字カラー:#6F767C
Instagram (Androidアプリ)
背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#A2A2A2
メイン文字カラー:#FFFFFF
サブ文字カラー:#A2A2A2
5. チャットツール
Slack (Macアプリ)
背景色:#1B1D21
メイン文字カラー:#D1D2D3
サブ文字カラー:#ABABAD
メイン文字カラー:#D1D2D3
サブ文字カラー:#ABABAD
Messenger (Androidアプリ)
背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#808080
メイン文字カラー:#FFFFFF
サブ文字カラー:#808080
Discord (Windowsアプリ)
背景色:#36393F
メイン文字カラー:#DCDDDE
サブ文字カラー:#70767B
メイン文字カラー:#DCDDDE
サブ文字カラー:#70767B
傾向まとめ
- 個性が出にくい中、各社ビミョーに色付けをしている。
- Google系統は完全統一されていると思ったらYouTubeだけは別スキーム。別ブランド扱いなのか?
- 色を出すなら、なぜか青系を強調する。Twitterが顕著。
- 背景色が青系なら、テキストも薄ーく青色を加味している
ざっくり分類すると①完全なグレースケールか、②青をちょっと足すか、の2択という傾向を見ると、じゃあ自分は俄然青以外の色を試してみたくなりますねぇ。
CONVERSATION