Docs Install for Chrome

:cp Color picker

What color is that, exactly? Point at it, copy the hex.

See the HEX and RGB value of any pixel on the page. Press ⌘K, type :cp, then click a color to copy its hex code.

Install for Chrome Try it on this page

7-day free trial No account Chrome, Edge, Brave, Arc, Vivaldi and Opera

Live demo

Pick a color in three steps

  1. ⌘K

    Step 1

    Open the palette

    On any page. Ctrl+K on Windows and Linux.

  2. :cp

    Step 2

    Start the picker

    The page dims and a loupe follows your cursor.

  3. Esc

    Step 3

    Copy or cancel

    Click copies the hex code. Esc cancels.

In detail

How the color picker works

The palette closes and a loupe opens over the page. You read the value, click once, and the hex code is on your clipboard.

A loupe that shows single pixels

The loupe zooms in on an 11 by 11 pixel grid around your cursor and outlines the pixel in the middle. Under it, a label shows that pixel as an uppercase hex code, like #F0013D, and as rgb(240, 1, 61).

  • Near the edge of the screen, the loupe flips to the other side so it stays in view.
  • The label has a strip of the color itself, so you can check it at a glance.

One click copies the hex code

Click and the hex code goes to your clipboard, ready to paste into CSS, a design file or a chat. The picker closes and a small note at the bottom of the page shows what you copied, such as Copied #F0013D.

  • Need RGB or HSL instead? Type the hex code into the palette, like #f0013d to rgb, and press ↵ to copy the answer.
  • Esc closes the picker without copying anything.

No EyeDropper API needed

Many color picker extensions depend on the browser’s EyeDropper API. TabCmdr doesn’t. When you start it, it takes one screenshot of the visible tab and reads colors from that image, so it works the same in every Chromium browser.

  • Because it reads a still image, a playing video or animation holds still while you pick.
  • It only sees what’s on screen. Scroll to the color first, then start the picker.

More about the color picker

  • Two ways to start it

    Type :cp, or search for the Pick Color from Screen command. Both open the same loupe.

  • Convert the color

    Paste the hex code back into the palette with to rgb or to hsl to get the other formats.

  • Colors of an element

    The Ruler’s style panel lists an element’s text and background colors as hex codes.

  • No extra tab

    You stay on the page. There’s no picker window or separate app to open.

  • Turn it off if you don't need it

    Color Picker has its own switch under Tools in settings. Off, :cp and its Tools entry go away.

  • Stays on your computer

    The screenshot it reads is used only while the picker is open and isn’t saved or sent anywhere.

FAQ

Questions about the color picker

More in the documentation.

How do I get the hex code of a color on a website?

Press ⌘K on a Mac or Ctrl+K on Windows and Linux, type :cp and move the loupe over the color. Click to copy its hex code.

Does it show RGB too?

Yes. The label under the loupe shows the hex code and the RGB value. A click copies the hex code.

Is the hex code uppercase?

Yes. Codes are copied in uppercase with a leading #, like #F0013D.

Does it need the EyeDropper API?

No. It reads colors from a screenshot of the visible tab, so it doesn’t depend on the EyeDropper API.

Can I pick a color outside the browser window?

No. It only reads the visible part of the tab you’re on.

How do I cancel without copying?

Press Esc. The loupe closes and your clipboard stays as it was.

See all 32 features

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

Install for Chrome

Free for 7 days Then $3.99 / y No account