Intenté usar la etiqueta de color de entrada, pero tengo que hacer clic dos veces en la etiqueta para cambiar el color de cualquier manera para solucionar esto.
<!DOCTYPE html> <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>Document</title> </head> <body> <form action=""> <label for="color"> Color:</label> <input type="color" name="color" id="color" value="#00FFFF" onclick="changecolor()" /><br /> </form> <script> function changecolor() { let color = document.getElementById("color").value; document.body.style.backgroundColor = color; } </script> </body> </html>Su código funciona, solo que está utilizando un detector de eventos incorrecto para lo que está tratando de hacer.
Simplemente cambie su evento de onclick a onchange
Como esto
<input type="color" name="color" id="color" value="#00FFFF" onchange="changecolor()" />Esperemos que esto tenga sentido.