サービス・アプリのダークモード背景色と文字色の比較(16種類)

1ヵ月以内

コロナのせいでGWが激暇なので、ダークモードの背景色と文字色を調べました。

というのは半分嘘で、根っからのダークモードユーザーである私が自分のサイトをダークモードにしていない事に若干の後ろめたさがあるため、いつかやるかもしれない色変更のために調べました。

1. OS系

Windowsのエクスプローラー

背景色:#202020
メイン文字カラー:#FFFFFF
サブ文字カラー:#DEDEDE

MacのFinder

背景色:#1E2022
メイン文字カラー:#DDDDDD
サブ文字カラー:#9A9A9B

iOS

背景色:#1C1C1E
メイン文字カラー:#FFFFFF
サブ文字カラー:#98989E

Android (Pixel3)

背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#B3B3B3

2. Google系

YouTube (ブラウザ)

背景色:#181818
メイン文字カラー:#FFFFFF
サブ文字カラー:#AAAAAA

Gmail (Androidアプリ)

背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6

Google Photo (Androidアプリ)

背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6

Google Keep (ブラウザ)

背景色:#202124
メイン文字カラー:#E8EAED
サブ文字カラー:#9AA0A6

3. Microsoft系

Outlook (Macアプリ)

背景色:#2D2C2C
メイン文字カラー:#FFFFFF
サブ文字カラー:#C8C6C4

Teams (Macアプリ)

背景色:#1E1E1E
メイン文字カラー:#E6E6E6
サブ文字カラー:#B3B2B4

4. SNS

Twitter / ダークブルー (ブラウザ, Androidアプリ)

背景色:#15202B
メイン文字カラー:#FFFFFF
サブ文字カラー:#8899A6

Twitter / ブラック (iOSアプリ)

背景色:#000000
メイン文字カラー:#D9D9D9
サブ文字カラー:#6F767C

Instagram (Androidアプリ)

背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#A2A2A2

5. チャットツール

Slack (Macアプリ)

背景色:#1B1D21
メイン文字カラー:#D1D2D3
サブ文字カラー:#ABABAD

Messenger (Androidアプリ)

背景色:#000000
メイン文字カラー:#FFFFFF
サブ文字カラー:#808080

Discord (Windowsアプリ)

背景色:#36393F
メイン文字カラー:#DCDDDE
サブ文字カラー:#70767B

傾向まとめ

  • 個性が出にくい中、各社ビミョーに色付けをしている。
  • Google系統は完全統一されていると思ったらYouTubeだけは別スキーム。別ブランド扱いなのか?
  • 色を出すなら、なぜか青系を強調する。Twitterが顕著。
  • 背景色が青系なら、テキストも薄ーく青色を加味している

ざっくり分類すると①完全なグレースケールか、②青をちょっと足すか、の2択という傾向を見ると、じゃあ自分は俄然青以外の色を試してみたくなりますねぇ。