Right off the bat, just by looking at the RGB values, Twitter heavily favors blue for its dark mode. The accent color (green) is subtly used to break up the shades of grayįrom left to right: background, card, hover color, primary text, secondary text.
Every color is a pure shade of gray, no tints.The primary text is pure white, and the secondary text is a light gray - pretty standard.On non-playlist pages, the gradient also provides some depth. Here, the gradient makes sense for a long list of items, almost imitating motion. My theory is also that users spend the most time looking at playlist pages: Referencing the palette, the background ranges from #404040, a much lighter gray, to #181818, almost black. Spotify is also the only app I’ve noticed that uses a gradient for the main background. Indeed, the colorful album covers contrast with the dark app, and make them appear brighter than they would on a white background: 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. After undergoing a major redesign in 2014, the streaming service forced the dark theme on all its users. Spotify is the earliest app I remember that only had dark mode. Spotify (macOS App)įrom left to right: background, menu bar, top gradient, bottom gradient, primary text, secondary text These are some characteristics many modern dark mode apps share! Now we’ll examine how these elements apply to popular apps. Representing ideas without words, icons are light as well and sometimes are accompanied by secondary text. Secondary texts are smaller in font size and a bit darker than their primary counterparts. Primary texts are the lightest color on the site, usually very close to white. Buttonīuttons invoke actions and can be gray or the app’s accent color. Some cards have dividers to break up the content. These elements compartmentalize the site content and are lighter gray as well. With the rise of Material Design, comes the concept of cards. Menu bars help with app navigation and are lighter than the background color. These can be found on the side (usually left) or at the top of the app. It’s never pure black - usually a couple of shades lighter. Anatomy of a Dark Mode AppĪcross my analysis of various apps and sites, I’ve noticed a some general patterns that most dark mode apps follow:Īs the most dominant color, the background is almost always the darkest. Now that we know a bit about RGB and Hex representations, we can explore the world of dark mode. If we convert the aforementioned colors to Hex, we have:
#Css color codes palette code#
Sometimes we precede a Hex code with a pound sign. The name comes from how Hex codes are just the concatenation of RGB values in hexadecimal. HTML, CSS, SVGs, and more use hex codes to represent colors. To digitize this RGB triplet, we have HTML (Hex) color codes. Notice how even though the values are close to each other, the blue value is the largest.
The closer to 0 the values are, the darker the shade of gray since black is (0, 0, 0).Ĭolors that surround the grayscale line are not pure gray, but rather slightly tinted. For example, medium gray is (127, 127, 127) and is the midpoint of the grayscale line. Every color on this line has the same value for red, green, and blue.
In this RGB cube, the grayscale line extends from black to white. What we’re interested in are the colors along and around the grayscale line. Every color can be “plotted” in this cube. We can also visualize the RGB color space as a cube with red, green, and blue as the axis. We also have black which is a lack of color: (0, 0, 0) and white, all the colors: (255, 255, 255). A deep eggplant purple is (128, 0, 128) with equal parts red and blue. For example, red would be (255, 0, 0) since pure red has no traces of green or blue. The weight ranges from 0 (least) to 255 (most) and is usually displayed in a triplet: (red weight, green weight, blue weight). Each color is a combined weight of the three colors red, green, and blue. The RGB color space is one of the most popular models. To talk about colors, we should start with how colors can be represented digitally. Through inspecting elements and getting the hex codes of colors from a screenshot, I analyzed the dark mode palettes of 6 popular apps. I was curious about the dark mode apps and sites I use. And across various apps, the spectrum of gray becomes even wider. In a single app, a handful of shades of gray give the app some depth. 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.