Screen Color Picker

What Screen Color Picker helps you do

Grab the exact color of anything on your screen with the browser EyeDropper, or sample colors from an uploaded image. Read the value as HEX, RGB, and HSL, copy any format, and keep a short history of recent picks. It is faster than guessing a hex code and safer than pasting a screenshot into an online color service.

Colors are read and converted in your browser. Uploaded images are never sent to Haivix servers.

How it works

The EyeDropper API opens the browser's native picker and returns the color under the pointer. For an image, the file is drawn to a canvas and the clicked pixel is read from the canvas data. The value is converted between HEX, RGB and HSL in the page, and the recent picks are kept in memory for the session.

How to use Screen Color Picker

1. Select Pick from screen and click the color you want (desktop Chrome or Edge).
2. Or upload an image and click a pixel to sample it.
3. Copy the HEX, RGB, or HSL value, and reuse a recent color from the history.
4. Compare the sampled value with the brand source if exact color matters.

When to use it

• Match a brand or UI color you can see but do not have the code for.
• Sample colors from a screenshot, mockup, or photo.
• Convert a color between HEX, RGB, and HSL for design or CSS.
• Check the actual color of a chart or a status badge.
• Build a small palette from a design reference.
• Verify that two elements really use the same color.

When not to use it

• Do not sample a color from a photo and assume it is the original brand value; compression and lighting change it.
• Do not use it as a contrast checker; test accessibility separately.
• Do not expect the EyeDropper to work on mobile or in every browser.

Example

A developer sees a button in a client screenshot and needs its color for CSS. They upload the image, click the button fill, and copy #1F6FEB. The history keeps the hover and border shades so the three values can be compared without re-uploading the file.

What you can do with Screen Color Picker

• Pick a color directly from the screen with the EyeDropper.
• Sample a pixel from an uploaded image.
• Read the value as HEX, RGB and HSL.
• Copy any format with one click.
• Reuse a recent color from the history.
• Keep the image and the values local to the browser.

Example: match a brand color from a screenshot

If you have the source on screen, use the EyeDropper and click the exact area. If the color is in a file, upload the image and click the pixel instead.

Read the HEX value for CSS and the RGB or HSL value when a design tool asks for channels. Copy the format the destination expects rather than retyping it.

Test the color against the surrounding palette before shipping it. A color sampled from a compressed screenshot can be slightly off from the original brand value.

What to know before you start

• Picking from the screen needs the EyeDropper API (desktop Chrome or Edge).
• Browsers without it can still sample colors from an uploaded image.
• Only one color is picked at a time; there is no live magnifier preview.
• There is no palette export or contrast calculation.
• The history is kept in memory for the current session only.

Common mistakes

• Sampling a pixel from a JPEG and treating it as the exact brand color.
• Picking a highlight or shadow instead of the base fill.
• Copying RGB values into a field that expects HEX.
• Assuming the EyeDropper is available on every browser.
• Forgetting that the history is per-session and disappears on reload.

Troubleshooting

If the screen picker does not open, the browser may not support the EyeDropper API. Use an image upload instead.

If the sampled value looks wrong, zoom the image before clicking so the target pixel is larger and easier to hit.

If the image will not load, check that the format is supported by the browser and that the file is not corrupted.

If two similar colors look identical, compare their HEX values side by side rather than relying on the preview.

If the page loses the history, that is expected; copy the values you need before navigating away.

If the screen picker returns a color from the wrong window, move the picker over the target before clicking; the API reads the pixel under the pointer.

Related standards and documentation

• HEX, RGB and HSL are common CSS color notations defined by the CSS Color specification.
• The EyeDropper API defines the browser screen-picking interaction.