How to change background color randomly in a javascript function

Question

I would appreciate any help. I want to change the text color of the button every time it is a darker background color. I have been trying other variations of the below code. I cant seem to get the newColor to work. Thanks in advance for your help.

const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', () => {
    const newColor = randomColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
})


let newColor;

const randomColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    newColor =  r * 0.299 + g * 0.587 + b * 0.114
    if(newColor > 186) {
        newColor = 'black';
    } else {
        newColor = 'white';
    }
    return `rgb(${r}, ${g}, ${b})`;
}

I tried making my own function, I have tried putting an if statement on the outside of the function.

Albert Badias · Accepted Answer · 2022-11-01 19:48:05Z

4

You can use the follow code:

var newRandomColor = Math.floor(Math.random()*16777215).toString(16)

This code works for generate random colors. Hope it helps you

edited Nov 1, 2022 at 19:48

answered Nov 1, 2022 at 19:05

Albert Badias

1187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bek Johansson Over a year ago

Albert would I put your newRandomColor where I have newColor? If that is the case how could I get the rgb values to be returned? Thank you for your answer.

Albert Badias Over a year ago

Do you need specifically a RGB color? Sorry, I though you could use any type of color code. The code i've gaven you it's an hexadecimal color code, tell me if you need a rgb one.

Albert Badias · Accepted Answer · 2022-11-05 10:03:00Z

0

For specifically an RGB color code you can use:

function RGBcolor() {
  var R = Math.floor(Math.random() * 256);
  var G = Math.floor(Math.random() * 256);
  var B = Math.floor(Math.random() * 256);
  var randomcolor = "rgb(" + R + "," + G + "," + B + ")";  
  console.log(randomcolor);
}

RGBcolor();

Hope it helps too!

answered Nov 5, 2022 at 10:03

Albert Badias

1187 bronze badges

Comments

Abir Tasrif Anto · Accepted Answer · 2023-04-04 05:49:38Z

0

Changing the background with random hex colors everytime page loads or refresh

const hexDigits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "a", "b", "c", "d", "e", "f"];

function generateRandomColor(hexDigits) {
  let bgColor = "#";

  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * hexDigits.length);
    bgColor += hexDigits[index];
  }
  return bgColor;
}

function changeBgColor() {
  const color = generateRandomColor(hexDigits);
  document.body.style.backgroundColor = color;
}

window.addEventListener("load", changeBgColor());

answered Apr 4, 2023 at 5:49

Abir Tasrif Anto

12 bronze badges

Comments

DaveL17 · Accepted Answer · 2023-10-09 02:23:18Z

0

This function works perfectly.

function clickChangeBg() {

    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    let rgbValue = "#" + randomColor;
    document.body.style.backgroundColor = rgbValue;
}

edited Oct 9, 2023 at 2:23

DaveL17

2,06110 gold badges30 silver badges48 bronze badges

answered Oct 5, 2023 at 9:33

Irene Cantero

11 bronze badge

Comments

Bhaskar Saini · Accepted Answer · 2024-01-30 13:23:44Z

0

This is how I learn to create random colors by changing HEX values

const randomColor = function(){
  const hex = '0123456789ABCDEF'; //hex colors range
  let color = '#';
  for(let i=0;i<6;i++){
    color += hex[Math.floor(Math.random()*16)];
  }
  return color;
}
console.log(randomColor()) //to verify our color

I hope you find it helpful!

answered Jan 30, 2024 at 13:23

Bhaskar Saini

1

Comments

404MR · Accepted Answer · 2025-09-07 19:49:50Z

-1

const button = document.querySelector('button');
 function rannumbers(){

    return Math.floor( Math.random() * 256 )

}

function randColor(){
    return `rgb(${rannumbers()} , ${rannumbers()} , ${rannumbers()} )`
} 

button.addEventListener('click' , ()=>{
    document.body.style.backgroundColor = randColor()
})

answered Sep 7 at 19:49

404MR

12 bronze badges

1 Comment

Community Sep 7 at 22:31

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Pankaj Chouhan · Accepted Answer · 2024-02-28 05:24:35Z

<style>
    li {
        list-style: none;
        border: solid 1px black;
        height: 25px;
        width: 25px;
        border-radius: 100px;
        text-align: center;
        float: left;
        padding: 25px;
        margin: 5px;
        background-color: aqua;
    }
</style>


<label>Enter Number: </label>
<input type="text" id="box_no">
<button onclick="changeColor()">Result</button>

<ul id="print">
</ul>

<script type="text/javascript">

    function generateNewColor() {
        const hexCharacters = '0123456789ABCDEF';
        let hexColorRep = "#";
        for (let i = 0; i < 6; i++) {
            hexColorRep += hexCharacters[Math.floor(Math.random() * 16)];
        }
        return hexColorRep;
    }

    function changeColor() {
        let list = parseInt(document.getElementById("box_no").value);
        let print_data = document.getElementById("print");
        print_data.innerHTML = ''; // Clear previous content
        for (let i = 0; i < list; i++) {
            let listItem = document.createElement('li');
            listItem.style.backgroundColor = generateNewColor();
            listItem.textContent = i + 1;
            print_data.appendChild(listItem);
        }
    }
</script>

Collectives™ on Stack Overflow

How to change background color randomly in a javascript function

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Related