WebDev Tips . Using an input type color to change an element's background color

Using an input type color to change an element's background color

#16

HTML - CSS - JS

July 19, 2019

alt text

Did you know that since HTML5 came out we now have an input type color ? This works like a traditional color picker for any cases where you want the user to pick a color for a form or whatever other purpose it may have.
In this snippet I'll show you how to use this - it's just 'input type="color" ' duh - and then change an element's background color with whatever color gets picked in the input.

<div class="parent flex-center">
           
   <div class="input-container">
       <label>Pick a random color to change the box!</label>
       <input type="color" onchange="changeColor(this.value)"/>
   </div>

   <div id="box"></div>

</div>


<script>
       
   function changeColor(color){
       document.getElementById('box').style.backgroundColor = color
   }

</script>

In order to do this, we just have to create an input with 'type: color' and an onChange function where we'll pass the input value as an argument. We'll also need an element - i used a div - with an ID to then target it.
Finally we just need to create the function that we used on the input - I called it 'changeColor'. This function will receive the color from the input as an argument and set it as the background color of our element - document.getElementById(box).style.backgroundColor = color.

.flex-center{
   display:flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

label{
   font-weight: 600;
   margin-right: 35px;
   color: #424242;
   font-size: 1.2em;
}

#box{
   width: 300px;
   height:200px;
   border-radius: 4px;
   background-color: #007EFF;
   margin-top: 30px;
}

Super simple, am I right? 😃😃