Image Color Picker using HTML, CSS & JavaScript

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.

In this article, you will learn how to create an Image Color Picker using HTML CSS and Javascript.

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.

				
					<div class="wrapper">
      <div class="image-container">
        <img decoding="async" id="image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="demo-image-3.jpg" /><noscript><img decoding="async" id="image" src="demo-image-3.jpg" /></noscript>
      </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>
				
			

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 <input> element
  document.getElementByI
  //select() method selects all the text in a <textarea> or in an <input>d(textId).select();
  //Copies the selected text to clipboard
  //execCommand method to run commands that manipulate the current editable region
  document.execCommand("copy");
  //Display Alert
  //scale() method adds a scaling transformation to the canvas
  customAlert.style.transform = "scale(1)";
  //setTimeout() method sets a timer which executes a function or specified piece
  setTimeout(() => {
    customAlert.style.transform = "scale(0)";
  }, 2000);
};
				
			

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.

Leave a Comment