ADVERTISEMENT

Create Color Picker From Image Using HTML & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Color Picker From Image Using HTML & JavaScript

Create Image Color Picker Using HTML & JavaScript
Create Image Color Picker Using HTML & JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create an Image Color Picker. We use HTML and JavaScript for this image color picker Project. Hope you enjoy our blog so let’s start with a basic HTML Structure for an Image Color Picker.

ADVERTISEMENT

HTML Code For Image Color Picker

<!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">
<title>Image color picker</title>
</head>
<body>
<button class="open-picker">Open Color Picker</button>
<input type="file" id="img-select">
<!-- Picker color code will be shown here -->
<p class="res"></p>
<!-- Selected image will be shown here -->
<img style="max-width: 90vw;" src="" alt="" class="preview">
<script src="main.js"></script>
</body>
</html>

There is all the html code for the image color picker. Now, you can see output without javascript, then we write javascript for the image color picker functionality. we did not use any Css Code for styling for this project.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Only Html Code output

Image Color Picker Using HTML & JavaScript
Image Color Picker Using HTML & JavaScript

 

ADVERTISEMENT

JavaScript Code For Image Color Picker

We use JavaScript for image preview and then use eyedropper then track rgbhex color so lets start writing JavaScript Code.

const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')
if(!window.EyeDropper){
alert("Your browser does not support this feature")
}
const eyeDropper = new EyeDropper()
const pickerBtn = document.querySelector('.open-picker')
const result = document.querySelector('.res')
imgInput.addEventListener('change', function() {
const file = this.files[0]
if(!file) return
const reader = new FileReader()
reader.addEventListener('load', function() {
imgPreview.src = this.result
})
reader.readAsDataURL(file)
})
pickerBtn.addEventListener('click', function() {
eyeDropper.open()
.then(res => {
result.innerHTML = `Picked Color: <b>${res.sRGBHex}</b>`
})
.catch(err => {
console.log("User canceled the selection.");
})
})

Final Output Of Image Color Picker Using HTML & JavaScript

 

Image Color Picker Using HTML & JavaScript
Image Color Picker Using HTML & JavaScript

 

ADVERTISEMENT

Image Color Picker Using HTML & JavaScript
Image Color Picker Using HTML & JavaScript

 

ADVERTISEMENT

Image Color Picker Using HTML & JavaScript
Image Color Picker Using HTML & JavaScript

 

Restaurant Website Using HTML and CSS

Now we have completed our Image Color Picker Project. Here is our updated output with Html and JavaScript. Hope you like the image color picker Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create an Image color picker using Html and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT