Color Picker pulls an exact colour out of something you can see. Sample any pixel on your screen — including outside the browser window — or load an image and pick from it with a magnifier that shows you precisely which pixel you are on. Everything runs in your browser, and nothing is uploaded.
Finding a colour you can see but cannot name
You have a logo, a screenshot of a design you like, a photograph with a shade you want to reuse, or a brand asset with no style guide attached. The colour is right there. What you need is its code, and eyeballing it never works — the shade you guess is always slightly off, and slightly off is worse than obviously different.
Sampling a pixel gives you the exact value in one action. No guessing, no adjusting, no opening design software for a task that takes two seconds.
Two ways to pick
From anywhere on screen
Sample any pixel your display is showing — another browser tab, a design app, a PDF, a video frame, your desktop wallpaper. The picker works beyond the boundaries of this page.
From an image you load
Drop in a picture and pick from it directly. A magnifier loupe follows your cursor so you can see exactly which pixel you are about to sample.
Screen picking is faster when the colour is already in front of you. Image picking is more precise, because the loupe removes the guesswork on a small target — a single letter in a logo, one thread in a fabric photograph, a thin border.
How to pick a colour
-
1
Choose your methodStart the screen picker to sample from anywhere on your display, or load an image to pick from a specific file.
-
2
Target the pixelMove over the colour you want. With an image, the loupe magnifies the area under the cursor so you can land on exactly the right pixel.
-
3
Sample itClick to capture. The colour is displayed along with its code, ready to use.
-
4
Copy and applyTake the value into your stylesheet, design file or document. Press Escape at any point to cancel without picking.
Where screen picking works
Sampling pixels from outside the browser window relies on a browser feature that is not available everywhere. It works in Chromium-based desktop browsers — Chrome, Edge and Opera among them. Firefox and Safari have not implemented it, and it is not available on mobile browsers.
If your browser does not support it, picking from a loaded image works exactly as described and gives you the same result. The practical workaround is straightforward: take a screenshot of whatever you wanted to sample, load that image here, and pick from it with the loupe.
The restriction exists for a sensible reason. Reading pixels from your screen is a capability that could be abused, so browsers require a deliberate action from you before the picker starts, show an obvious cursor change while it is active, and only hand over a colour when you actually click. A page cannot quietly read your screen in the background.
What people use it for
- Matching a brand colour. Pulling the exact shade from a logo when nobody can find the brand guidelines.
- Rebuilding a design. Sampling from a screenshot or mockup to reproduce a palette in code.
- Building a palette from a photograph. Taking three or four colours from an image so a design sits naturally alongside it.
- Checking what is actually rendering. Confirming a element’s real colour on screen rather than trusting what the stylesheet says.
- Matching across applications. Sampling from a PDF or a design tool and using the value in a web page.
- Print and craft work. Identifying a shade from a reference image before choosing paint, thread or material.
The pixel you pick is not always the colour you want
Worth knowing, because it surprises people. Sampling returns the exact value of one pixel, and images are rarely as uniform as they look. A photograph of a red wall contains hundreds of slightly different reds depending on light and shadow. Text and icons have anti-aliased edges, where the pixels are a blend of the shape and the background — sample the edge of a letter and you get a muddy in-between value rather than the letter’s actual colour.
Two habits fix this. Sample from the middle of a solid area rather than near an edge, and use the loupe to confirm you are on flat colour before clicking. If a photograph has no flat area at all, sample two or three points and pick the one that best represents what you see, since no single pixel will be authoritative.
JPEG compression compounds the problem slightly, because it introduces small colour shifts around detail. A PNG screenshot samples more reliably than a heavily compressed photograph.
Nothing is uploaded
Any image you load is read by your browser from your own device and never transmitted to filecrafthub.com or anywhere else. Colours you sample from the screen are handled entirely within the page — no screenshot is taken, stored or sent, and only the single pixel you deliberately click is ever read.
Frequently asked questions
Can I pick a colour from outside my browser?
Yes, in Chromium-based desktop browsers such as Chrome and Edge. The picker can sample from other applications and your desktop.
Why is screen picking unavailable in my browser?
Firefox and Safari have not implemented the feature, and it is not available on mobile. Load an image and pick from that instead — a screenshot works well.
Can the site read my screen without me knowing?
No. The browser requires a deliberate action to start the picker, shows a clear indication while it is active, and only returns a colour when you click a pixel.
Is my image uploaded when I pick from a file?
No. It is read locally by your browser and never leaves your device.
Why does the colour look slightly different from what I expected?
You may have sampled an anti-aliased edge or a shaded area. Pick from the middle of a flat region, and check the loupe before clicking.
How do I cancel without picking?
Press Escape. The picker closes and no colour is captured.
Can I get the colour in RGB or HSL as well?
Yes — take the sampled value into our Color Code tool to see it in every notation and to adjust it.
Related tools
These two tools are a pair. Use this page to find a colour from something you can see; use Color Code to convert it between HEX, RGB and HSL, adjust its lightness, and build a set of shades around it. Applying the result to something visual? Poster Maker accepts custom values.