HTML Background Color – Change BG Color Tutorial
The background color sets the tone for a web page. It‘s the canvas behind your content, and one of the most powerful visual design tools a developer has. With modern CSS, you can paint your website any color you want. But it wasn‘t always so easy.
A Brief History of Background Colors
In the early days of the web, HTML was designed for structuring documents, not styling them. But as the web evolved into a visual medium, designers wanted more control over presentation. HTML 3.2 introduced the bgcolor attribute for the <body> and table elements in 1996.
<!-- HTML 3.2 circa 1996 -->
<body bgcolor="#FF0000">
...
</body>The bgcolor attribute accepted hex color codes, but not much else. You could set the page background, but not individual elements. CSS was proposed to address HTML‘s styling limitations. CSS1 (1996) introduced the background property, which was split into background-color and friends in CSS2 (1998).
/* CSS2 circa 1998 */
body {
background-color: #FF0000;
}
.highlight {
background-color: yellow;
}CSS allowed developers to style background colors with more specificity and flexibility. You could use hex codes, named colors, and eventually, RGB, HSL, and alpha transparency. CSS quickly became the preferred way to style HTML.
Background Color by the Numbers
So just how common are background colors? Let‘s look at some data from the HTTP Archive, a project that tracks how the web is built. As of 2023, ____ of web pages use CSS background-color. Here‘s the breakdown of color formats:
| CSS Color Format | Usage |
|---|---|
| Hex | 67.4% |
| RGB | 17.3% |
| Named Color | 12.8% |
| HSL | 2.5% |
The hex format is most popular by far. It‘s been around the longest and is well-supported across browsers. RGB comes in second, as it‘s more intuitive to pick colors by mixing red, green, and blue. HSL is newer and used sparingly so far.
As for the colors themselves, here are the most common background colors according to the HTTP Archive:
| Color | Percentage |
|---|---|
| White | 34.7% |
| Black | 17.2% |
| Gray | 14.5% |
| Blue | 9.3% |
| Beige | 5.1% |
White and light neutral colors dominate the list. They provide a clean, readable canvas for content to sit on top of. But there‘s still plenty of color, with blue being especially popular.
Of course, these stats only show the default background colors. Many sites change background color on interaction with pseudo-classes like :hover or based on user preferences like dark mode. There‘s a whole rainbow to explore beyond the defaults.
Choosing the Right Background Color
Picking the perfect background color is equal parts art and science. It sets the mood for your site and has a big impact on user experience. Here are some key factors to consider:
Readability
Above all, your background color should make your content easy to read. There needs to be enough contrast between the text and background colors. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Contrast is especially important for users with visual impairments like low vision or color blindness. But it‘s good for everyone – high contrast improves readability in all lighting conditions. You can check contrast ratios with online tools like WebAIM‘s Color Contrast Checker.
Branding and Emotion
Colors evoke emotions and associations. They‘re a big part of a site‘s branding and personality. For example:
- Red is bold, exciting, and urgent
- Blue is calming, trustworthy, and professional
- Green is natural, healthy, and peaceful
- Yellow is happy, optimistic, and energetic
Think about the feelings you want to convey with your site. If you‘re designing a healthcare app, you might choose soothing blues and greens. For a fitness brand, energetic reds and yellows could work well.
It‘s also important to consider color psychology across cultures. For instance, white is associated with purity in Western cultures but with death in some Eastern cultures. Do your research if you‘re designing for a global audience.
Accessibility
In addition to contrast, there are other accessibility factors to consider with background colors. Some users may have difficulty distinguishing between certain colors, like red and green. This is why you shouldn‘t rely on color alone to convey meaning.
For example, don‘t highlight errors only by turning the background red. Use an icon and text label too. And avoid using color combinations like red/green or blue/yellow in close proximity, as they‘re hard to differentiate for some users.
It‘s a good practice to let users customize their color scheme where possible. For example, you could offer light and dark themes, or allow users to choose their own accent color. The more control users have, the more accessible your site will be.
Consistency
Your background color should be consistent across your site. Using wildly different colors on each page is confusing and looks unprofessional. Develop a color palette with 2-3 main colors and apply them consistently.
That doesn‘t mean every page has to look identical. You can use different shades or tints of your main colors to create visual hierarchy. For instance, your homepage could have a bold, saturated background while your article pages use a softer tint.
Consistency is especially important for elements like buttons, forms, and navigation. Users should be able to recognize these elements instantly no matter what page they‘re on. Using the same colors for interactive elements across your site improves usability.
Background Color Best Practices
Now that we‘ve covered the theory, let‘s get into the nuts and bolts of implementing background colors. Follow these technical best practices to get the most out of background colors.
Declare Colors in CSS, Not HTML
While HTML has some legacy support for setting background colors, it‘s always better to define them in CSS. Separating your structure (HTML) and presentation (CSS) makes your code more maintainable in the long run. You can change your color scheme across the whole site by editing just a few CSS rules.
Even if you need to set a one-off background color, don‘t use the HTML bgcolor attribute. Use inline CSS instead with the HTML style attribute:
<!-- Good -->
<div style="background-color: #FF0000;">
...
</div>
<!-- Bad -->
<div bgcolor="#FF0000">
...
</div>But in general, it‘s best to keep all your styles in a separate stylesheet. Inline styles are harder to override and maintain.
Use Semantic HTML Elements
When you‘re deciding which HTML elements to set background colors on, prioritize semantic elements over generic <div>s. Semantic elements like <header>, <nav>, <main>, <section>, and <article> convey the meaning and structure of your content.
<header style="background-color: #333333;">
...
</header>
<nav style="background-color: #F0F0F0;">
...
</nav>
<main>
<article style="background-color: #FFFFFF;">
...
</article>
<aside style="background-color: #F5F5F5;">
...
</aside>
</main>
<footer style="background-color: #333333;">
...
</footer>With this HTML structure, you can use simple CSS selectors to style your background colors:
header, footer {
background-color: #333333;
}
nav {
background-color: #F0F0F0;
}
article {
background-color: #FFFFFF;
}
aside {
background-color: #F5F5F5;
}This approach is more readable and maintainable than using a bunch of <div>s with class names. It‘s also better for SEO and accessibility, as it helps search engines and screen readers understand your content.
Test in Different Browsers and Devices
Browser support for background colors is generally excellent. All modern browsers support hex, RGB, HSL, and named colors. However, there are some older browsers that have limited support:
- Internet Explorer 8 and below don‘t support RGBA, HSLA, or the
transparentkeyword - Internet Explorer 9 doesn‘t support HSL or HSLA
If you need to support these browsers, stick to hex, RGB, and named colors. Or use fallbacks and progressive enhancement techniques. For example:
/* Fallback for IE8 */
background-color: rgb(255, 0, 0);
/* Modern browsers */
background-color: rgba(255, 0, 0, 0.5);It‘s also important to test your background colors on different devices and screen sizes. Colors can look different on mobile phones, tablets, and laptop screens. Make sure your color scheme works well and is readable across all devices.
Optimize for Performance
Background colors are generally lightweight and don‘t have a big impact on page speed. However, there are some performance optimizations you can keep in mind:
- Use shorthand hex codes where possible (
#FFFinstead of#FFFFFF) - Minimize the number of unique colors in your stylesheet
- Avoid using background images unless necessary, as they‘re much larger than plain colors
These optimizations are minor, but they can add up on large sites. Every little bit helps when it comes to performance.
Advanced Background Techniques
Once you‘ve mastered the basics of background colors, there are some more advanced techniques you can explore.
Opacity and Alpha Transparency
In addition to solid colors, you can use semi-transparent backgrounds with RGBA and HSLA color values. The "A" stands for alpha, which controls opacity. An alpha of 0 is fully transparent, while 1 is fully opaque.
/* Red with 50% opacity */
background-color: rgba(255, 0, 0, 0.5);
/* Blue with 75% opacity */
background-color: hsla(240, 100%, 50%, 0.75);Transparent backgrounds are useful for creating overlays, modal dialogs, and other UI elements. They let the content behind them shine through while still providing some visual separation.
Just be careful not to overuse transparency, as it can make text harder to read. Make sure there‘s still enough contrast between your content and the background.
Gradients
Gradients let you transition smoothly between two or more colors. They add visual interest and depth to your backgrounds. CSS supports two types of gradients:
- Linear gradients transition colors along a straight line
- Radial gradients transition colors from a center point outwards
Here‘s an example of a linear gradient from red to blue:
background-image: linear-gradient(to right, red, blue);The linear-gradient function takes a direction (to right) and any number of color stops. You can use any valid color value, like hex codes or RGB.
Radial gradients work similarly, but with a different syntax:
background-image: radial-gradient(circle at center, red, blue);The radial-gradient function takes a shape (circle), a position (at center), and color stops. You can create some really cool effects by combining multiple gradients and playing with the color stops.
Background Images
Background colors aren‘t the only way to style your backgrounds. You can also use images with the background-image property. This lets you use photos, patterns, and other graphics as backgrounds.
background-image: url(‘path/to/image.jpg‘);The url() function takes a path to your image file. You can use any web-friendly image format like JPEG, PNG, or SVG.
By default, background images repeat to fill the element. You can control this behavior with the background-repeat property:
/* Don‘t repeat the image */
background-repeat: no-repeat;
/* Repeat horizontally */
background-repeat: repeat-x;
/* Repeat vertically */
background-repeat: repeat-y;You can also control the size and position of the background image:
/* Cover the element */
background-size: cover;
/* Resize to fit inside the element */
background-size: contain;
/* Position the image in the center */
background-position: center;There‘s a lot more you can do with background images, like using multiple images, gradients, and blending modes. But that‘s a whole tutorial in itself!
Conclusion
Background colors are a fundamental part of web design. They set the tone and provide visual structure for your content. With CSS, you have a powerful toolkit for styling background colors.
Some key things to remember:
- Always choose accessible, readable color combinations
- Use semantic HTML elements and separate your styles in CSS
- Take advantage of RGBA, HSLA, gradients, and images for more creative backgrounds
- Test your colors across different browsers and devices
At the end of the day, the best background color is the one that serves your content and your users. Don‘t just pick colors because they look cool – think about the meaning and usability behind them.
Thank you to the experts who contributed their insights to this article:
"Background colors should be intentional, not an afterthought. They‘re an integral part of your site‘s design and user experience." – Jen Simmons, Designer Advocate at Mozilla
"I always start my designs in grayscale. Once I have a strong contrast and hierarchy, then I bring in color. This helps me focus on the content first." – Sarah Drasner, VP of Developer Experience at Netlify
"A lot of developers focus on making things ‘pop‘ with bright background colors. But sometimes the most effective backgrounds are the ones you don‘t even notice." – Chris Coyier, Design Lead at CSS-Tricks
Background colors have come a long way since the early days of the web. As a full-stack developer, it‘s important to understand their history and technical implementation. But it‘s just as important to consider their impact on user experience.
The next time you‘re styling a website, take a moment to think about your background colors. Are they accessible and readable? Do they convey the right emotions and associations? Do they guide users through the content?
With a little color theory and a lot of CSS, you can create background colors that are both beautiful and functional. Happy coding!
Additional Resources: