How to Make a Color Picker in JavaScript?

To create an image color picker using JavaScript, CSS, and HTML, you will need to create an HTML file that includes an image and a color picker element (such as a color input or a color wheel).

You can use CSS to style the image and the color picker. Finally, you can use JavaScript to attach an event listener to the color picker element, so that when the user selects a color, it updates the image's color accordingly.

HTML Code

Here is a sample HTML structure for the image color picker:

<div id="image-container">
  <img id="image" src="image.jpg">
</div>

<label for="color-picker">Select a color:</label>
<input id="color-picker" type="color">

This is an example of an HTML structure for an image color picker. The code creates a div element with the id of "image-container", which serves as a container for the image.

Inside the container, there's an img element with the id of "image" and the source of "image.jpg", which is the image that will be displayed. Below the container, there's a label element with the text "Select a color:" and a corresponding input element with the id of "color-picker" and the type of "color".

The input element with the type of "color" is a standard HTML5 element that creates a color picker. The user can click on the input to open the color picker and select a color from the color wheel. The color picker can also be used to enter a color value in a variety of formats, such as HEX, RGB, or HSL.

CSS Code

In CSS, you can use the #image-container to set the width and height of the image container, and the #image to set the width and height of the image.

#image-container {
  width: 300px;
  height: 300px;
}

#image {
  width: 100%;
  height: 100%;
}

JavaScript Code

In JavaScript, you can use the addEventListener method to attach an event listener to the color picker element. In the event listener callback function, you can use the style.filter property to update the image's color.

const colorPicker = document.getElementById("color-picker");
const image = document.getElementById("image");

colorPicker.addEventListener("input", function() {
  image.style.filter = `hue-rotate(${this.value}deg)`;
});

JavaScript snippet that attaches an event listener to an HTML input element with the id of "color-picker". The event listener listens for the "input" event, which is triggered when the user changes the value of the color picker.

When the event is triggered, the event listener's callback function is executed. The callback function uses JavaScript's style.filter property to update the image's color by applying the hue-rotate filter to the image and setting the degree of rotation based on the value of the color picker.

The hue-rotate function applies a hue rotation on the input image. The value of the filter is the number of degrees around the color circle by which the input samples will be adjusted.
You can also use libraries like CamanJS for image manipulation and color filter.

Comment how you like the tutorial. I have already shared more tutorials of this type here.