How to get colour HEX value using JavaScript

My Colour Pick

Select your colour...

Colour HEX Value:

Color introduced in HTML5 in <input type="color" /> type. We are create a JavaScript function. there we are used inline javascript in input tag. In this tag using onchange method. So we Access the color HEX value in the script.

index.html

<div class="wrapper">
<h2> My Colour Pick </h2>
<p> Select your colour... </p>
<input type="color" id="colour" onchange="myColour()" />
<p id="pick">Colour HEX Value:
<span id="result"></span>
</p>
</div>

style.css

.wrapper {
width:300px;
height:200px;
margin:auto;
display:grid;
background-color:#f1f1f1f1;
place-items:center;
border-radius:12px;
box-shadow:2px 2px 20px rgba(0,0,0,0.4);
}

.wrapper #colour {
height:40px;
width:80px;
}

h2{
color:blue;
}

p {
color:green;
text-align:center;
text-transform:capitalize;
}

#result {
font-weight:bold;
color:red;
text-transform:uppercase;
}


script.js

var colour = document.getElementById("colour");
function myColour() {
document.getElementById("result").innerHTML = colour.value;
}
myColour();