Close Menu
    JavaScript

    How to make Image Color Picker using HTML CSS & JS

    Coding StellaBy No Comments5 Mins Read

    Let’s create an Image Color Picker using HTML, CSS, and JavaScript. This project allows users to upload an image and pick any color from it by clicking on the image.

    We’ll use:

    • HTML to structure the image area and color display.
    • CSS to style the layout and make it clean and user-friendly.
    • JavaScript to detect pixel colors and show the selected color code.

    This project is very useful for designers and developers who want to quickly grab colors from images. It’s beginner-friendly and a great way to understand how images and pixels work in JavaScript. Let’s get started and pick some colors! 🎨✨

    HTML :

    This code builds a simple image color picker where you can upload a photo, click on the image to pick a color, and see its HEX and RGB values. It also lets you copy the color codes with one click and shows a small preview of the selected color, while JavaScript handles all the interactions.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Color Picker | @coding.stella</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="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 src="script.js"></script>
</body>
</html>

    CSS :

    This CSS styles the image color picker layout by centering a white card on a light purple background, setting a clean font, and making the design responsive. It hides the file input, styles buttons and labels with a purple theme, aligns action buttons in a grid, and formats the result section to show color values with copy buttons and a color preview box. Extra classes handle alerts, errors, and hide elements when needed.

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #ddc2ff;
}

.wrapper {
  background-color: #ffffff;
  width: 90%;
  max-width: 31.25em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  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: #5802ee;
  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:

    This JavaScript adds the main functionality of the image color picker. It checks if the browser supports the Eyedropper API, lets users pick a color from the screen, converts the selected HEX color to RGB, and displays both values with a preview. It also allows users to upload their own image and copy color codes to the clipboard with a small success alert.

    //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);
};

    In conclusion, building an Image Color Picker with HTML, CSS, and JavaScript is a simple yet powerful project. It helps you learn image handling, mouse interaction, and color detection in the browser. A perfect tool to add to your web projects and improve your JavaScript skills.

    If you run into any problems with your project, worry not. The remedy is just a click away – Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply