How to Use a Colour Picker: Extracting a Palette From an Image
You have a screenshot, a photo or a logo file, and you need the exact colours inside it. Eyeballing a shade rarely works, and guessing hex codes wastes time. A colour picker solves this by reading pixel values straight from the image and handing you a palette you can copy, save and reuse.
This guide covers the full workflow: sampling single pixels, pulling a balanced set of swatches, cleaning up the result, and knowing when a browser-based tool is the right choice and when it is not.
What a Colour Picker Actually Does
A colour picker is a tool that reads the colour value of a pixel and converts it into a format you can use elsewhere. In a browser utility, you load an image, hover over it, and the tool reports the colour under your cursor.
Most pickers return several formats at once:
- HEX — a six-character code such as
#1A73E8, used in CSS and design files - RGB — red, green and blue values from 0 to 255, the native format for screens
- HSL — hue, saturation and lightness, useful when you want to adjust a shade rather than replace it
- CMYK — a print-oriented model, though on-screen conversion is approximate
The important point is that a picker reports what is actually in the file. It does not interpret, correct or improve your image. If the source is compressed, blurry or colour-shifted, the numbers you get will reflect that.
Why Eyeballing Fails
Human colour perception is unreliable in two specific ways. First, the same pixel looks different depending on what surrounds it, so a mid-grey on a dark background reads lighter than the identical grey on white. Second, screens vary in brightness, saturation and colour temperature, so the shade on your monitor may not match the shade on someone else's.
A picker removes both problems by returning a fixed numeric value. That value travels with the file, not with your display settings.
How to Extract a Colour Palette From an Image
This is the core workflow. It works for screenshots, photographs, illustrations and scanned artwork alike.
- Open the colour picker tool. Load it in your browser at the online tools collection. Nothing installs, and your image stays on your device.
- Upload or drag in your image. Use the highest-resolution version you have. A compressed thumbnail will give you muddy, slightly wrong values.
- Zoom in before you sample. Magnify to at least 200 percent so you can see individual pixels. Anti-aliased edges blend two colours together, and sampling there gives you a shade that exists nowhere in the design.
- Sample the dominant areas first. Click the largest blocks of flat colour: backgrounds, primary shapes, headline text.
- Record each value as you go. Copy the hex code into a notes file or a document. Do not rely on memory across a long session.
- Sample the accents next. Buttons, links, icons and highlights usually carry the second and third most important colours.
- Check for near-duplicates. Two swatches that differ by one or two units in a channel are effectively the same colour. Merge them.
- Test the palette against real content. Place your swatches behind sample text and check contrast before you commit.
Sampling a gradient gives you one point on that gradient, not the gradient itself. Note the two endpoints separately if the transition matters.
Sampling Flat Colour vs Photographs
Flat design work is straightforward: the pixels are uniform, so any point inside a shape gives the same answer. Photographs are harder. Skin, sky, foliage and fabric all shift subtly across a surface, so a single sample represents one tiny region.
For photographic sources, sample five or six points across the area you care about, then choose a middle value or an average. If the tool supports area averaging, use it — it smooths out sensor noise that would otherwise throw off your reading.
How Do You Extract a Colour Palette From an Image Without Installing Software?
Open a browser-based picker, load your image, and sample directly on screen. Everything runs locally in the page, so there is no upload, no account and no install. You get hex, RGB and HSL values you can copy immediately. The trade-off is that browser tools work on one image at a time and cannot read colour profiles embedded in professional print files.
That is the short answer. The longer version matters if you work across many images or need print-accurate output.
Where Browser Tools Stop
A browser picker reads the pixels the browser renders. If your file carries an embedded colour profile, the browser may convert it before you see it, and the value you sample reflects that conversion rather than the original data. For web and screen work this rarely matters. For print, it can.
Browser tools also cannot batch-process a folder of images or generate a shared palette file across a team. If you need that, a desktop application is the correct tool.
Building a Balanced Palette From Sampled Colours
Collecting swatches is the easy part. Turning them into a palette that works is where most people stop too early.
Limit Yourself to Five Colours
A usable palette usually has one dominant colour, one or two supporting colours, and one accent. Beyond about five, the palette stops guiding decisions and starts creating them. If you have sampled twelve shades, you have sampled a gradient, not a palette.
Assign Roles, Not Just Values
Give each swatch a job before you use it:
- Background — the largest surface area, usually the lowest-saturation colour
- Primary — the main brand or theme colour, used for headers and key elements
- Secondary — a quieter companion for panels and dividers
- Accent — a higher-saturation colour reserved for buttons and calls to action
- Text — near-black or near-white, chosen for readability rather than style
Check Contrast Before You Ship
Two colours can look fine side by side and still be unreadable as text and background. Check the contrast ratio between your text colour and every surface it will sit on. If a pairing fails, darken the text or lighten the surface rather than abandoning the palette.
Common Mistakes When Using a Colour Picker
Sampling anti-aliased edges. Text and curved shapes blend into their background at the boundary. Those pixels are mixtures, not colours. Zoom in and sample the solid interior.
Working from a compressed image. Heavy compression introduces colour artefacts, especially around sharp edges. Use the original file where you can.
Ignoring the background. A swatch that looks vibrant on white may look dull on cream. Always preview colours against the surface they will actually sit on.
Treating one sample as the whole colour. In photographs there is no single correct value. Sample several points and pick deliberately.
Forgetting to record the source. Note which image each palette came from. Six months later, you will not remember.
Practical Uses for an Extracted Palette
Extracting a colour palette from an image is not only a design task. It shows up in several everyday workflows:
- Matching a slide deck to a client's existing brand materials
- Rebuilding a website's theme after a redesign brief arrives as a screenshot
- Keeping a product mockup consistent with a photograph of the physical item
- Pulling a seasonal colour set from a reference image for a campaign
- Documenting the exact shades used in a printed piece so the digital version matches
In each case the value is the same: you replace a subjective judgement with a recorded number that anyone can reproduce.
Frequently Asked Questions
Can I use a colour picker on any image format?
Most browser tools handle PNG, JPEG, WebP and GIF. PNG gives the cleanest results because it uses lossless compression, so flat colours stay exact. JPEG introduces artefacts around edges and gradients. SVG files are different — they are vector, so you should read the colour values from the file's source code rather than sampling the rendered result.
Why does the colour I sampled look different on another screen?
Screens differ in brightness, colour temperature and gamut. A value sampled accurately on one display can render visibly differently on another. This is a display limitation, not a picker error. Working in a standard colour space and checking on more than one device reduces the surprise.
How many colours should a palette have?
Three to five works for most projects. One dominant colour, one or two supporting shades, and one accent covers nearly every interface need. Larger palettes are harder to apply consistently and tend to produce inconsistent results across a team.
Can a colour picker read colours from a PDF or video?
Some browser tools accept a screenshot of the frame or page, which is usually the simplest route. Sampling directly from a playing video is unreliable because compression and motion blur shift the values frame by frame. Pause, capture a still, then sample that.
Is the colour picker accurate enough for print work?
For screen-to-screen consistency, yes. For print, treat the output as a starting reference only. Print uses a different colour model, and a CMYK conversion from an on-screen sample is approximate. Confirm final values with a physical proof before committing to a print run.
Where to Go Next
Once you have a palette you trust, store it somewhere durable — a design file, a style guide or a plain text list with the hex codes. The next time someone asks what colour your project uses, you will have an exact answer rather than an approximation.
A colour picker turns a visual impression into a reusable specification. Used carefully, with attention to zoom level, source quality and contrast, it gives you a palette that holds up across screens, teams and revisions. Start with the browser-based tools and sample your next image directly — no install, no upload, no guesswork.