You see a colour, you want that colour. Guessing it by eye is hopeless and digging through page code is slow. Here is the one-click route, plus what to do with the code once you have it.
Use an eyedropper. Hover over the pixel, click, and you have the exact value in HEX, RGB and HSL.
The alternatives both work and both cost time. You can open the browser's developer tools, find the element in a tree of code, and read the colour from the styles panel — reliable, and slow, and useless for a colour that lives inside an image. Or you can screenshot the page and open the image in an editor that has a colour picker, which is four steps to get one number.
Neither is difficult. Both are enough friction that most people give up and pick something that looks close, which is where the trouble starts.
Colour is one of the few things where the eye is simultaneously extremely sensitive and completely unreliable.
Unreliable, because what you see depends on everything around it. The same grey looks warm next to blue and cold next to orange. The same blue looks lighter on a dark page than on a white one. Your screen's brightness, its colour profile, the light in the room and what you looked at ten seconds ago all shift the reading. Two people describing the same colour will not agree, and neither will the same person on two different days.
Extremely sensitive, because put two near-identical colours side by side and everyone sees the difference instantly. Nobody can name it, but everyone can see it.
Which is why an approximation looks fine while you are choosing it and wrong once it sits next to the original. The brand blue that was almost right is visibly not the brand blue when the logo is on the same page.
An eyedropper removes the eye from the equation. It reads what is actually there.
Anybody who works with colour ends up needing the same thing, and most of them are not building websites.
A photograph with a sky you want in a palette. A painting whose particular green you have been trying to mix. A film still. A textile, a tile, a piece of glazed pottery, a car in a car park. Anything that can end up on a screen can be sampled from a screen.
Interior work, where the wall colour in a photograph needs to become something you can take to a paint supplier. Graphic and print work, where a client sends a picture and says "these colours". Anyone building a palette for a brand, a room, a garment or a game.
The workflow is the same in every case: see a colour, take the value, keep it somewhere with the others. That last part — keeping them together — is what turns individual samples into a palette, and it is the part people skip, which is why the value ends up in a note on a phone and is never found again.
You get the same colour in three notations, and each has its use.
HEX is six characters and the most portable. It is what you paste into design software, into code, into a message to somebody else. When in doubt, take the HEX.
RGB gives the three channels as numbers. It is easier to reason about when adjusting — you can see at a glance that a colour is heavy on red — and it is the format most photo editors expect.
HSL separates hue, saturation and lightness, which is the format for building relationships. Keeping the hue and changing the lightness gives you a matching set of shades. Rotating the hue by even amounts gives you a palette that hangs together. If you are creating rather than copying, HSL is the useful one.
A client sends a photograph of their shopfront and asks for materials that match the signage.
By eye, you pick a green that looks right on your screen. Printed and placed next to the actual sign, it is visibly a different green — slightly bluer, slightly darker. Nothing was done carelessly; the photograph was viewed on a warm screen in a cool room.
Sampled directly, you have the value in three seconds, and it is the same value tomorrow on a different monitor. Whatever else goes wrong, the colour is not a matter of opinion.
Does it work on images and video, or only on styled elements?
On anything visible, because it reads pixels rather than code. That includes photographs, logos, a paused video frame — everything the developer tools route cannot reach.
Is the value affected by my screen?
The value read is what the browser is displaying, so it is accurate to the file. How that looks on your particular screen is a separate question, and the reason for sampling rather than judging by eye.
Can I sample outside the browser?
A browser extension works within the browser. For a colour somewhere else on your screen, take a screenshot, open the image in a tab, and sample it there.
What about gradients?
You get the colour of the exact pixel you clicked. For a gradient, sample both ends and the midpoint.
How do I keep the colours I collect?
Build a palette rather than copying values one at a time. Colours kept together can be compared; colours pasted into separate notes cannot.
Eye Dropper Pro reads any pixel on any page and gives you HEX, RGB and HSL in one click, with palettes to keep what you collect. Works on images and video, not just styled elements. Free, no account.
Get Eye Dropper Pro →