HueTML

Screen color synchronization for Philips Hue in a single HTML file

A sleek, single-file web application that captures your screen colors in real-time and syncs them to your Philips Hue lights, creating an immersive ambient lighting experience. Features automatic screen capture, region-based color mapping, and beautiful predefined scenes.

A note from the creator: This project came to me in a dream. I woke up with the idea of syncing screen colors to my Hue lights and decided to build it using pure vanilla web technologies. No frameworks, no build tools, just one HTML file with some CSS and JavaScript. It's a vibe-coded passion project that grew from a simple midnight thought into something I actually use every day. Hope you enjoy it too! (This note was also generated with AI - thanks, buddy!)

✨ Features

🎨 Screen Sync

• Real-time color capture - Automatically analyzes your screen at 0.5s intervals
• Region-based mapping - Divide screen into zones (2x2, 2x3, or 3x3 grid) for multi-light setups
• Manual region assignment - Choose which screen region each light corresponds to
• Adjustable settings - Control brightness and saturation levels

🌈 Predefined Scenes

• Warm White - Cozy ambient lighting
• Cool White - Bright daylight simulation
• Sunset - Orange and red gradient
• Ocean - Blue and cyan tones
• Forest - Natural green gradient
• Party - Dynamic colorful mode
• Relax - Soothing purple atmosphere
• Off - Turn off all lights

🎯 User Experience

• One-click activation - Select any scene with a single click
• Clean interface - Minimalist dark theme with subtle purple accents
• No installation required - Runs entirely in your browser
• Persistent settings - Remembers your bridge IP, selected lights, and preferences

🚀 Quick Start

Prerequisites

• Philips Hue Bridge on your local network
• Modern web browser with Screen Capture API support (Chrome, Edge, or Opera)
• Must be on the same network as your Hue Bridge

⚠️ Important: GitHub Pages & HTTPS

Mixed Content Security Issue: Browsers block HTTP requests (Hue Bridge API) from HTTPS pages (GitHub Pages) for security reasons.

Solutions:

• Use huetml.com: Custom domain with HTTP support (recommended)
• GitHub Pages hosting: Disable HTTPS enforcement in your repository settings (Settings > Pages > Enforce HTTPS - uncheck)
• Local usage: Download index.html and serve via python -m http.server or open directly as file://

Setup

1. Access the app

   • Visit huetml.com or download index.html and open it locally

2. Connect to your Hue Bridge

   • Click "Hue Settings"
   • Click "Discover" to auto-detect your bridge, or manually enter the bridge IP
   • Click "Connect" and press the physical link button on your Hue Bridge within 30 seconds
   • The app will automatically connect

3. Select your lights

   • In the Hue Settings dialog, check the lights you want to control
   • Optionally adjust region mapping using the dropdown next to each light
   • Set your preferred brightness and saturation levels

4. Choose a scene

   • Click any scene in the 3×3 grid
   • For screen sync, click "Screen" and grant screen sharing permission

📖 Usage

Screen Sync Mode

1. Click the Screen scene button
2. Select the window/screen you want to capture
3. Colors will automatically sync to your lights in real-time
4. Click "Disconnect" to stop capturing

Scene Mode

• Click any scene button to instantly apply it to all selected lights
• Active scene is highlighted with a border
• Switch between scenes at any time

Advanced Settings

Access via "Hue Settings" button:

• Brightness - Overall light intensity (1-100%)
• Saturation - Color vividness (0-100%)
• Region mapping - Assign specific screen zones to each light
• Light selection - Choose which lights to control

🔧 How It Works

Screen Capture

Uses the browser's getDisplayMedia() API to capture screen content, then samples colors from defined regions using HTML5 Canvas. The app automatically divides your screen based on the number of selected lights.

Color Processing

• Converts RGB to HSV/HSL for accurate color representation
• Applies brightness and saturation adjustments
• Calculates luminance for adaptive brightness control
• Sends optimized Hue API commands with smooth transitions

Local Network Communication

Communicates directly with your Hue Bridge via HTTP API - no cloud services or external servers involved. All processing happens locally in your browser.

🔒 Privacy & Security

• No data collection - Everything runs locally in your browser
• No external requests - Only communicates with your local Hue Bridge
• Open source - Single HTML file, inspect the code yourself
• No tracking - No analytics, cookies, or third-party scripts

💡 Tips

• Best results: Use a dark background behind your browser for more vibrant colors
• Performance: Lower update interval (0.5s default) for smoother sync but higher API usage
• Multi-monitor: Screen capture works with any display, including extended monitors
• Background throttling: Keeping the browser tab active ensures consistent update timing

🛠️ Technical Details

• Single file - Entire app in one HTML file (~2800 lines)
• No dependencies - Pure vanilla JavaScript, HTML5, and CSS
• API: Philips Hue REST API v1
• Storage: localStorage for settings persistence
• Capture rate: 0.5s default (configurable: 0.25s - 10s)

📝 Known Limitations

• Requires local network access to Hue Bridge (no remote control)
• Browser must remain active for accurate timing (browser throttles background tabs)
• Screen capture permission needed for each session
• Some scene modes are static (no continuous animations)

🤝 Contributing

This is a single-file project for simplicity. If you have suggestions or improvements:

1. Fork the repository
2. Make your changes to index.html
3. Test thoroughly with your Hue setup
4. Submit a pull request with a clear description

📄 License

MIT License - feel free to use, modify, and distribute.

🙏 Acknowledgments

Built with passion for ambient lighting enthusiasts. Inspired by the Philips Hue ecosystem and the desire for a simple, self-contained solution.

---

Enjoy your ambient lighting experience! 💜