If you’re an avid dark mode user like me, you’ll know that dark mode isn’t just about white text on black backgrounds. In a single app, a handful of shades of gray give the app some depth. And across various apps, the spectrum of gray becomes even wider.

如果您是像我這樣的狂熱暗模式用戶，您會知道暗模式不只是黑底白字。 在單個應用程序中，少量的灰色陰影為應用程序提供了一定的深度。 在各種應用程序中，灰度范圍變得更廣。

I was curious about the dark mode apps and sites I use. Through inspecting elements and getting the hex codes of colors from a screenshot, I analyzed the dark mode palettes of 6 popular apps.

我對我使用的暗模式應用程序和網站感到好奇。 通過檢查元素并從屏幕快照中獲取顏色的十六進制代碼，我分析了6種流行應用程序的暗模式調色板。

RGB色彩空間 (RGB Color Space)

RGB (RGB)

To talk about colors, we should start with how colors can be represented digitally.

要談論顏色，我們應該從如何以數字表示顏色開始。

The RGB color space is one of the most popular models. Each color is a combined weight of the three colors red, green, and blue. The weight ranges from 0 (least) to 255 (most) and is usually displayed in a triplet: (red weight, green weight, blue weight). For example, red would be (255, 0, 0) since pure red has no traces of green or blue. A deep eggplant purple is (128, 0, 128) with equal parts red and blue. We also have black which is a lack of color: (0, 0, 0) and white, all the colors: (255, 255, 255).

