Black paper on black background

Black Backgrounds on Websites: How to Do It Right


Black paper on black background

Thinking of going dark mode with a black background design? You have a few ways to approach it…

With more and more mainstream apps and sites, from Duolingo to Uber, switching to dark mode, it’s clear that businesses are being seduced by the dark side. Black background designs not only look polished and dramatic, but they’re also easier on the eye than bright or white backgrounds, making nighttime reading experiences more soothing. 

But black backgrounds come with many pitfalls if you don’t use them correctly.

Here you’ll pick up pro tips for how to use black backgrounds on your website and app designs, from which HEX codes to use, which colors to pair with dark tones, and how to integrate texture, photos, and gradients into a dark background to create an immersive and engrossing website design. 

How to Use Black on Websites and in Apps?

Black is a perennially chic color long favored by fashion and print designers. But, it’s only recently that the color achieved widespread appeal in web design.

Black Backgrounds on Websites: How to Do It Right — Dark Backgrounds for Websites and Apps
A dark website design using this image by contributor YARUNIV Studio.

In web design, the HEX code #000000 is pure black. While #000000 achieves a simple wash of dark black across your website layout, it can lack depth and interest. Users might see it as an indifferent absence of color rather than a bold statement.

Instead look for alternative HEX blacks to give your website design a particular quality. Blacks can be warmer or cooler, or lean towards charcoal (#36454f) or slate gray (#3D4849) for a more subtle take on the dark trend. Different tones of black also pair beautifully with specific color groups, such as pastels, neons, or brights. There are many recognized variations of black out there — jet, onyx, ebony — and each suits a different purpose. (Check out our guide to the color black for more on the range of blacks you can use, plus the psychology behind this powerful hue.)

While pairing #000000 with crisp white can create a high-impact scheme (see below), other schemes will benefit from subtly different black tones.

Below, discover six color palettes for contemporary and cutting-edge black website backgrounds. Use these palettes to give your site designs more depth and drama. You’ll also find tips for using photos and textures as part of a dark website scheme.

Black Background Design #1: Minimalist Black and White

Black Backgrounds on Websites: How to Do It Right — Minimalist Black and White
A black and white website scheme using this abstract badge background by contributor molaruso.

Black and white is the highest-contrast color combination you can use on the web, and this interplay of dark and light can make for impactful and elegant website layouts. 

The high contrast between black and white also makes websites user-friendly and accessible for individuals with visual impairment. It’s also a good color scheme to adopt if you’re set on using serif, italic, or novelty fonts, which are usually harder to read on screens than sans serifs. 

A black background helps to frame starker white elements, helping to draw the eye towards white text or white buttons.

A black background can give an impression of vastness, which helps your website to feel like it extends beyond the edges of the screen. Help your users navigate their way through the expansiveness of a dark website by pulling out actionable elements in stark white. The contrast in color will help direct the UX pathway.

Try these black and white color schemes and backgrounds in your website designs:

Black Backgrounds on Websites: How to Do It Right — Designing with Hex Codes
Black Backgrounds on Websites: How to Do It Right — Creating a Striking Web Background
Image by contributor Mayer George.
Black Backgrounds on Websites: How to Do It Right — Abstract Black and White for App Design
Image by contributor PsyComa.

Black Background Design #2: Black Textures

Black Backgrounds on Websites: How to Do It Right — Dark Texture Backgrounds
A website layout using a black stone wall texture background by contributor TippaPatt.

A stark black background can look a little flat at times­—so bringing in a dose of texture into your designs can be surprisingly transformative. 

Textures don’t have to be obvious. A background photo with subtle noise, glitch, or dust texture can be enough to give your website more depth and interest. A tried-and-tested technique of print designers, web design can also benefit from the ability of textured backgrounds to make a layout feel ironically less digitized and clinical. 

An alternative approach is to look for more striking patterns and geometric designs. When rendered in all black, these still retain a minimalist spirit and are a wonderful way to bring more interest to a site layout when you don’t want to use photos or too much typography. They also still provide a blank canvas of dark color that allows you to be more playful with the color of buttons and text.

Here are some simple black textures to use in your website designs:

Black Backgrounds on Websites: How to Do It Right — Use Texture to Add Depth
Image by contributor sumroeng chinnapan.
Black Backgrounds on Websites: How to Do It Right — Texture Adds Visual Interest
Image by contributor shuttersv.
Black Backgrounds on Websites: How to Do It Right — Minimalist Geometry in Web Design
Image by contributor chanchai howharn.

Black Background Design #3: Neon Gradients

Black Backgrounds on Websites: How to Do It Right — Black Backgrounds and Neon Gradients

Neon text paired with a black background gives websites a retro-futuristic feel, mainly in thanks to the code-inspired styling of The Matrix. However, the neon and black combination has moved on and modernized. It’s no longer the calling card of only tech firms or web developers.

Today, a range of businesses can benefit from the eye-catching potential of a neon-black palette on their websites and apps. How can designers make the palette more tech-chic than tech-geek? Gradient neon colors bring more dynamism and depth to website layouts when paired with an inky-black background, and look especially effective as part of large-scale typography or scrollable sections.

You can create gradient colors using CSS code. Selecting and coding your color with the online CSS Gradient tool is easy. Use the sliders to select colors for simple bicolor linear gradients or more complex radial gradients, and copy the code beneath for inserting into your CSS editor.

Try out these two neon and black schemes to give your website a contemporary twist on 1980s style.

Black Backgrounds on Websites: How to Do It Right — Modernizing Retro Colors
Black Backgrounds on Websites: How to Do It Right — 80s Retro Neons and Black

Alternatively, inject your website with instant neon color by using a photo such as this one by contributor railway fx:

Black Backgrounds on Websites: How to Do It Right — Neon and Black Background Image
Image by contributor railway fx.

Black Background Design #4: Full-Width Photos

Black Backgrounds on Websites: How to Do It Right — Full-Width Black and White Photography
A website design using a black and white portrait of a baboon by contributor Dramas.

Photos with black backgrounds make for incredibly stylish and dramatic images. No wonder they are a style frequently favored by fashion and lifestyle photographers. Photos with black backgrounds give websites an immersive, cinematic quality, which suits a wide range of businesses from corporate services to fashion, travel, and ecommerce.

A simple trick of the trade? Use a photo as a not-so-subtle visual cue, using the angle of eyes or hand gestures to direct the user’s attention to important buttons, offers, or menu items.

You can find extremely high-resolution images with black backgrounds on the Shutterstock library, suitable for even the largest retina screens.

Need to extend the width of a photo to suit responsive web designs? The lack of detail in black backgrounds allow you to seamlessly extend the edge of photos. Use the Eyedropper plugin for Chrome to pick up the specific HEX tone from your chosen photo.

Below, find our edit of the best photos with black backgrounds. These images will help you create compelling and immersive full-width web layouts.

Black Backgrounds on Websites: How to Do It Right — Designing with Black Full-Width Images
Image by contributor Zamurovic Photography.
Black Backgrounds on Websites: How to Do It Right — Extend Your Background to Fit Any Screen
Image by contributor Djomas.

Black Background Design #5: Charcoal and Slate

Black Backgrounds on Websites: How to Do It Right — Charcoal and Slate Color Scheme
Website design with an off-black background, courtesy of this stylish slate plate image from contributor YARUNIV Studio.

There might be fifty shades of gray, but there are just as many shades of black too. From ebony to onyx, jet to charcoal, slate to taupe, there’s a wealth of blacks to choose from, with the HEX codes to match.

Off-black shades can give your dark website designs a more subtle, professional look, which makes these blacks a great fit for corporate websites or quietly stylish design businesses, such as architects and interior designers. Less stark than pure black, tones of charcoal and slate are quietly elegant. They also make a stylish foil for a broad range of accent colors, such as coral, mint, dusky pink, and sky blue.

The color scheme favored by the SwissOne Capital website is an elegant exercise in how to use a more subtle charcoal-black palette on a website layout. Tomato red is used sparingly as an eye-drawing accent, with dark slate gray and crisp white providing a corporate-appropriate backdrop.

Experiment with this punchy yet elegant color scheme on your own website design, or try a slate-tinted photo for a subtly dark backdrop: 

Black Backgrounds on Websites: How to Do It Right — Add a Pop of Vivid Accent Color
Black Backgrounds on Websites: How to Do It Right — Making the Most of Off-Black Color
Image by contributor YARUNIV Studio.

Looking for more website design inspiration? Don’t miss these handy tips and techniques for designing beautiful and effective websites:

  • 30 Refreshing Color Palettes for Your Website
  • 20 Websites With Gorgeous Patterned Backgrounds
  • Simple Website Layout Design Tips Anyone Can Follow
  • 4 Ways to Future-Proof the Look of Your Website
  • What is the Best Website Builder For You? Discover our Breakdown

Cover image by contributor Mykolastock.

The post Black Backgrounds on Websites: How to Do It Right appeared first on The Shutterstock Blog.

Leave a Reply

Your email address will not be published. Required fields are marked *