<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> <title>Simple Color Picker</title> </head> <style> .column { border: 1px solid; min-height: 400px; max-width: 600px; margin: auto; border-radius: 10px; } .main { display: flex; flex-direction: column; margin-top: 20%; border-radius: 5px; padding: 10px; background-color: white; } .form-label { margin-top: 10px; } .heading { color: red; text-align: center; margin: 5% auto; } </style> <body> <h1 class="heading">Simple Color Picker</h1> <div class="column justify-content-md-center"> <div class="row justify-content-md-center"> <div class="main"> <label class="form-label"> Color Picker: <input type="color" id="colorPicker" value="#ffffff" /> </label> <label class="form-label"> Hex Code: <input cl type="text" id="hexCode" value="#ffffff" /> </label> </div> </div> </div> <script> function selectColor() { var selectedColor = document.getElementById("colorPicker").value; document.querySelector(".column").style.backgroundColor = selectedColor; document.getElementById("hexCode").value = selectedColor; } document .getElementById("colorPicker") .addEventListener("input", selectColor); </script> </body> </html>