Color Picker
Pick a color from any visible desktop app, screen, window, monitor, screenshot or local image.
What Is the Color Picker?
Color Picker uses the browser's permission-gated native eyedropper to sample one visible pixel from another app, window or monitor when the browser supports it. It can also capture one frame from a user-selected screen/window or inspect an uploaded screenshot or image. Every sample includes HEX, RGB, HSL, OKLCH, black/white text contrast and a private recent-color strip.
How It Works
Choose Turn On Screen Dropper in a supported desktop Chromium browser, move the browser-controlled magnifier over any visible pixel and click. Select Turn Off Screen Dropper or press Escape to cancel. For a repeatable fallback, capture a screen/window through the browser permission panel or load an image, then click pixels on the local sampling surface. Copy any color format or export recent samples as CSS, CSV or JSON.
When to Use It
Use it to match interface colors across applications, identify a color in a video, presentation or PDF, inspect a screenshot, build a small working palette or check whether black or white text reads better over a sampled color.
Step-by-Step Workflow
- Choose a trustworthy source. Sample the original artwork where possible. A compressed screenshot may add edge colors that are not part of the intended design. Sample broad flat areas rather than anti-aliased lettering or the edge of a shadow.
- Use the right picker mode. The screen eyedropper depends on browser support and requires an explicit user action. If it is unavailable, import an image or enter a color value. The browser controls the system picker; a normal web page cannot silently sample another app.
- Edit the gradient intentionally. In the animated text tool, arrange gradient stops and adjust their positions. Stop color controls the hue; position controls where it falls along the blend. Moving two stops close together creates a faster transition. Keep a copy of the gradient configuration for later edits.
- Check the final use. Review the palette on light and dark backgrounds and at the intended text size. Check readability separately from whether the colors look attractive. A preview canvas, transparent export and final website background can produce different perceived results.
Practical Example
A blue-to-orange gradient with stops at 0% and 100% spreads the transition across the full range. Moving the orange stop to 40% reaches orange earlier; it does not simply rotate the gradient. Angle is a separate control.
Check Your Result
- Test text legibility over every part of a changing gradient.
- Keep shadows and glow off unless they improve the final design.
- Export editable gradient information as well as the generated code.
Limitations & Privacy
Automatic palette extraction groups pixel colors; it cannot know which color is your official brand primary. Display calibration, browser support and compression affect what you see.
Image sampling and gradient editing happen locally. Screen picking returns the chosen color through the browser’s supported picker, not a continuous desktop capture. See the Privacy Policy for site-wide storage, optional analytics and external-service details.
Explore practical tool workflows for the next step.
Frequently Asked Questions
- Can It Pick Outside The Browser?
- Yes, when the native EyeDropper API is available. Desktop Chrome, Edge and other Chromium browsers can provide a browser-controlled magnifier that samples a user-selected pixel anywhere visible on the screen. Firefox, Safari and mobile browsers may require the screen-capture or image fallback.
- Does It Record My Screen?
- The native eyedropper returns only the one pixel you click. The optional capture fallback uses the browser's own screen/window permission panel, draws one frame locally and immediately stops the capture tracks. No image is uploaded or saved by BrowserTools.
- Why Can The Sample Differ From A Design File?
- The native API returns an sRGB color. Operating-system color management, HDR displays, wide-gamut content, transparency, video processing and display scaling can make the sampled screen pixel differ from the source file's original encoded value.
Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.