Color Picker

How to use the color picker

Drag the circle on the big square to choose a shade. Horizontally, the left side is grayer and the right side is more vivid. Vertically, the top is lighter and the bottom is darker. The colored bar just below changes the hue, the base color: red, yellow, green, blue and back to red. With every move, the five codes next to it update.

If you already have a code, type it in the HEX field, with 3, 4, 6 or 8 digits and with or without the #. The circle jumps to that color. To copy, click the icon next to the format you need. On the keyboard, the arrow keys move the circle by 1 and, with Shift, by 10.

Pick a color from an image

Click Pick from an image, choose a file (PNG, JPEG, WebP, GIF or anything your browser opens) and click or drag over the image. The pixel under the cursor becomes the current color, with all its codes. It is the way to find the HEX of a logo's blue, of a Figma screenshot or of a reference photo.

Two details change the result. In JPEG, compression blends neighboring pixels, so the color can land a point or two off the original, and PNG is better when you have it. And in a photo each pixel is an isolated point: the color of a wall varies from one pixel to the next because of light and noise. Click a few spots in the same area and keep the middle value. Images larger than 1,600 pixels on the long side are scaled down before they show up, which also smooths fine detail.

Eyedropper for the color of any point on the screen

The Eyedropper button uses the EyeDropper API: the page opens the browser magnifier and receives the HEX of the pixel you click, even outside the tab, on another site, in a design app or on the desktop. According to MDN (data checked on November 5, 2026), it works in Chrome 95, Edge 95 and Opera 81 on desktop, and it does not exist in Firefox, Safari or mobile browsers. Esc cancels.

Where the API is missing, the button does not appear, and you still have the other two ways: the color square and the image. A shortcut that works in any browser is to take a screenshot of what you want to measure and open the file with Pick from an image.

The five color formats

They all describe the same color. What changes is what each one makes easy to adjust.

HSL and HSV look like siblings but behave differently. In HSV, brightness 100% is the most vivid color and 0% is black. In HSL, lightness 50% is the pure color, 100% is white and 0% is black. That is why the same blue shows up as hsl(229 100% 66%) and as hsv(229, 68%, 100%).

The CMYK here is the direct mathematical conversion from RGB. A real print shop works with a color profile (such as FOGRA39 or SWOP), and the result changes with the paper and the ink. Use the value as a starting point and confirm with the printer.

Use a color picker in your code

If you need a picker inside a page of your own, HTML already has one. The input type=color opens the system picker and returns the value as lowercase HEX, in the #rrggbb format and without transparency. The input event fires on every move, and change only when the person closes the picker.

<input type="color" id="cor" value="#5271ff" />

<script>
  const input = document.getElementById("cor");
  input.addEventListener("input", () => {
    document.body.style.backgroundColor = input.value; // "#5271ff"
  });
</script>

To grab a color from outside the page, EyeDropper fits in a few lines. open() has to be called from a click and rejects the promise when the person presses Esc, hence the try/catch:

if ("EyeDropper" in window) {
  button.addEventListener("click", async () => {
    try {
      const { sRGBHex } = await new EyeDropper().open();
      console.log(sRGBHex); // "#5271ff"
    } catch {
      // a pessoa apertou Esc
    }
  });
}

The CSS syntax for all of these formats is in the W3C CSS Color 4 specification.

To convert and go further

Need the value in another syntax, with transparency or with the math explained? Use the HEX to RGB converter or the RGB to HEX converter. Both open with the color you picked here.