<!DOCTYPE html>
<html>
<body>

    <h1>Hello World!</h1>

    <button type="button" onclick="Red()">Red</button>
    <button type="button" onclick="Blue()">Blue</button>
    <button type="button" onclick="Yellow()">Yellow</button>
    <button type="button" onclick="Green()">Green</button>
    <button type="button" onclick="Orange()">Orange</button>
    <button type="button" onclick="Purple()">Purple</button>
    <button type="button" onclick="Pink()">Pink</button>
    <button type="button" onclick="Cyan()">Cyan</button>
    <button type="button" onclick="Black()">Black</button>
    <button type="button" onclick="Gray()">Gray</button>
    <button type="button" onclick="White()">White</button>

    <script>
        function Red() {
            document.body.style.backgroundColor = "Red";
        }
        function Blue() {
            document.body.style.backgroundColor = "Blue";
        }
        function Yellow() {
            document.body.style.backgroundColor = "Yellow";
        }
        function Green() {
            document.body.style.backgroundColor = "Chartreuse";
        }
        function Orange() {
            document.body.style.backgroundColor = "Orange";
        }
        function Purple() {
            document.body.style.backgroundColor = "BlueViolet";
        }
        function Pink() {
            document.body.style.backgroundColor = "HotPink";
        }
        function Cyan() {
            document.body.style.backgroundColor = "Cyan";
        }
        function Black() {
            document.body.style.backgroundColor = "Black";
        }
        function Gray() {
            document.body.style.backgroundColor = "Gray";
        }
        function White() {
            document.body.style.backgroundColor = "White";
        }
    </script>

</body>
</html>