Color Picker Tools: How to Grab Any Color from Anywhere
How to pick an exact color from your screen, a photo, a website or a physical object — browser eyedroppers, OS tools and everyday techniques.
You've seen a color you love — on a website, in a photo, on a product box — and you need its exact hex code. That's what a color picker does: it samples a single pixel and tells you precisely what color it is. Unlike a full palette extractor, a color picker is about grabbing one exact color from anywhere on your screen.
Once you have the hex code, drop it into PaletteCSS to build a full palette around it and copy the result as CSS.
Built into your browser (no install needed)
Modern browsers include a native eyedropper:
- Chrome / Edge DevTools — open DevTools (F12), click any element's color swatch in the Styles panel, then click the eyedropper icon and click anywhere on the page — even outside the inspected element.
- Firefox DevTools — same idea: the color swatch in the Rules panel has a built-in eyedropper.
- The EyeDropper Web API — some websites and web apps expose a native "pick a color" button using this browser API directly, no extension required.
Picking a color from outside the browser
To grab a color from anywhere on your screen — a desktop app, a video, a game — you need an OS-level tool:
- Windows — PowerToys' Color Picker (free, from Microsoft) sits in the system tray and copies a hex code the instant you click anywhere on screen.
- macOS — the built-in Digital Color Meter app (in Utilities) reads the exact pixel color under your cursor.
- Any OS — most screenshot tools include a basic color picker as a side feature.
Picking a color from a photo
If the color lives inside an image file rather than on your live screen, any of the above screen-based pickers still work — just open the image in a viewer and sample it directly off the screen. For extracting a whole palette from a photo automatically instead of one color at a time, see our guide on creating a color palette from an image.
Picking a color from a physical object
For a real object — packaging, fabric, a paint swatch — take a well-lit photo with your phone, then use any of the screen-based pickers above on that photo. Lighting matters more than any tool: a color sampled in yellow indoor light will read warmer than the true color, so natural daylight gives the most accurate hex code.
What to do once you have the color
A single hex code is a starting point, not a finished palette. Paste it into PaletteCSS to instantly see its shades, tints, and complementary or analogous partners — turning one sampled pixel into a complete, usable color system.
Frequently asked questions
How do I pick a color from a website?
Open your browser's DevTools, click any element's color swatch, then use the built-in eyedropper to click anywhere on the page and copy the exact hex code.
How do I pick a color from my whole screen, not just a webpage?
Use an OS-level tool: PowerToys Color Picker on Windows, or Digital Color Meter on macOS. Both sample any pixel on screen, not just within a browser.
What is the difference between a color picker and a palette generator?
A color picker grabs one exact color from a single point. A palette generator builds or extracts several colors at once, either randomly, from theory, or from an entire image.
Keep exploring: browse color palettes, read how to create a palette from an image, or build a full scheme from any hex code on PaletteCSS.
