Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Color Picker</title> <style> .preview { width: 100%; height: 120px; border-radius: 8px; border: 1px solid #ccc; margin: 16px 0; transition: background 0.2s; } label { font-weight: bold; } output { font-family: monospace; margin-left: 8px; } </style> </head> <body> <h1>Pick a Background Color</h1> <label for="bg">Choose color: <input type="color" id="bg" value="#3498db"> <output id="hex">#3498db</output> </label> <div class="preview" id="preview" style="background:#3498db;"></div> <script> const picker = document.getElementById('bg'); const preview = document.getElementById('preview'); const hex = document.getElementById('hex'); picker.addEventListener('input', e => { preview.style.background = e.target.value; hex.textContent = e.target.value; }); </script> </body> </html>
Result
Open