Image Color Picker (RGB/HSV) / Tool

How to use this tool

This is an eyedropper tool that runs in the browser. to extract colors from selected areas of an image in RGB and HSV.

1. Select an image: Please specify an image file using the “Select File” button or “drag & drop”, or set an image by “pasting from the clipboard”.
   • If the image is larger than 1920 x 1080, it will be scaled down.
   • Images are loaded only within the browser. They are not sent externally.
2. Specify where to get color: Place the cursor on the loaded image. The color of the cursor point is acquired and displayed.
3. Save color: Click to temporarily save the color.
   • Saved colors disappear when the browser is closed or the page is reloaded; they are not saved in cookies, etc.

Related Tools: Color Converter (RGB, HEX, HSV, HSL) / Tool。

RGB

It represents colors by mixing red, green, and blue, called the three primary colors of light. A string of RGB values expressed in hexadecimal is sometimes called a color code or web color.

HSV

It expresses color in terms of three elements: Hue (color type), Saturation (vividness), and Value (brightness). These expressions are easy for humans to understand.

Note

MS Paint can also acquire RGB, etc., but the procedure is a bit cumbersome.

1. Open image in MS Paint
2. Select “Select Color”
3. Click on the pixel for which you want to get a color
4. Open “Edit Color”
5. Decimal RGB and HSV values will appear.
6. If you want hexadecimal color codes, convert them separately.

It was too much trouble, so I made a tool. I had a hard time pasting from clipboard to canvas.

This site is Gatsby.js (React), so I implemented it as follows. If there is a better way, I would like to know.

componentDidMount() {
  document.addEventListener("paste", this.onPaste, false);
}

onPaste(e) {
  var data = e.clipboardData;
  if (!data
    || !data.types
    || data.types.length !== 1
    || data.types[0] !== 'Files') {
      return true;
  }

  var file = data.items[0].getAsFile();
  var img = new Image();
  img.onload = function() {
    var cvs = document.getElementById('my_canvas');
    var ctx = cvs.getContext('2d');
    // Clear canvas
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    if (cvs.width < img.width || cvs.height < img.height) {
      // If the size exceeds the size of the canvas, maintain the aspect ratio and reduce the size
      var scale = Math.min(cvs.width / img.width, cvs.height / img.height);
      ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
    } else {
      ctx.drawImage(img, 0, 0);
    }
  };
  img.src = window.URL.createObjectURL(file);
}