Image Color Picker (RGB/HSV) / 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。

What are RGB and HSV?

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