Utilore

Colour Picker

Move across the square to pick a colour, or take one that already exists: from a picture with the eyedropper, or from anywhere on the screen where the browser allows it. The code appears at once in all three notations.

Pick a colour

Recent

Picking from anywhere on the screen is a browser feature that only Chrome and Edge have. In Safari and Firefox the button is not shown at all — promising it and then refusing would be worse than not offering it. Use an image there: a screenshot works just as well.

The picture stays in this tab: the colour is read from a canvas right here, nothing is uploaded. The recent colours are remembered on this device only.

Nearby: Colour Converter · Colour Palette Generator · CSS Gradient Generator · HEX to RGB

How to use

  1. Drag across the square to choose the shade, and move the hue slider under it to change the colour family.
  2. Set the opacity if you need a semi-transparent colour — it appears in the code as rgba or as two extra characters in HEX.
  3. To take a colour that already exists, press «Pick from an image» and click on the picture. In Chrome and Edge you can also pick straight off the screen.
  4. Press «Copy» next to the notation you need. The colour goes into the recent strip, so you can come back to it.

Good to know

Why the square is built on HSV

In HSV the square of saturation against brightness is filled edge to edge: every point is a colour of its own. Build the same square on HSL and it degenerates — the top row is all white and the bottom all black, and half the area picks nothing. That is the whole reason for the choice, and it is what the test guards.

Three ways in, because people arrive with different questions

Choosing a colour and finding one are different jobs. The square is for choosing. The eyedropper on an image is for a colour that already exists somewhere — in a screenshot, a logo, a photograph. Picking off the screen is the same thing without leaving the window, and only Chrome and Edge can do it.

Where transparency shows up

Opacity is written only when it is not full: «rgb(31, 95, 214)» rather than «rgba(31, 95, 214, 1)», because the second gets tidied up by hand anyway. In HEX transparency becomes two extra characters at the end — every current browser understands that, older tools do not, so at full opacity the tail is left off.

Frequently asked questions

Why is there no «pick from screen» button in my browser?

Because Safari and Firefox cannot do it. The feature is a browser one, not ours, and only Chrome and Edge have it. Showing the button and then refusing would be worse than not offering it — so it is simply not there. Take a screenshot and use the image instead; the result is identical.

How do I get the colour of a pixel in a photo?

Press «Pick from an image», choose the file and move the pointer over the picture — the colour follows the pointer. Click to keep it. The picture is not uploaded anywhere: it is drawn on a canvas in this tab and read from there.

Can I type a colour instead of picking one?

Yes. Type it into any of the three fields in any usual form — #1f5fd6, 1f5fd6, rgb(31, 95, 214) — and the other two fill in themselves along with the square. If you only need to convert between notations, the colour converter next door is the shorter road.

The hue slider jumps when I drag the brightness down to zero.

It should not, and it does not: black and white have no hue at all, so the slider keeps the previous one instead of snapping to red. That is deliberate — otherwise every trip to the bottom of the square would lose the colour family you were working in.

Where are my recent colours kept?

On this device, in the browser. They are not sent anywhere and are not tied to you: clear the site data and the strip is empty again.

Related tools