How to Make a Full-Screen Colour Page With HTML and JavaScript

Updated October 8, 2026 · 5 min read · By the Hacker Typer team

A page that shows one solid colour is about the simplest web page there is, and it is useful: as a light, a screen cleaner, a green screen or a dead pixel test. This version changes colour when you click and goes full screen when you double-click.

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colour Screen</title>
  <style>
    body { margin: 0; height: 100vh; background: #ffffff; cursor: pointer; }
    #hint {
      position: fixed; left: 0; right: 0; bottom: 20px; text-align: center;
      font: 14px Arial, sans-serif; color: #888;
    }
  </style>
</head>
<body>
  <div id="hint">Click: next colour &nbsp;|&nbsp; Double-click: full screen &nbsp;|&nbsp; H: hide this text</div>

  <script>
    const colors = ["#ffffff", "#000000", "#ff0000", "#00ff00", "#0000ff"];
    let index = 0;

    document.addEventListener("click", function () {
      index = (index + 1) % colors.length;
      document.body.style.background = colors[index];
    });

    document.addEventListener("dblclick", function () {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    });

    document.addEventListener("keydown", function (event) {
      if (event.key === "h" || event.key === "H") {
        const hint = document.getElementById("hint");
        hint.hidden = !hint.hidden;
      }
    });
  </script>
</body>
</html>

How to use this code

1. Get the file. Press Download above the code to save it as color-screen.html. Or press Copy code, paste it into a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac, or a code editor such as VS Code) and save it as color-screen.html. The name must end in .html, not .txt.
2. Open it. Double-click the file. It opens in your web browser and starts working straight away.
3. Change it. Open the same file in the text editor, edit something, save, and refresh the browser page to see the result.

Nothing needs to be installed, and the file works without an internet connection.

How the code works

Colour codes

Colours on the web are written as a # followed by six characters. The first two set the amount of red, the middle two green and the last two blue. Each pair runs from 00 (none) to ff (maximum).

Changing colour on click

• colors is the list of colours to cycle through, and index remembers which one is showing.
• Each click adds one to index. The % colors.length part sends it back to zero after the last colour.
• document.body.style.background = ... repaints the page.

Full screen and the hint

• document.fullscreenElement is empty when the page is not in full screen. The if uses that to decide whether to enter or leave.
• A double-click also counts as two clicks, so the colour moves on twice. Add or remove a colour, or use the keyboard instead, if that bothers you.
• Pressing H flips the hint between hidden and visible. !hint.hidden means "the opposite of what it is now".

Easy changes to try

• More colours. Add codes to the list, for example "#ffff00" for yellow or "#808080" for grey.
• One fixed colour. Delete the script and set background in the CSS to the colour you want.
• Change colour with the space bar. Inside the keydown function, add a test for event.key === " " that runs the same two lines as the click.
• Automatic cycling. Add setInterval(function () { document.body.click(); }, 3000); to change every three seconds.