Building a Zero-Dependency Fullscreen Color Tool: Lessons from PinkScreen

#architecture #performance #showdev #webdev

Last month, I shipped Pink Screen—a dead-simple tool that displays fullscreen colors for video backgrounds, livestreaming, and display testing. It now serves 100K+ monthly active users with zero server costs and 100 Lighthouse performance scores.

Here's how I built it, and why sometimes the simplest architecture is the most scalable.

The Problem: Existing Tools Were Bloated

Before PinkScreen, creators and developers faced three options:

Photoshop/GIMP: Overkill for displaying a solid color
YouTube "color screen" videos: Ads, compression artifacts, internet dependency
Other online tools: 2MB+ JavaScript bundles, analytics trackers, sign-up gates

I needed something that just works—instant, private, and frictionless.

The Architecture: Less is More

Core Philosophy: CSS-First, JavaScript-Optional


html
<!-- The entire "app" -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      background: #FFC0CB; 
      height: 100vh; 
      width: 100vw;
      cursor: pointer;
    }
    .controls { 
      position: fixed; 
      bottom: 20px; 
      left: 50%; 
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    body:hover .controls { opacity: 1; }
  </style>
</head>
<body>
  <div class="controls">
    <button onclick="download()">Download HD</button>
    <input type="color" value="#FFC0CB" onchange="updateColor(this.value)">
  </div>

  <script>
    // Only 847 bytes gzipped
    const fullscreen = () => document.documentElement.requestFullscreen();
    const updateColor = (c) => document.body.style.background = c;
    const download = () => {
      const canvas = document.createElement('canvas');
      canvas.width = 3840; canvas.height = 2160;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = getComputedStyle(document.body).backgroundColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      const link = document.createElement('a');
      link.download = `pinkscreen-${canvas.width}x${canvas.height}.png`;
      link.href = canvas.toDataURL();
      link.click();
    };
    document.body.addEventListener('click', fullscreen);
  </script>
</body>
</html>