Color picker for Chrome

Click any pixel on a web page and its color lands on your clipboard as HEX, RGB, HSL or HSB, ready to paste into your design tool or stylesheet.

What it does

The Color Picker is an eyedropper built into the Screen Ruler control bar. Start it, move the magnifier over the page and click. The color under the cursor is copied to your clipboard straight away, and a small swatch with the value appears above the Color Picker button so you can see what you picked.

It samples the pixel as it is drawn on screen, not the CSS value of an element. That matters more often than you would think:

• Images and photos. Pick a color out of a hero image, a logo or a screenshot, where there is no CSS to read.
• Gradients. Grab the exact color at one point along a gradient.
• Layered and transparent elements. Get the color you actually see after opacity, overlays and blend modes have done their work.
• Canvas, video and SVG. Anything the browser renders can be sampled.

How to pick a color

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
2. Click Color Picker in the control bar at the bottom of the page, or press 6.
3. Move the magnifier over the pixel you want and click it.
4. Paste the value wherever you need it.

Press Esc to cancel without picking anything. The first time you pick a color, Chrome asks whether Screen Ruler may write to your clipboard. Allow it once and later picks copy without asking.

Color formats

Choose the format the picker copies with the Color Format setting on Screen Ruler's options page. The same setting is used by the side panel, so the values you read while inspecting and the values you pick always match.

• HEX: for example #3B82F6. The default.
• RGB: for example rgb(59, 130, 246).
• HSL: for example hsl(217, 91%, 60%).
• HSB: for example hsb(217, 76%, 96%). Hue, saturation and brightness, the model used by the color pickers in most design tools.

Your choice is saved, so you set it once and every pick after that uses it.

How it works

Screen Ruler uses the browser's own EyeDropper, the same native tool Chrome offers to web pages. The browser reads the color straight off the rendered pixel, so there is no screenshot being approximated and no rounding from scaling an image down. Screen Ruler then converts the result into your chosen format and copies it.

While the picker is open, Screen Ruler hides its own hover highlights so they do not get in the way of the pixel you are aiming at.

Limits

• One color per click. The picker copies a single pixel. To pull every color an element or page uses at once, see Color Palette.
• Solid colors only. A rendered pixel has no transparency, so the value is always fully opaque, even when the element behind it is semi-transparent. You get the color you see.
• No color history. Each pick replaces the last one on your clipboard.
• Restricted pages. Like any extension, Screen Ruler cannot run on chrome:// pages, the Chrome Web Store or other extensions' pages.

When it is useful

• Matching a brand color. Pick the exact blue from a client's live site or logo instead of guessing from a screenshot.
• Building a palette. Sample colors from sites you like and paste them into Figma, Sketch or your CSS.
• Checking a build against the design. Sample the shipped page and compare it with the value in the design file.
• Checking contrast. Pick a text color and its background, then check the pair, or let Contrast Checker flag low contrast text for you.

To read the declared colors of a specific element instead of a pixel, use Inspect Element, which lists them in the side panel. For a wider look at the options, see the best color picker extensions for Chrome.

The Color Picker is part of Screen Ruler's free plan, free forever with no account needed.

Common questions

Is the color picker free?

Yes. The Color Picker is one of Screen Ruler's free features, along with element inspection, distance measurement and page rulers. It stays free after the trial ends.

How is this different from the eyedropper in Chrome DevTools?

The DevTools eyedropper lives inside the color editor of the Styles pane, so you have to open DevTools, find a color property and open its swatch first. Screen Ruler's picker is one key press away on the page itself, and it copies the value to your clipboard in your preferred format as soon as you click.

Can I pick a color from an image?

Yes. The picker samples the rendered pixel, so it works on photos, logos, background images, gradients, video frames and canvas drawings, not only on elements with a CSS color.

Why does the picked color differ slightly from the CSS value?

The picker returns what is actually drawn on screen. Opacity, overlays, blend modes and image compression can all change the final pixel. To read the declared CSS value, select the element and look at its colors in the side panel.

Can it copy HSL or RGB instead of HEX?

Yes. Set Color Format on Screen Ruler's options page to HEX, RGB, HSL or HSB. Every pick after that is copied in that format.