background generator with using random color but i got warning message on the javascript file

Question

I try to add the random button to change the background color automatically, but i got this error. How to develop this code far better.

The specified value "rgb(182,22,242)" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button = document.getElementById("random");


function gradientcolor() {
    body.style.background =
        "linear-gradient(to right,"
        + color1.value
        + ","
        + color2.value
        + ")";
    css.textContent = body.style.background + ";";
}
function random() {
    var x = Math.floor(Math.random()* 255);
    var y = Math.floor(Math.random()* 255);
    var z = Math.floor(Math.random()* 255);
    color1.value = "rgb(" + x + "," + y + "," + z + ")";
}
button.addEventListener("click",random);

color1.addEventListener("input", gradientcolor);
color2.addEventListener("input", gradientcolor);

body{
    background: linear-gradient(to right, red,yellow);
    text-align:center;
    font-family: 'Mukta', sans-serif;
text-transform:uppercase;

}
h1{
    color:rgba(0,0,0,0.5);
    letter-spacing: 1rem;;
    font-size: 100;
    
}
h2{
    color:rgba(0,0,0,0.5);
    letter-spacing:0.3em;
}

<html>
    <head>
        <title>background generator</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body id="gradient">
        <h1> background Generator</h1>
        <input class="color1" type="color" name="color1" value="#FF0000">
        <input class="color2" type="color" name="color1" value="#00FF00">
        <h2>current css background</h2>
        <h3></h3>
        <button id="random">click me</button>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

i tried to find errors in my code, but still i dont figure it out

I don't see any error in the fiddler? can you recreate it for us. — Manjuboyz, Apr 16 '20 at 06:07
press F12, open up console and then click on `click me` you will see the yellow alert message. i using chrome — bill.gates, Apr 16 '20 at 06:08

Philip Rollins · Answer 1 · 2020-04-16T06:26:14.970

The HTML5 specification does not allow RGB values for the color input type value attribute, only simple color names or HEX values are allowed.

HTML5 input color spec

The value sanitization algorithm is as follows: If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

Always take care to try and abide by the specs so it'll work cross browser and you wont encounter any bugs.

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button = document.getElementById("random");


function gradientcolor() {
  body.style.background =
    "linear-gradient(to right," +
    color1.value +
    "," +
    color2.value +
    ")";
  css.textContent = body.style.background + ";";
}

function random() {
  const red = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  const green = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  const blue = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
  color1.value = `#${red}${green}${blue}`;
}
button.addEventListener("click", () => { random(); gradientcolor(); });

color1.addEventListener("input", gradientcolor);
color2.addEventListener("input", gradientcolor);

body {
  background: linear-gradient(to right, red, yellow);
  text-align: center;
  font-family: 'Mukta', sans-serif;
  text-transform: uppercase;
}

h1 {
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 1rem;
  ;
  font-size: 100;
}

h2 {
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3em;
}

<html>

<head>
  <title>background generator</title>
  <link rel="stylesheet" href="style.css">
</head>

<body id="gradient">
  <h1> background Generator</h1>
  <input class="color1" type="color" name="color1" value="#FF0000">
  <input class="color2" type="color" name="color1" value="#00FF00">
  <h2>current css background</h2>
  <h3></h3>
  <button id="random">click me</button>
</body>

</html>

Thomas_krk · Answer 2 · 2020-04-16T06:31:31.037

Input color works with hex code as you have in your HTML value="ff0000" but your script generates RGB(X,Y, Z). Try to change that, but HEX colors includes letters except from number. You can do the same by choosing random from an array of all Letters[[A - Z ] and number [0 - 9] and change the Math.floor(Math.random()* 255);

    function random() {
      const randomColor = Math.floor(Math.random()*16777215).toString(16);
      const randomColor1 = Math.floor(Math.random()*16777215).toString(16);
        document.body.style.backgroundColor = "#" + randomColor;
         color1.value = "#" + randomColor;
         color2.value = "#" + randomColor1;
    }

You can check below link https://css-tricks.com/snippets/javascript/random-hex-color/

Kunal Raut · Answer 3 · 2020-04-16T06:57:32.933

You can update the color of the simple example below in two ways.

<input type="color" value="#ff0000">

Step 1:

If you don't specify a value, the default is #000000, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: #rrggbb. If you have colors that are in any other format (such as CSS color names or CSS color functions such as rgb() or rgba()), you'll have to convert them to hexadecimal before setting the value.

Best way instead of using rgb() to generate a random color you can use.

Step 2:

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



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}

Here is the working example of the RandomColorGenerator

background generator with using random color but i got warning message on the javascript file

3 Answers3