Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create an Image Color Picker App. To build this app, we need HTML, CSS and javascro[t.
This is an intermediate-level javascript project. If you are looking for more such tutorials to practice your javascript skills, you should check out this playlist here. This playlist consists of 100+ javascript projects.
The difficulty level of these projects varies from easy to quite complex ones. Hence this project playlist is suitable for all kinds of javascript learners, including javascript beginners to experts.
Video Tutorial:
If you are interested to watch a video tutorial instead of reading this blog post, you can check out this video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. we created a project folder called – ‘Image Color Picker. Within this folder, we have three files – index.html, style.css and script.js.
HTML:
These files are the HTML document, the stylesheet and the script file.
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Color Picker</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="image-container">
<img id="image" src="demo-image-3.jpg" />
</div>
<div class="btns-container">
<input type="file" id="file" accesskey="image/*" />
<label for="file">Open A Photo</label>
<button id="pick-color">Pick Color</button>
</div>
<div id="error" class="hide"></div>
<div id="result" class="hide">
<div>
<input type="text" id="hex-val-ref" />
<button onclick="copy('hex-val-ref')">
<i class="fa-regular fa-copy"></i>
</button>
</div>
<div>
<input type="text" id="rgb-val-ref" />
<button onclick="copy('rgb-val-ref')">
<i class="fa-regular fa-copy"></i>
</button>
</div>
<div id="picked-color-ref"></div>
</div>
<div id="custom-alert">Color Code Copied!</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we add style to our app and position different elements using CSS. For this once again, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #025bee;
}
.wrapper {
background-color: #ffffff;
width: 90%;
max-width: 31.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 0.5em;
padding: 1.5em;
border-radius: 0.8em;
}
img {
display: block;
width: 80%;
margin: auto;
}
.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.8em 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;
}
Javascript:
Finally, we implement the functionality of our app. For this, we use javascript. We do this in the following steps:
1. Create initial references
2. Function on window load which checks if the browser supports eyedropper
3. Logic for eyedropper
4. Get Hex value for eyedropper
5. Convert the Hex value in RGB.
Display the value in text fields.
Add an option for the user to choose an image of their choice
Add functionality to copy buttons
//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
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
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) {
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
pickColor.addEventListener("click", colorSelector);
//Allow user to choose image of their own choice
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
image.setAttribute("src", reader.result);
};
};
//Function to copy the color code
let copy = (textId) => {
//Selects the text in the <input> element
document.getElementById(textId).select();
//Copies the selected text to clipboard
document.execCommand("copy");
//Display Alert
customAlert.style.transform = "scale(1)";
setTimeout(() => {
customAlert.style.transform = "scale(0)";
}, 2000);
};
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, If you have any queries, suggestions or feedback comment below.
