Generate Random Color with JavaScript

Whether you’re a beginner or an experienced developer, this guide will help you generate random color with JavaScript to your web projects in new and exciting ways.

Preview (Generate Random Color with JavaScript)

HTML

For this project of generate color with JavaScript we only need 2 HTML elements. A <p> tag with id of color & a <button> that can be used to generate a onClick event.

<p id='color'></p>
<button>Generate</button>

CSS

Align the HTML Center to the center of the page by using display:flex & align-items: center

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.2s;
}
button {
    margin-top: 20px;
    border: 0;
    background: #eee;
    color: #000;
    padding: 12px 20px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
}
button:focus, button:active {
    outline:none;
}
p { 
    font-size: 32px;
}

JavaScript

let text = document.querySelector("#color");
document.querySelector("button").addEventListener("click", () => {
    let colorletter = "";
    let letters = '0123456789ABCDEF';
    for (var i = 0; i < 6; i++) {
        colorletter += letters[Math.floor(Math.random() * 16)];
    }
    let color = "#" + colorletter;
    text.innerHTML = color;
    document.body.style.background = color;
})

Here is the Github repository link: https://github.com/code-architects/generate-random-hex-color

This project was a part of our 15 Days – 15 Projects series. Read more projects 👇

• Create beautiful Profile Card with HTML & CSS
• Star Rating with HTML and CSS
• Social Share Buttons/Links

Happy Coding 💞