Dark mode design: 14 examples of black background websites that work

A computer screen showing a website with a black background, which is an example of a dark mode design

Have you noticed your screen looks a little darker lately? You’re not alone. As dark mode keeps growing in popularity—with operating systems, browsers, and apps—so does its prevalence in web design.

Though it feels fresh, designing in dark mode is nothing new. If you ever used a computer in the ’80s that had a monochrome screen (or if you have seen them used in the movies—Ferris Bueller? Anyone, anyone?), you know the look. Most of the earliest home computers displayed green or white text on simple black backgrounds.

Read on to learn about the pros and cons of creating websites with black backgrounds and see 14 examples of dark mode design done well.

What is dark mode?

Also called black mode, dark theme, or night mode, dark mode is a design term used to describe any light-on-dark color scheme that many users prefer using in low-light environments. In its most basic iteration, think bold white text on a jet black background.

Fifty shades of (dark) gray

Dark mode isn’t just choosing a website background color with a value of pure black (Hex code #000000) and calling it done. What works in one website design might not make the same impact on another. To get a look that works, color selection requires more nuance.

When you are ready to paint it black, don’t limit yourself to #000000. With tons of different dark mode color solutions available for your website background, consider if a cool black or warm black will best serve the user experience, complement the overall webpage design, and enhance your brand identity color palette.

Pro-tip: Dark mode doesn’t have to mean going grayscale.

Miramar’s dark mode homepage design

Choosing a dark mode website doesn't have to literally be black and white. There are plenty of ways to get a dark mode look with other colors with qualities similar to black.

Take world-famous Mirazur, for example. Their web design firm picked an earthy coffee-black for its website background color to create a homepage experience to match the French restaurant's reputation for creating once-in-a-lifetime dining experiences. Their site also features background colors like velvety eggplant and smokey pine green to build a dark mode look.

Unsure where to start your hunt for the perfect dark mode background hue? Here are some of the most popular dark mode Hex code values used to add rich darkness to websites:

  • #0A0A0A
  • #121212
  • #15292B
  • #161618
  • #181818
  • #192734
  • #212121
  • #212124
  • #22303C
  • #242526
  • #282828
  • #3A3B3C
  • #404040

What’s so great about dark mode—and, what’s not so good

Dark mode helps make images pop

Have you ever noticed that many museums and photographers often use black backgrounds on their websites? It’s not just a sophisticated aesthetic preference. They make that choice deliberately to ensure their photos and illustrations come alive. White backgrounds often wash out images, but—because the color black recedes—dark mode backgrounds make pictures with brighter colors stand out and come alive.

Another perk? If most people access your site from their smartphones, you'll have very happy users because interfaces with dark mode backgrounds require less battery power.

“The eye is always caught by light, but shadows have more to say.”—Gregory Maguire

Dark mode often hinders readability

Researchers have found (pdf) that light text on dark backgrounds is harder to read than dark type on white backgrounds due to the “halation” effect. This phenomenon makes dark mode a less than ideal choice for almost all copy-heavy websites.

According to user experience designer Jacob Nielson, “Optimal legibility requires black text on white background. White text on a black background is almost as good. ... Legibility suffers much more for color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.”

If your website is likely to be used at night or by users in dimmer/low-ambient light settings, researchers have found that dark mode might be a better bet for limiting eye strain. Staring at bright white screens created by bright white website backgrounds can cause sensations of discomfort when users are in dark rooms.

As with most things, there are exceptions in this legibility debate. For instance, users with cataracts actually find websites with dark mode backgrounds easier to read than those with white backgrounds. Double-check your website persona research to learn if there are any demographics that would make sense to pursue a dark mode website redesign.

Dark mode elicits powerful emotions

Black is anything but neutral. It’s a dominant color associated with elegance, style, and power that, when used strategically as a website’s background color, adds visual appeal and depth.

Pro-tip: Check out what your competition is doing online.

Design decisions shouldn’t just be based on aesthetics and usability. You have to think about your business needs, too. If your customers see dark mode websites when they visit your competition online, going with a website design that’s attractive, light, and airy may help you stand out from the crowd in their browsers.


12 examples of dark mode website designs

WeTransfer

Screengrab of a WeTranfer's main landing pageWeTransfer proves that black and white is anything but boring with their elegant, dark mode homepage design.

Spotify

Screengrab of a Spotify webpage with a black backgroundSpotify is an OG in the dark mode design world. Their web design team has always used black backgrounds in their website and apps to energize their layouts and make album artwork “sing.”

The British Museum

Screengrab of the British Museum's dark mode homepageOn the British Museum’s homepage, web designers use simple typographic treatments and a rich black background color to set off their eye-catching photography.

Saturday Night Live

Screengrab of SNL's dark mode homepageTalk about knowing your users and thinking about accessibility. Knowing a lot of their users will visit late at night when the show is airing, Saturday Night Live uses a dark mode design to make low-light browsing easier on their audience’s eyes.

Tracking Football

Screengrab of Tracking Football's half dark mode homepageNot ready to go all-in with dark mode? Split the difference, like Tracking Football, by using a dark mode design to create interest at the top of its homepage and a white background below to present more detailed information about their service. Learn more about Tracking Football’s website design project.

Apple AirPod Pros

Screengrab of Apple AirPod Pros' dark mode landing pageDepending on the product or content being shared, Apple changes its website templates from light mode to dark mode, as shown in this example of their black background landing page for AirPod Pros.

Star Wars

Screengrab of Star War's dark mode websiteDon’t tell Yoda, but Disney’s website for everything related to the Star Wars universe has gone to the dark side ... and embraced black backgrounds for all of their page templates—even its blog!

MIT

Screengrab of MIT's vertically-divided partial dark mode homepageThe right side of MIT’s homepage goes dark mode with a wash of midnight blue in the background to set off links to its latest news, announcements, and research.

The United States Marines

Screengrab of the Marines' recruitment website features a dark mode designEach page on the recruitment website for the United States Marines deploys a dark mode aesthetic from the nav through the hero area, supported by a black background that effectively frames copy in the main content area.

DeWalt

Screengrab of DeWalt's dark mode homepage designDeWalt’s dark mode homepage design is balanced out—strategically—with a light gray carousel element to promote its featured products to users.

Campaign Monitor

Screengrab of Campaign Monitor's dark mode design for its demo landing pageNotice how the dark background lures your eyes to the form after you scan the faces on the right? Even if the rest of your website isn’t designed with a dark mode look, you use dark fields of color to improve user engagement on key webpages.

Cats

Screengrab of the musical Cats' dark mode homepage designEchoing the musical’s iconic playbill design, the Cats homepage uses a black background and splashes of white and yellow to point users to popular content.

Penn & Teller

Screengrab of Penn & Teller's dark mode homepage designThe dark mode homepage for the world’s most famous magicians breaks up the dense black background with a grid of vibrant news, photos, and promos.

Ozzy Osbourne

Screengrab of Ozzy Osbourne's black background websiteLast but not least—talk about being on brand. Of course the “prince of darkness,” aka Ozzy Osbourne, has a dark mode website with a sinister black background.

You might also like:

Joy

About the author | Joy Miller

Joy is the creative director at TBH Creative and uses her expertise to help clients use their online communications to build, design, and manage their brands. She likes to blog about content marketing in all its forms, the latest trends in digital marketing, and share tools with readers.

View more posts by Joy

Receive articles in your inbox