ダークモードのカラーパレット:夜のための12パレット(HEXコード付き)
正確なHEXコード付きのダークモード用カラーパレット12種。夜に光るアクセント、沈むアクセント、2つのテーマを1色でまかなうアクセント、まぶしくないオフホワイトの文字色まで。
ダークモードのパレットは、ライトモードのパレットを裏返したものではありません。暗いページではアクセントの振る舞いが変わり、文字はもっと柔らかくする必要があり、そもそも機能しなくなる色もあります。ここでは、夜に何が変わるのかを見せるために作った12のダークパレットを、すべてのHEXコード付きで紹介します。
ダークモードはアクセントを反転させる
白の上で苦戦するアクセントは、暗い背景では光ります。逆に、白の上でしっかり見えるアクセントは、キレを失うことがあります。つまり、ダークテーマはライトテーマのアクセントを確認なしに借りてはいけないということです。
以下の各パレットは、明るいインク色、アクセント、暗い背景で構成されています。タイルには、暗いページ上と白の上でのアクセントを並べています。ダークテーマの土台となる仕組みについては、ダークモードのカラーシステムの記事をご覧ください。
Lime
Electric Lime #C6F432 on Graphite #17181C: 光る
同じアクセントを白の上に: かすれる
Chalk #F2F3EE on Graphite
Electric Lime は白の上ではほぼ見えず、Graphite の上では光ります。白の上で苦戦する色こそ、夜に輝く色です。
Pink
Hot Pink #FF4F9A on Night Plum #1A1218: 光る
同じアクセントを白の上に: 弱い
Blush White #F6EEF2 on Night Plum
Hot Pink は白の上では弱く、Night Plum の上ではぐっと強くなります。
Amber
Amber #FFB020 on Coffee Black #1B1610: 光る
同じアクセントを白の上に: かすれる
Warm White #F5F0E6 on Coffee Black
Amber は白の上では弱いアクセントですが、Coffee Black の上では温かみのある力強いアクセントになります。
Royal
Royal #3B4CCA on Midnight #121426: 沈む
同じアクセントを白の上に: 強い
Frost #EEF0FA on Midnight
Royal はライトモードの教科書的な青です。Midnight の上では、ボタンが形として認識されるために必要なレベルを下回って沈みます。同じHEXでも、ページが違えば結果も違います。
同じHEX、違うページ。要注意なのは Royal です。白の上で機能するボタンが、夜には沈むことがあります。
1つのアクセント、2つのテーマ
ボタンは、のっているページから際立っていなければなりません。Waikiki は明るいページでも暗いページでもそれをやってのけます。Very Berry も同じです。1つのHEXで、両方のテーマに対応できます。
Lime Punch と Gentian Blue はそうはいきません。どちらも片方のテーマでは見事ですが、もう片方では消えてしまいます。
Waikiki
Waikiki
On Silver Bird #FBF8F1: 合格
On Midnight Oil #10141F: 合格
どちらのページでも際立つ、中間トーンのティール。1つのHEXで両方のテーマに使えます。
Very Berry
Very Berry
On French Porcelain #F7F4FB: 合格
On Twilight Zone #0F1C16: 合格
こちらも、明るいページと暗いページの両方で機能する中間トーンです。
Lime Punch
Lime Punch
On Ceramic #FBFAF5: 不合格
On Infinite Night #171538: 合格
ライトモードには明るすぎます。昼の背景ではボタンがほとんど消えてしまいます。Infinite Night の上では光ります。
Gentian Blue
Gentian Blue
On Open Book #F6EFE5: 合格
On Balsamico #1C1612: 不合格
ダークモードには暗すぎます。Open Book の上では力強いのに、Balsamico の上では消えてしまいます。
両方のテーマで1つのアクセントを使いたいなら、中間トーンを選んで、2回確認してください。そうでなければ、テーマごとに専用の色を用意しましょう。2つ目のテーマを出荷する方法は、ダークモードデザインのガイドで解説しています。
純白よりオフホワイト
ほぼ黒の背景に純白をのせると、得られるコントラストは最大になります。それがまさに問題で、まぶしいのです。これらのパレットのオフホワイトでも、本文に必要な読みやすさは十分すぎるほど確保されています。
Material Design のダークテーマも、同じ理由で主要なテキストを87%の白にしています。オフホワイトにほんの少し暖かさか涼しさを足して、主役はアクセントに任せましょう。
Smoked Salmon
Distant Cloud #E7ECEC on Dark Moon #0B1B1F
純白 #FFFFFF on Dark Moon: まぶしい
Smoked Salmon #FF887A on Dark Moon
クールなオフホワイトに、暖かいコーラルのアクセント。アクセントは何の助けもなくはっきり際立ちます。
Minted Elegance
Vanilla Sugar #F1EBDF on Violet Void #1C1022
純白 #FFFFFF on Violet Void: まぶしい
Minted Elegance #4FCB9C on Violet Void
Vanilla Sugar にはほのかな暖かさがあり、ミントのアクセントは Violet Void の上で十分な余裕を持っています。
Malibu
Milk and Cookies #EFE7E7 on Asphalt #1C140F
純白 #FFFFFF on Asphalt: まぶしい
Malibu #57BAF0 on Asphalt
暖かいほぼ黒の上に暖かいオフホワイト。そこをスカイブルーが突き抜けます。
Dream Vapour
Star Magnolia #EAEFE4 on Black Stallion #0E1A16
純白 #FFFFFF on Black Stallion: まぶしい
Dream Vapour #BB9DF0 on Black Stallion
Star Magnolia はわずかに緑寄りで、やわらかなライラックのアクセントとよく合います。
この4つのアクセントはどれも夜の背景ではっきり際立つので、文字は控えめなままで大丈夫です。
12パレットを1つの表で
| パレット | カラー | 示していること |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | 暗い背景で光る |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | 暗い背景でより強い |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | 暗い背景で光る |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | 暗い背景で沈む |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | 両方のテーマで機能 |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | 両方のテーマで機能 |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | 暗い背景でのみ機能 |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | 明るい背景でのみ機能 |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | オフホワイトの文字 |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | オフホワイトの文字 |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | オフホワイトの文字 |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | オフホワイトの文字 |
数値:選択を弁護する人のために
すべての組み合わせは、のせる背景に対してWCAG 2のコントラスト式で測定しました。この記事で比率を載せた表はこれだけです。
| パレット | テスト | 比率 | 結果 |
|---|---|---|---|
| Lime | 暗い背景上 / 白の上のアクセント | 13.84:1 / 1.28:1 | 光る、かすれる |
| Pink | 暗い背景上 / 白の上のアクセント | 5.98:1 / 3.07:1 | 暗い背景でより強い |
| Amber | 暗い背景上 / 白の上のアクセント | 9.82:1 / 1.83:1 | 光る、かすれる |
| Royal | 暗い背景上 / 白の上のアクセント | 2.66:1 / 6.83:1 | 暗い背景で沈む |
| Waikiki | 明るい背景 / 暗い背景のボタン | 3.2:1 / 5.2:1 | 両方合格 |
| Very Berry | 明るい背景 / 暗い背景のトグル | 3.9:1 / 4.0:1 | 両方合格 |
| Lime Punch | 明るい背景 / 暗い背景のボタン | 1.4:1 / 11.1:1 | 不合格、合格 |
| Gentian Blue | 明るい背景 / 暗い背景の再生ボタン | 8.9:1 / 1.7:1 | 合格、不合格 |
| Smoked Salmon | オフホワイトの文字 / 純白 / アクセント | 14.7:1 / 17.6:1 / 7.6:1 | 合格、まぶしい、合格 |
| Minted Elegance | オフホワイトの文字 / 純白 / アクセント | 15.4:1 / 18.3:1 / 9.0:1 | 合格、まぶしい、合格 |
| Malibu | オフホワイトの文字 / 純白 / アクセント | 14.9:1 / 18.1:1 / 8.3:1 | 合格、まぶしい、合格 |
| Dream Vapour | オフホワイトの文字 / 純白 / アクセント | 15.2:1 / 17.8:1 / 7.8:1 | 合格、まぶしい、合格 |
ダークパレットの作り方
- まず暗い背景を決める。 Graphite #17181C や Violet Void #1C1022 のようなほぼ黒は、純黒より柔らかい印象になります。
- 文字はオフホワイトにする。 Vanilla Sugar #F1EBDF のように、ほんの少し暖かさか涼しさを足します。
- アクセントを暗い背景でテストする。 ライトテーマのアクセントを、確認せずに使い回してはいけません。
- アクセントを1色にするか2色にするか決める。 1色で両方のテーマをまかなうなら、中間トーンを選んで両方のページで確認します。そうでなければ、テーマごとに専用の色を用意します。
- ボタンを「形」として確認する。 ラベルとして読めるだけでなく、ページから際立っている必要があります。
各セットのファイルを入手する
各セットは Forge で公開している無料のカラーセットで、タップでコピーできるコード、Figma と Adobe 用のスウォッチファイル(ASE)、CSS変数、デザイントークンが入っています。
無料カラーセット
ダークモードはアクセントを反転させる: Lime, Pink, Amber, Royal
すべてのHEXに加え、ASEスウォッチ、CSS変数、デザイントークン付き。
無料カラーセット
1つのアクセント、2つのテーマ: Waikiki, Very Berry, Lime Punch, Gentian Blue
すべてのHEXに加え、ASEスウォッチ、CSS変数、デザイントークン付き。
無料カラーセット
ダークモード用オフホワイト: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
すべてのHEXに加え、ASEスウォッチ、CSS変数、デザイントークン付き。
FAQ
ダークモードのカラーパレットで最も効果的な色は?
ほぼ黒の背景、文字用のオフホワイト、そして暗い背景で際立つアクセントです。Dark Moon #0B1B1F の上に Smoked Salmon #FF887A、文字に Distant Cloud #E7ECEC を使った組み合わせが好例です。
ダークモードでは純白の文字を使うべき?
いいえ。ほぼ黒の背景に純白はまぶしすぎます。Vanilla Sugar #F1EBDF のようなオフホワイトでも、本文に必要な読みやすさは十分すぎるほどあり、しかも柔らかく見えます。
ライトモードとダークモードで同じアクセントカラーを使える?
中間トーンであれば使えます。Waikiki #0098A4 はどちらのページでも際立ちます。Lime Punch #B7DD31 は明るい背景で消え、Gentian Blue #292BAE は暗い背景で消えます。
ダークモードで青いボタンが消えるのはなぜ?
白の上で力強い青は、暗い背景には暗すぎることがあります。Royal #3B4CCA は Midnight #121426 の上で沈みます。ダークテーマには、もっと明るい青を使いましょう。
ダークモードのボタンは何色にすべき?
暗い背景から際立つ色なら何でも構いません。Electric Lime #C6F432、Hot Pink #FF4F9A、Amber #FFB020 はいずれも、明るい色は夜に光るので条件を満たします。
ダークモードに最適な背景色は?
純黒ではなく、Graphite #17181C や Coffee Black #1B1610 のようなほぼ黒です。オフホワイトと並べたときに柔らかく、それでいてアクセントもきちんと光ります。
出典
- 色名とHEXコードは、Forge の UX Brainy カラーセット vol 05、09、10 によるものです。コントラストは、各色がのる背景に対してWCAG 2の式で計算しました。
- 文字と形のしきい値は W3C WCAG 2.2 に準拠しています: Contrast (Minimum) と Non-text Contrast。
- Material Design のダークテーマは主要なテキストを87%の白にしています: Material Design, Dark theme。
- UX Brainy で3本のカルーセルとして最初に公開: 白で機能するアクセントは、ダークモードで消えることがある、ライトとダークで1つのアクセントが機能するのは中間トーンだけ、ダークモードに純白の文字は要らない。
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
