In this article, you will learn how to create an Image Color Picker using HTML CSS and Javascript. Earlier I shared with you tutorials on many types of projects using JavaScript.
If you know the basics of JavaScript, then you can easily create this JavaScript Color Picker. Here I have given you the source code and step-by-step information on this JavaScript Image Color Picker. A live preview is also provided so that you can know how this Image Color Picker works. Here I have used some basic HTML to create the structure. Used CSS to design and implemented it using JavaScript.
JavaScript Image Color Picker
Earlier I shared with you the tutorial on different types of gradient color generators, custom color generators, automatic color generators, etc projects. I made this Image Color Picker using HTML CSS and javascript.
This type of JavaScript can be found in Color Picker professional image or video editing tools. With the help of this project, you can select any color and know its color code.
If there is any difficulty in using this Color Picker HTML CSS in your project then you can comment to me. Here is every javascript code I have explained step by step which will help you to easily know how to create HTML Image Color Picker.
As you can see from the preview button above, this is a simple Image Color Picker that I created with html css and javascript.
First I created a box on the webpage which has a small display first. In that display you can see the image that you select from your device. This project will work nicely without selecting the image though. Below the display are two buttons, one for selecting images from your device and the other for collecting colors.
By clicking on the second button you can select any color in your display. You will easily get the color code of the selected color.
Color Picker using HTML CSS JavaScript
Now if you want to create this JavaScript Color Picker using HTML CSS and JavaScript then follow the below tutorial. Here you will find all codes and guides. First there is the html code, then the css code and finally the javascript code.
Step 1: HTML Code of Image Color Picker
The following codes are the HTML codes that are used to create the basic structure of this Image Color Picker.
First a small box is created in which all the information can be seen. After that display and buttons are created. You can directly copy the following HTML codes and use them for any purpose.
Color Code Copied!
Step 2: CSS Code of Image Color Picker
Now time to design this technology (Color Picker using JavaScript) a bit by css. You may not use it though. Because the design is completely your personal matter.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #448aff;
}
.wrapper {
background-color: #ffffff;
width: 90%;
max-width: 31.25em;
padding: 1.5em;
border-radius: 0.4em;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
img {
display: block;
width: 80%;
max-height: 400px;
margin: auto;
margin-bottom: 30px;
box-shadow: 0 0 20px rgba(0,139,253,0.25);
}
.btns-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
margin: 1em 0 1.5em 0;
}
input,
label,
button {
border: none;
outline: none;
}
input[type="file"] {
display: none;
}
label,
button {
display: block;
font-size: 1.1em;
background-color: #025bee;
color: #ffffff;
text-align: center;
padding: 0.5em 0;
border-radius: 0.3em;
cursor: pointer;
}
#result {
/* display: grid; */
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
#result div {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
#result input {
background-color: transparent;
font-size: 1em;
padding: 0.5em;
width: 100%;
color: #313b4c;
border-bottom: 0.1em solid #021637;
}
#result button {
position: absolute;
right: 0.6em;
background-color: transparent;
color: #7c8696;
}
#picked-color-ref {
grid-column: 2;
grid-row: 1 / 3;
border: 0.6em solid #d9e8ff;
border-radius: 0.5em;
}
#custom-alert {
transform: scale(0);
transition: 0.5s;
transform-origin: center;
background-color: #d9e8ff;
color: #025bee;
text-align: center;
padding: 0.5em;
margin-top: 1.5em;
}
.hide {
display: none;
}
#error {
color: #ff725a;
text-align: center;
}
Step 3: Activate the Image Color Picker with JavaScript
Now it’s time to make this project fully functional using JavaScript. Here I have used some JavaScript which is easy to understand if you have some knowledge of JavaScript. Here I have commented every logic and line so that you don’t have any difficulty in understanding.
//Create Initial references
let pickColor = document.getElementById("pick-color");
let error = document.getElementById("error");
let fileInput = document.getElementById("file");
let image = document.getElementById("image");
let hexValRef = document.getElementById("hex-val-ref");
let rgbValRef = document.getElementById("rgb-val-ref");
let customAlert = document.getElementById("custom-alert");
let pickedColorRef = document.getElementById("picked-color-ref");
let eyeDropper;
//Function On Window Load
window.onload = () => {
//Check if the browser supports eyedropper
//EyeDropper tool can be used by the user to select colors from the screen
if ("EyeDropper" in window) {
pickColor.classList.remove("hide");
eyeDropper = new EyeDropper();
} else {
error.classList.remove("hide");
error.innerText = "Your browser doesn't support Eyedropper API";
pickColor.classList.add("hide");
return false;
}
};
//Eyedropper logic
//async function is a function declared with the async keyword
const colorSelector = async () => {
const color = await eyeDropper
.open()
.then((colorValue) => {
error.classList.add("hide");
//Get the hex color code
let hexValue = colorValue.sRGBHex;
//Convert Hex Value To RGB
let rgbArr = [];
for (let i = 1; i < hexValue.length; i += 2) {
//parseInt() function parses a string argument and returns an integer of the specified radix.
rgbArr.push(parseInt(hexValue[i] + hexValue[i + 1], 16));
console.log(rgbArr);
}
let rgbValue = "rgb(" + rgbArr + ")";
console.log(hexValue, rgbValue);
result.style.display = "grid";
hexValRef.value = hexValue;
rgbValRef.value = rgbValue;
pickedColorRef.style.backgroundColor = hexValue;
})
.catch((err) => {
error.classList.remove("hide");
//If user presses escape to close the eyedropper
if (err.toString().includes("AbortError")) {
error.innerText = "";
} else {
error.innerText = err;
}
});
};
//Button click
//addEventListener() method will be called whenever the specified event is delivered to the target.
pickColor.addEventListener("click", colorSelector);
//Allow user to choose image of their own choice
//onchange event is fired for input, select, and textarea elements
fileInput.onchange = () => {
result.style.display = "none";
//The fileReader object helps to read contents of file stored on computer
let reader = new FileReader();
//readAsDataURL reads the content of input file
reader.readAsDataURL(fileInput.files[0]);
reader.onload = () => {
//onload is triggered after file reading operation is successfully completed
//set src attribute of image to result/input file
//Sets the value of an attribute on the specified element.
image.setAttribute("src", reader.result);
};
};
//Function to copy the color code
let copy = (textId) => {
//Selects the text in the element
document.getElementByI
//select() method selects all the text in a
Hope you have learned from this tutorial how I created this Image Color Picker using HTML CSS and JavaScript. If there is any problem then you can use the download button below.
If you want to add it to any of your projects, please let me know in the comments. Please comment on how you like this JavaScript Image Color Picker.