RGB顏色空間是最受歡迎的模型之一。 每種顏色是紅色，綠色和藍色三種顏色的總和。 權重的范圍從0(最小)到255(最大)，通常以三元組顯示：( (red weight, green weight, blue weight) 。 例如，紅色將為(255, 0, 0)因為純紅色沒有綠色或藍色的痕跡。 茄子深紫色是(128, 0, 128) ，紅色和藍色相等。 我們也有黑色，缺少顏色： (0, 0, 0)和白色，所有顏色： (255, 255, 255) 。

We can also visualize the RGB color space as a cube with red, green, and blue as the axis. Every color can be “plotted” in this cube.

我們還可以將RGB顏色空間可視化為以紅色，綠色和藍色為軸的立方體。 每種顏色都可以在此多維數據集中“繪制”。

What we’re interested in are the colors along and around the grayscale line. In this RGB cube, the grayscale line extends from black to white. Every color on this line has the same value for red, green, and blue. For example, medium gray is (127, 127, 127) and is the midpoint of the grayscale line. The closer to 0 the values are, the darker the shade of gray since black is (0, 0, 0).

我們感興趣的是沿著灰度線及其周圍的顏色。 在此RGB立方體中，灰度線從黑色延伸到白色。 該行上的每種顏色的紅色，綠色和藍色具有相同的值。 例如，中等灰度是(127, 127, 127) ，它是灰度線的中點。 值越接近0，因為黑色是(0, 0, 0)所以灰色陰影越深。

Colors that surround the grayscale line are not pure gray, but rather slightly tinted. For example, Twitter uses (25, 39, 52). Notice how even though the values are close to each other, the blue value is the largest. Thus, this shade of gray is a bit blue.

圍繞灰度線的顏色不是純灰色，而是略帶色。 例如，Twitter使用(25, 39, 52) 。 請注意，即使兩個值彼此接近，藍色值也是最大的。 因此，這種灰色陰影有點藍色。

十六進制代碼 (HEX Codes)

To digitize this RGB triplet, we have HTML (Hex) color codes. HTML, CSS, SVGs, and more use hex codes to represent colors. The name comes from how Hex codes are just the concatenation of RGB values in hexadecimal. Sometimes we precede a Hex code with a pound sign. If we convert the aforementioned colors to Hex, we have:

為了數字化此RGB三元組，我們有HTML(十六進制)顏色代碼。 HTML，CSS，SVG等使用十六進制代碼表示顏色。 該名稱來自十六進制代碼如何只是十六進制十進制數的RGB值的串聯。 有時，我們在十六進制代碼前加井號。 如果將上述顏色轉換為十六進制，我們將：

• Red: (255, 0, 0) → #ff0000

  紅色： (255, 0, 0) → #ff0000

• Eggplant purple: (128, 0, 128) → #800080

  茄子紫色： (128, 0, 128) → #800080

• Black: (0, 0, 0) → #000000

  黑色： (0, 0, 0) → #000000

• Medium gray: (127, 127, 127) → #7f7f7f

  中灰： (127, 127, 127) → #7f7f7f

• White: (255, 255, 255) → #ffffff

  白： (255, 255, 255) → #ffffff

• Twitter blue-gray: (25, 39, 52) → #192734

  Twitter藍灰色： (25, 39, 52) → #192734

Now that we know a bit about RGB and Hex representations, we can explore the world of dark mode.

現在我們對RGB和十六進制表示有所了解，我們可以探索黑暗模式的世界。

暗模式應用程序剖析 (Anatomy of a Dark Mode App)

Across my analysis of various apps and sites, I’ve noticed a some general patterns that most dark mode apps follow.

在對各種應用程序和網站的分析中，我注意到大多數暗模式應用程序遵循的一些常規模式。

背景 (Background)

As the most dominant color, the background is almost always the darkest. It’s never pure black — usually a couple of shades lighter.

作為最主要的顏色，背景幾乎總是最暗。 它永遠不會是純黑色的-通常會變淺一些陰影。

菜單欄 (Menu Bar)

These can be found on the side (usually left) or at the top of the app. Menu bars help with app navigation and are lighter than the background color.

這些可以在應用程序的側面(通常是左側)或頂部找到。 菜單欄有助于應用程序導航，并且比背景色淺。

卡 (Card)

With the rise of Material Design, comes the concept of cards. These elements compartmentalize the site content and are lighter gray as well.

隨著Material Design的興起，出現了卡片的概念。 這些元素將站點內容分隔開，并且也呈淺灰色。

分頻器 (Divider)

Some cards have dividers to break up the content. Dividers are even lighter still.

某些卡具有分隔符以分解內容。 分頻器甚至更輕。

紐扣 (Button)

Buttons invoke actions and can be gray or the app’s accent color.

按鈕可以調用操作，可以是灰色或應用的配色。

主要文字 (Primary Text)

The titles and headers. Primary texts are the lightest color on the site, usually very close to white.

標題和標題。 主要文字是網站上最淺的顏色，通常非常接近白色。

次要文字 (Secondary Text)

Secondary texts are smaller in font size and a bit darker than their primary counterparts.

次要文本的字體較小，但比主要文本要暗一些。

圖標 (Icon)

Representing ideas without words, icons are light as well and sometimes are accompanied by secondary text.

代表想法但不帶文字，圖標也很亮，有時還帶有輔助文字。

These are some characteristics many modern dark mode apps share! Now we’ll examine how these elements apply to popular apps.

這些是許多現代黑暗模式應用程序共享的一些特征！ 現在，我們將研究這些元素如何應用于流行的應用程序。

Spotify(macOS應用) (Spotify (macOS App))

Spotify is the earliest app I remember that only had dark mode. It didn’t start out this way. After undergoing a major redesign in 2014, the streaming service forced the dark theme on all its users. The argument for the switch was as such: the dark background allows for colorful album art to pop, akin to theaters dimming their lights for shows.

我記得Spotify是最早的應用， 只有暗模式。 它不是以這種方式開始的。 在2014年進行了重大的重新設計之后，流媒體服務對所有用戶施加了黑暗的主題。 切換的理由是這樣的 ：黑暗的背景允許彈出多彩的專輯封面，類似于劇院調暗燈光進行演出。

Indeed, the colorful album covers contrast with the dark app, and make them appear brighter than they would on a white background:

實際上，彩色專輯涵蓋了與深色應用程序的對比，并使它們顯得比白色背景明亮：

Spotify is also the only app I’ve noticed that uses a gradient for the main background. Referencing the palette, the background ranges from #404040, a much lighter gray, to #181818, almost black. My theory is also that users spend the most time looking at playlist pages:

Spotify也是我注意到的唯一使用漸變作為主要背景的應用程序。 參考調色板，背景的范圍是從#404040 (淺得多的灰色)到#181818 (幾乎是黑色)。 我的理論還在于，用戶花費最多的時間在播放列表頁面上：

Here, the gradient makes sense for a long list of items, almost imitating motion. On non-playlist pages, the gradient also provides some depth.

在這里，漸變適用于一長串項目，幾乎可以模仿運動。 在非播放列表頁面上，漸變也會提供一定的深度。

Additional comments:

補充說明 ：

• The primary text is pure white, and the secondary text is a light gray — pretty standard
  主要文字為純白色，次要文字為淺灰色-非常標準
• Every color is a pure shade of gray, no tints
  每種顏色都是純灰色陰影，沒有色彩
• The accent color (green) is subtly used to break up the shades of gray
  強調色(綠色)巧妙地用于分解灰色陰影

Twitter(網絡) (Twitter (Web))

Right off the bat, just by looking at the RGB values, Twitter heavily favors blue for its dark mode. For each of the shades, the blue value is the highest.

馬上，僅通過查看RGB值，Twitter就非常喜歡藍色作為其黑暗模式。 對于每種陰影，藍色值為最高。

Since its logo/accent color is blue, the blue-ness of the dark mode isn’t surprising and goes well together. As with any app that uses blue as its identifying color, Twitter hopes that this color choice conveys trust and tranquility.

由于其徽標/重點顏色是藍色，因此暗模式的藍色不足為奇，并且可以很好地搭配使用。 與使用藍色作為其識別顏色的任何應用程序一樣，Twitter希望這種顏色選擇能夠傳達信任和寧靜。

Additional comments:

補充說明 ：

• Twitter utilizes cards with dividers. The cards are lighter than the background to appear closer, giving a perception of depth.
  Twitter利用帶分隔符的卡片。 卡片比背景更輕，看起來更近，給人以深度感。
• The dividers on the cards are a lighter shade of blue
  卡上的分隔線為淺藍色
• Primary text is pure white and secondary text is light blue
  主要文字為純白色，次要文字為淺藍色
• Blue accent color used throughout
  貫穿始終使用的藍色配色
• Logo is icon-like and is white
  徽標像圖標，是白色的

臉書(網頁) (Facebook (Web))

Facebook’s dark mode color decisions are interesting. If you look at the Hex codes, none of the colors are on the grayscale line. Instead, each RGB value is close to each other, slightly increasing from red to green to blue. It’s so subtle that it’s virtually unnoticeable when using the app:

Facebook的深色模式色彩決定很有趣。 如果您查看十六進制代碼，則沒有任何顏色在灰度線上。 相反，每個RGB值彼此接近，從紅色到綠色再到藍色略有增加。 它是如此的微妙，以至于在使用該應用程序時幾乎看不到它：

The colors might as well be grayscale colors.

顏色也可以是灰度顏色。

Additional comments:

補充說明 ：

• Facebook also uses lighter cards
  Facebook還使用打火機卡
• Lighter dividers are used on left and right menu bars
  左右菜單欄上使用了較輕的分隔線
• The primary text is not white, instead of a shade of very light gray
  主要文字不是白色，而是非常淺的灰色陰影
• The icons on the top right are this off-white as well, encased by gray button circles while the icons on the top are a darker shade of gray. The icons on the left menu are colorful instead
  右上方的圖標也是灰白色，由灰色按鈕圓圈包圍，而頂部的圖標則是較深的灰色陰影。 左側菜單上的圖標改為彩色的

YouTube(網頁) (Youtube (Web))

The dark mode palette used by YouTube is almost uninteresting. Each shade of gray is exactly on the grayscale lines. Unlike the apps above, there doesn’t seem to be an accent color. You don’t see the YouTube red anywhere in the app except the logo in the top left.

YouTube使用的深色模式調色板幾乎沒有意思。 每個灰色陰影正好位于灰度線上。 與上面的應用程序不同，似乎沒有強調色。 除了左上方的徽標，您在應用中的任何地方都看不到YouTube紅色。

中(iOS應用) (Medium (iOS App))

If Medium didn’t have dark mode, I most definitely wouldn’t use the app every night before bed 😅 Much like its plain logo of black and white, Medium’s iOS app’s dark mode colors are super simple. In my opinion, this simplicity works well for a publishing platform — it’s reminiscent of old-fashioned newspapers.

如果Medium沒有深色模式，那么我絕對不會每天晚上睡前使用該應用程序Medium非常類似于其黑白徽標，Medium的iOS應用程序的深色模式顏色非常簡單。 我認為，這種簡單性對于發布平臺非常有效-讓人聯想到老式報紙。

Additional comments:

補充說明 ：

• The background color is the darkest we’ve seen so far, almost pure black
  背景顏色是迄今為止我們所見過的最暗的顏色，幾乎是純黑色
• Medium uses its green accent color throughout the app as well
  在整個應用程序中，Medium也會使用其綠色的配色

蘋果 (Apple)

蘋果手機 (iPhone)

Dark mode for the iPhone can be seen in the native Apple apps such as Settings, iMessage, Notes, Photos, etc. Apps that you download can also recognize that you’ve set your iPhone to dark mode and adjust their theme automatically.

在本機Apple應用程序(例如“設置”，“ iMessage”，“便箋”，“照片”等)中可以看到iPhone的暗模式。您下載的應用程序還可以識別出您已將iPhone設置為暗模式并自動調整其主題。

Additional comments:

補充說明 ：

• Unlike all the apps before, the iPhone dark mode uses pure black for the background
  與以前的所有應用程序不同，iPhone暗模式將純黑色用作背景
• The card colors favor blue. Like Facebook, the blue tint is pretty much unnoticeable
  卡的顏色偏愛藍色。 像Facebook一樣，藍色色調幾乎不引人注目

蘋果電腦 (Mac)

Now, this is where it gets interesting. Apple actually makes the backgrounds of native Mac apps transparent — but transparent relative to your desktop wallpaper, not whatever is currently open under the app. Thus, there is no decisive palette of colors since wallpapers vary.

現在，這才變得有趣。 蘋果實際上使本機Mac應用程序的背景透明-但相對于您的桌面墻紙是透明的，而不是該應用程序下當前打開的任何內容。 因此，由于墻紙不同，因此沒有決定性的調色板。

However, MacOS does have elements of a typical dark mode app: menu bars, cards, primary/secondary text, etc. Besides the transparent background (which is a really cool touch; I encourage you to explore this for yourself), the MacOS dark mode is predictable.

但是，MacOS確實具有典型的黑暗模式應用程序的元素：菜單欄，卡片，主要/次要文本等。除了透明背景(這確實很酷；我鼓勵您親自研究一下)之外，MacOS Dark模式是可預測的。

結論 (Conclusion)

If you ever thought that all dark mode apps are starting to look the same, you’re not wrong. They share the common elements we learned about: Usually a dark, almost black, background color, with lighter menu bars lining the top and/or sides; even lighter, rounded-corner cards section content, and seem to appear closer because of the color contrast; accent color jellybean buttons, a bright white primary text, and smaller slightly darker secondary text… All the apps blend together.

如果您曾經以為所有暗模式應用程序看起來都一樣，那您就沒錯。 它們具有我們了解到的共同要素：通常是深色，近乎黑色的背景色，頂部和/或側面襯有較淺的菜單欄； 甚至更淺，更圓角的卡片部分內容，并且由于顏色對比而顯得更近； 帶有彩色軟糖按鈕，明亮的白色主文本和較小的較暗的輔助文本……所有應用程序融合在一起。

That being said, there are still ways to slightly deviate from this template. We saw Spotify’s gradient, Twitter’s blue-hued shades, and MacOS’s opaque background. If you’re designing a dark mode app, I encourage you to find ways to subtly stand out. After all, we could use some variety…and more shades of gray.

話雖如此，仍然有一些方法可以稍微偏離此模板。 我們看到了Spotify的漸變色，Twitter的藍色陰影和MacOS的不透明背景。 如果您要設計黑暗模式的應用程序，我鼓勵您找到巧妙地脫穎而出的方法。 畢竟，我們可以使用各種顏色……以及更多的灰色陰影。

Thanks for reading!

謝謝閱讀！