Creating a image color picker with JS
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-11 17:21:05

In this article I am going to show you how you can create this image color picker using JavaScript and the new **EyeDropper** API.
![JavaScript Image color picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7i5288b6vwrp6wugypp.gif)
 
Let's start by creating the **index.html**
```html
<!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>
```
And now lets create the **main.js** and when user chooses an image we want to show it in our `img` element. We will use `FileReader` for that.
```js
const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')

imgInput.addEventListener('change', function() {
  const file = this.files[0]
  // If the user doesn't select an image then don't do anything
  if(!file) return
  
  const reader = new FileReader()

  reader.addEventListener('load', function() {
    imgPreview.src = this.result
  })

  reader.readAsDataURL(file)
})
```
![Show selected image JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpx0kismk8383xjllmsn.png)
Great stuff!!! Now when the user clicks on the **Open Color Picker** button we want to open a color picker. For that we will use the `EyeDropper` API.
```js
const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')

if(!window.EyeDropper){
    alert("Your browser does not support this feature")
}

// Creating a new instance of EyeDropper
const eyeDropper = new EyeDropper()
const pickerBtn = document.querySelector('.open-picker')

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() {
    // Open the color picker
    eyeDropper.open()
})
```
![JavaScript color picker demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvtqdl8fpnqg69kr4jcj.png)
 
And finally when the user picks a color we want to show the color code.
```js
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.");
        })
})
```
![Showing picked color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t60url89ju78cakzir9l.png)
And we are done! We have successfully a image color picker using JavaScript.


## Make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)