Background Color Changer | Coders

Project Overview

This project creates a simple yet effective background color changer using HTML, CSS, and JavaScript. With a single click of a button, the entire background of the webpage dynamically changes to a new, randomly generated hexadecimal color. The corresponding hexadecimal code is also displayed on the screen, providing instant visual and textual feedback.

The design is minimalist, focusing on the core functionality. The button and the displayed hex code are styled for clarity and visual appeal, with smooth transitions for the background color change. This project is an excellent introductory example of how to manipulate DOM elements and generate random values in JavaScript to create interactive web experiences.

HTML Structure

The HTML structure for the background color changer is very straightforward, consisting of just a few key elements. It includes a `button` with the ID `btn`, which serves as the interactive element to trigger the color change. Below the button, an `h2` element with the ID `hexCode` is used to display the currently active hexadecimal color code. This minimal structure ensures a clean and focused user interface, allowing the JavaScript to easily target and manipulate these elements.


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Background Color Changer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button id="btn">Click Me</button>
    <h2 id="hexCode">#8a2be2</h2>

    <script src="app.js"></script>
  </body>
</html>

CSS Styling

The CSS for the background color changer provides a clean and responsive layout, along with interactive styling for the button and text. The `body` is styled with an initial `background` color (`blueviolet`), set to take up at least 90% of the viewport height, and uses flexbox to center its content both horizontally and vertically. A `transition` property is applied to the `body` to ensure smooth color changes. The `h2` element, which displays the hex code, is styled with white color and a light font weight for readability. The `button` is styled with transparent background, white border and text, and a smooth `transition` for its hover and active states. On `hover`, the button's background fills with white and its text turns black, while on `active` (click), its padding is reduced for a subtle press effect. This styling creates a user-friendly and visually appealing interface for the color changer.


body {
  background: blueviolet;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

h2 {
  color: #fff;
  font-weight: 200;
}

button {
  padding: 15px;
  background: transparent;
  border: 2px solid white;
  color: #fff;
  transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

button:hover {
  background: #fff;
  color: #000;
  cursor: pointer;
}

button:active {
  padding: 5px;
}

JavaScript

The JavaScript for the background color changer handles the core logic of generating random colors and applying them to the webpage. It starts by getting references to the `btn` (button) and `hexCode` (h2) elements. The `randomColor()` function is defined to generate a random hexadecimal color code. This function initializes an empty `color` string with "#" and then iterates six times, appending a random character (0-9 or A-F) to the `color` string. The `Math.floor(Math.random() * 16)` generates a random index to pick a character from the `letters` string. Finally, an event listener is added to the `btn` that, when clicked, sets the `document.body.style.backgroundColor` to a new random color generated by `randomColor()`, and updates the `hex.innerHTML` to display the new hex code. This script provides the dynamic functionality for the color changer.


const btn = document.getElementById("btn");
let hex = document.getElementById("hexCode");

function randomColor() {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

btn.addEventListener("click", () => {
  document.body.style.backgroundColor = randomColor();
  hex.innerHTML = randomColor();
});

Live Demo: Background Color Changer

Watch a live demonstration of the Background Color Changer below.

Final Thoughts

This Background Color Changer project is a simple yet effective demonstration of dynamic web interactions using core web technologies. It provides an intuitive way to visually change the aesthetic of a webpage with a single click, making it a great learning tool for beginners and a useful snippet for quick prototyping. The combination of HTML for structure, CSS for styling, and JavaScript for dynamic color generation results in a clean and interactive user experience.

You can easily customize this component by:

Adding more UI elements, such as a color palette for users to select from a predefined set of colors.
Implementing a "copy to clipboard" feature for the displayed hex code.
Adding a feature to generate RGB or HSL colors instead of just hex codes.
Integrating a "save" functionality to store favorite colors using local storage.
Enhancing the visual feedback with more complex animations or sound effects on color change.

Pro Tip

For more advanced color manipulation, consider using a dedicated color library or exploring CSS custom properties (variables) to manage your color schemes more efficiently across your entire stylesheet.

Background Color Changer Using HTML, CSS & Javascript

Project Overview

HTML Structure

CSS Styling

JavaScript

Live Demo: Background Color Changer

Final Thoughts

Pro Tip

Ready to Use This Project?

Project Overview

HTML Structure

CSS Styling

JavaScript

Live Demo: Background Color Changer

Final Thoughts

Pro Tip

Ready to Use This Project?

Stay Updated