DEV Community

Cover image for Creating a image color picker with JS
Shuvo
Shuvo

Posted on

Creating a image color picker with JS

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

Let's start by creating the index.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>
Enter fullscreen mode Exit fullscreen mode

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.

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)
})
Enter fullscreen mode Exit fullscreen mode

Show selected image JS
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.

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()
})
Enter fullscreen mode Exit fullscreen mode

JavaScript color picker demo

And finally when the user picks a color we want to show the color 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.");
        })
})
Enter fullscreen mode Exit fullscreen mode

Showing picked color
And we are done! We have successfully a image color picker using JavaScript.

Make sure you checkout my other articles and YouTube channel

0shuvo0 image

Was it helpful? Support me on Patreon

Patreon Logo

Discussion (2)

Collapse
jonrandy profile image
Jon Randy

As yet, this is an experimental, non-standard feature - only available on some browsers.... it probably won't be safe to rely on it being there (or working as you expect) for quite a while.

Collapse
0shuvo0 profile image
Shuvo Author

True, thats why I mentioned new API and also added the alert
Thank you ❤