Skip to content
Browser Screensaver

Colour Picker

Pick a colour and get every format you might need to paste somewhere — plus the contrast ratio against black and white, which is what you actually need to know before using it for text.

Every format, and the number that matters

Hex, RGB and HSL are all here with a copy button each, because which one you need depends entirely on what you are pasting into. HSL is the underrated one: it is the only format where "slightly lighter" or "less saturated" is an obvious single-number change.

The contrast figures are the part most pickers leave out. A colour can be perfect in a swatch and unusable as text, and knowing that before you commit to it saves a round of review comments later.

  • Reading a colour out of a design and getting it into code
  • Checking whether a brand colour works as text before using it
  • Building a shade ramp from a single base colour
  • Sampling a colour from anywhere on screen, where the browser allows it

Picking a colour from anywhere on screen

Where the browser supports it, the eyedropper samples any pixel on your display — including other applications. It is a permissioned feature and simply absent in some browsers, so the button only appears when it will actually work rather than failing silently.

The shade ramp gives you eight tints and shades of whatever you have picked. Click one to make it the current colour, which is a quick way to build a palette from a single starting point.

Sharing a colour

The colour is written into the address bar, so a picked colour is a link. Paste it into a ticket or a chat and the person opening it sees the same colour with the same values.

For a full screen of one colour rather than a swatch, the custom colour screen takes the same hex value.

Questions

Can I pick a colour from outside the browser?

Where the browser supports the eyedropper, yes — it samples any pixel on your screen, including other applications. The button only appears if your browser has it, rather than being there and doing nothing.

What contrast ratio do I need for text?

4.5:1 against the background for body text to meet WCAG AA, or 3:1 for large text. The page shows both figures against black and white so you can see immediately which the colour works on.

Is the colour picker free?

Yes — free, with no account, no sign-up and no limit on how much you use it.

Is anything I enter sent to a server?

No. Everything runs in your browser, and there is no server to send it to. Once the page has loaded it works with no connection at all.