Whether designing for a website, a graphic, or any other visual media, color is essential. The surroundings we live in, photos, and art are frequent sources of color scheme inspiration. But how can you easily extract and apply those appealing colors for your own creative projects?
In this article, we will see how we create an RGB color picker that can extract colors from photos. We’ll take it a step further by showing the hexadecimal code for the chosen color and altering the backdrop of the entire webpage to match the uploaded image.
We’ll take you step-by-step through the entire project. We’ll go over how to build a dynamic project that uses the hex code we extract from an image to assist us in choosing the desired color from it.
Step-By-Step We’ll go over how to build a dynamic project that uses the hex code we extract from an image to assist us in choosing the desired color from it.
HTML Structure
We have created a simple structure for our image color picker. A div that displays the chosen color and its hexadecimal number is also included, along with an input element for uploading a picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB Color Picker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<input type="file" id="imageInput" accept="image/*">
<div class="color-box">
<div id="colorDisplay"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
body {
font-family: Arial, sans-serif;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
}
The appearance of the webpage as a whole is the focus of the CSS code. The background picture for the full viewport, for example, is defined by the body selector, ensuring that it doesn’t repeat and stays put as users scroll. Additionally, this code positions the content horizontally on the page and chooses a legible font (Arial or sans-serif). It also ensures a uniform layout by setting margin and padding to zero.
.container {
padding: 20px;
}
input[type="file"] {
display: none;
}
.color-box {
width: 150px;
height: 150px;
margin: 20px auto;
border: 1px solid #000;
background-color: #ffffff;
}
#colorDisplay {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #000;
}The .container class adds padding around the container to create room for its contents. In order to build a more aesthetically pleasant interface, the input[type=”file”] rule conceals the standard file input button. The color display box’s size, border, and initial white background are all controlled by the .color-box class. Last but not least, the #colorDisplay ID selector makes sure that the color display box fills the full container, centers its content both horizontally and vertically, specifies a font size of 20 pixels, and changes the text color to black. Together, these designs produce a visually pleasing and approachable color picker interface.
JavaScript for Color Extraction
Let’s now look at the JavaScript code that extracts colors from the uploaded image, displays the color along with its hexadecimal code, and modifies the website’s backdrop.
const imageInput = document.getElementById("imageInput");
const colorBox = document.querySelector(".color-box");
const colorDisplay = document.getElementById("colorDisplay");
imageInput.addEventListener("change", function () {
const file = imageInput.files[0];
const reader = new FileReader();
reader.onload = function () {
const image = new Image();
image.src = reader.result;
image.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
const pixelData = ctx.getImageData(0, 0, image.width, image.height).data;
const averageColor = getAverageColor(pixelData);
displayColor(averageColor);
changeBackground(reader.result); // Change the webpage background
};
};
reader.readAsDataURL(file);
});
function getAverageColor(pixelData) {
let r = 0,
g = 0,
b = 0;
for (let i = 0; i < pixelData.length; i += 4) {
r += pixelData[i];
g += pixelData[i + 1];
b += pixelData[i + 2];
}
const pixelCount = pixelData.length / 4;
r = Math.round(r / pixelCount);
g = Math.round(g / pixelCount);
b = Math.round(b / pixelCount);
return `rgb(${r},${g},${b})`;
}
function displayColor(rgbColor) {
colorBox.style.backgroundColor = rgbColor;
// Convert RGB to hexadecimal
const hexColor = rgbToHex(rgbColor);
colorDisplay.textContent = hexColor;
}
function rgbToHex(rgb) {
const [r, g, b] = rgb.match(/\d+/g);
const hexR = Number(r).toString(16).padStart(2, "0");
const hexG = Number(g).toString(16).padStart(2, "0");
const hexB = Number(b).toString(16).padStart(2, "0");
return `#${hexR}${hexG}${hexB}`;
}
function changeBackground(imageDataURL) {
document.body.style.backgroundImage = `url(${imageDataURL})`;
}
The event listener is configured to set off when an image is uploaded, and the image input element is chosen. The code reads and displays a picture on an HTML page after it has been uploaded using the FileReader. The background of the color box is then changed to reflect the chosen color after calculating the average color from the image’s pixel data. We will set the background color of the webpage after calculating the hex code from the image and also display the hex code in the color box.
Final Output:
Conclusion
Now we have created an effective RGB color picker, We can extract colors from images, show them along with their hexadecimal codes, and even alter the backdrop of the webpage to match the submitted image. Regardless of your level of experience as a designer, this straightforward yet effective tool will improve it. Explore the universe of hues and patterns right now!
If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: CodewithRandom
Author: Arun
