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

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

Have you noticed your screen looks a little darker lately? You’re not alone. Black backgrounds are popping up everywhere. As dark mode websites grow in popularity—with operating systems, browsers, and apps—so does its prevalence in modern web design.

Though it feels fresh, dark mode websites and its use in design 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 dark mode websites with black backgrounds, and see 14 examples of sites with dark backgrounds done well.

What is dark mode?

Also called black mode, dark theme, or night mode, dark mode is a 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 website design doesn’t just mean choosing a black background color with a value of pure black (Hex code #000000) and calling it done. What works in one dark mode website design solution 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 website background color solutions available, 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 web design doesn’t have to mean going grayscale.

Miramar’s dark mode website 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 design 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 dark background color to create a homepage experience to match the French restaurant's reputation of creating once-in-a-lifetime dining experiences.

Their site also features rich background colors—like velvety eggplant and smokey pine green—to achieve a dark mode look.

Best black background alternatives for dark mode website design

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 websites—and, what’s not so good

Black backgrounds help make images pop

Have you ever noticed that many museums and photographers often use black backgrounds on their dark mode 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 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. That’s because a dark mode website interface featuring a black background requires less battery power to display on top of looking great.

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

Dark mode websites may hinder 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 website design 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 creating a dark mode website might be your best bet for limiting eye strain. Staring at stark ivory 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. Ebony is always 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.


14 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 backgrounds space. Their designers have used black backgrounds in their dark mode website and apps to energize their layouts and make album artwork “sing.”

The British Museum

Screengrab of the British Museum's dark mode websiteOn the British Museum’s dark mode 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 website design to make low-light browsing easier on their audience’s eyes.

Tracking Football

Screengrab of Tracking Football's half dark mode designNot ready to go all-in with dark mode? Split the difference, like Tracking Football, by using a dark mode website 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 dark mode website created for the United States Marines’ recruitment efforts deploys a dark mode aesthetic from the navigation 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 website design is balanced out—strategically—with a light gray homepage carousel element to promote its featured products to users.

Campaign Monitor

Screengrab of Campaign Monitor's dark mode website 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 website 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