Docs Install for Chrome

How-to guide

How to find a color code on any website

In Chrome DevTools, open the Color Picker from the Styles pane and use its eyedropper. With TabCmdr, press ⌘K, type pick color and click any pixel to copy its HEX code.

Quick answer

Copy a color in three steps

  1. ⌘K

    Step 1

    Open the palette

    Ctrl+K on Windows and Linux, on the page with the color.

  2. pick color

    Step 2

    Type pick color

    Press Enter on Pick Color from Screen.

  3. ↵

    Step 3

    Click the color

    Its HEX code is copied to your clipboard.

Chrome's way

Chrome’s built-in eyedropper

Chrome’s developer tools have a color picker with an eyedropper:

  1. Open DevTools. Press F12 or Ctrl+Shift+J on Windows and Linux, or ⌘+Option+I on a Mac.
  2. Select an element in the Elements panel.
  3. In the Styles pane, find a color or other color declaration and click the small preview square next to it. The Color Picker opens.
  4. Click the eyedropper button, or press C.
  5. Hover over the color you want and click to sample it. Press Esc to turn the eyedropper off.

Sources: Google’s DevTools Color Picker page and Chrome keyboard shortcuts, checked in October 2026.

TabCmdr's way

Pick a color with TabCmdr

TabCmdr is a keyboard launcher that lives in your browser. Its color picker works on the page you’re looking at, with no DevTools panel to dig through.

Before you start: add TabCmdr from the Chrome Web Store. It has a 7-day free trial and needs no account.

Step 1: Open the palette and type pick color

Press ⌘+K on a Mac or Ctrl+K on Windows and Linux, type pick color and press Enter on Pick Color from Screen. Typing :cp opens the picker straight away, without pressing Enter.

TabCmdr palette with pick color typed, showing the Pick Color from Screen command and the Color Picker tool
Pick Color from Screen is a command. The Color Picker tool below it does the same and has the :cp shortcut.

Step 2: Point at the color

The page darkens and a round magnifier follows your cursor. It shows the pixels around the cursor, enlarged, with the HEX and RGB values of the pixel in the middle.

TabCmdr color picker magnifier over a purple Start free button, with a label reading #4F46E5 and rgb(79, 70, 229)
Over the purple button, the magnifier reads #4F46E5 and rgb(79, 70, 229).

TabCmdr picks from a picture of the visible page taken when the picker opened, so the screen holds still while you point, even on a page with video or animation.

Step 3: Click to copy

Click and the HEX code goes to your clipboard. The page returns to normal and a short message at the bottom confirms the code, such as Copied #4F46E5. Press Esc instead to close the picker without copying.

The web page back to normal with a message at the bottom reading Copied #4F46E5
After the click, TabCmdr confirms the HEX code it copied.

If the copy doesn’t go through, the message reads Copy failed: #4F46E5 instead, so you can still note the code. If the picker doesn’t open and a message reads To capture, open TabCmdr from its toolbar icon or browser shortcut, open the palette that way and try again.

Turn the HEX code into RGB or HSL

Paste the code into the palette and add to rgb. #4F46E5 to rgb gives rgb(79, 70, 229), and Enter copies the result. to hsl works the same way.

TabCmdr palette with #4F46E5 to rgb typed, showing the calculator result rgb(79, 70, 229) with a Copy hint
The palette converts the copied code into other color formats.

The color picker feature page and color conversion cover more formats.

Try it on your own tabs

Works in Chrome, Edge, Brave, Arc, Vivaldi and Opera.

Install for Chrome

FAQ

Questions about picking colors

More in the documentation.

How do I find the HEX code of a color on a website?

In Chrome DevTools, select an element, click the color square next to a color in the Styles pane, then use the eyedropper and click the color. With TabCmdr, press ⌘K or Ctrl+K, type pick color, press Enter and click the color. TabCmdr copies its HEX code.

Does TabCmdr copy the RGB value too?

A click copies the HEX code, such as #4F46E5. The magnifier shows the RGB value while you point. To get RGB or HSL as text, type the HEX code followed by to rgb or to hsl in the palette.

Why doesn't the page move while I pick?

TabCmdr takes a picture of the visible page when the picker opens and you pick from that picture. What you see stays still until you click or press Esc, even on a page with video or animation.

Can I pick a color outside the browser?

No. TabCmdr picks from the visible part of the current tab only.

How do I cancel without copying?

Press Esc. The page goes back to normal and nothing is copied.

See all 32 features

See all how-to guides

One shortcut for your whole browser. Stop hunting for tabs.

Install for Chrome

Free for 7 days Then $3.99 / y No account