Color Picker
Color Picker
Click anywhere on an image to extract colors in HEX, RGB, and HSL formats
- Runs in your browser
- Nothing uploaded
- No sign-up
- Free, no daily limits
- 1Add your file
- 2Choose settings
- 3Download
100% Private: All processing happens in your browser. Your files never leave your device.
Last updated
Color Picker lets designers, developers, and artists inspect digital images and extract exact color values with a single click. When you hover over an image, a live circular swatch and dynamic HEX readout follow your pointer. Clicking on any pixel locks that color into a running palette history that holds up to 12 recent selections. Each saved entry displays synchronized HEX, RGB, and HSL values with individual one-click copy buttons that transfer formatting directly to your clipboard.
Unlike browser extensions that depend on Chromium-specific APIs, this tool operates on standard HTML5 Canvas 2D pixel interrogation. It runs reliably across desktop and mobile browsers, including Safari on iOS and macOS, Mozilla Firefox, Google Chrome, and Microsoft Edge. All image parsing and color math execute locally on your device without sending image bytes over the network. To crop down to an icon or logo before sampling, use Crop Image. For creating web icons from extracted palettes, explore Favicon Generator.
How it works
1. Load an image file
Select or drop a photo, screenshot, or graphic asset into the tool. Files up to 20 MB are supported with local browser processing.
2. Hover to inspect pixels
Move your cursor across the image canvas. A floating preview swatch and live hexadecimal readout display the color under the crosshair.
3. Click to record a color
Click on any pixel to add its exact color to the Picked Colors history panel, which records up to 12 recent entries.
4. Copy HEX, RGB, or HSL values
Click the individual copy button next to the HEX code, RGB triplet, or HSL percentage to paste the value into your code or design tool.
When you'd use it
Matching website CSS tokens to brand identity assets
Upload corporate logos or brand guideline sheets to extract exact hexadecimal color codes for primary brand buttons, headers, and UI accents.
Sampling harmonious color schemes from photography
Pick 4 or 5 complementary shades from nature photos, outdoor scenes, or interior design mood boards to build balanced palettes for digital artwork.
Extracting exact interface colors from UI screenshots
Capture screenshots of mobile apps or websites, load them into the picker, and grab RGB and HSL coordinates to recreate mockups in design tools.
Verifying color accessibility contrast ratios
Sample foreground text colors and adjacent background pixels from graphic banners to calculate contrast ratios against WCAG 2.1 accessibility standards.
How does canvas pixel sampling provide universal browser support?
Many online color pickers rely on the experimental `window.EyeDropper` API, which functions exclusively in Chromium desktop browsers like Chrome and Edge. Apple Safari on macOS and iOS, as well as Mozilla Firefox on all platforms, do not support this proprietary interface. TryDocsy takes a universal approach: your uploaded image is drawn to an internal HTML5 `<canvas>` element, and mouse coordinates are mapped to canvas pixels.
When you click, the tool queries `ctx.getImageData(x, y, 1, 1).data` to read the exact 8-bit unsigned integer values for red, green, blue, and alpha channels. Color conversion algorithms then translate those values into standard hexadecimal notation and cylindrical HSL coordinates. Because this method uses standard Canvas 2D specifications, it functions consistently across every modern operating system and mobile device.
Color format specifications: HEX, RGB, and HSL compared
Different programming environments and design suites prioritize distinct color representations. Our tool calculates all three primary web formats simultaneously, allowing you to copy whichever syntax matches your target workflow.
The following reference table outlines the syntax structure, numerical ranges, and typical application domains for the formats produced by the picker.
| Format | Syntax Example | Channel Ranges | Common Implementation |
|---|---|---|---|
| HEX | #3b82f6 | #000000 to #ffffff (24-bit sRGB) | CSS styling, HTML attributes, SVG fills |
| RGB | rgb(59, 130, 246) | 0 to 255 per channel (Red, Green, Blue) | Figma, Canvas 2D API, WebGL shaders |
| HSL | hsl(217, 91%, 60%) | Hue 0-360 deg, Saturation/Lightness 0-100% | CSS theme variables, UI palette generation |
Source: W3C CSS Color Module Level 4 Recommendation, verified standards, checked October 29, 2026
Why can sampling vary on downscaled high-resolution photos?
To maintain smooth interface rendering, the display canvas constrains image dimensions to a maximum width of 600px: `const scale = Math.min(600 / img.width, 600 / img.height, 1)`. When a high-resolution photograph (such as a 24-megapixel camera file) is scaled down to fit this viewport, the browser applies bilinear interpolation to blend pixels into the display grid.
On broad, continuous color regions, this scaling has virtually no perceptible effect. However, along high-contrast 1px vector boundaries or tiny font serifs, neighboring pixel values blend together slightly. If you need 100% pixel-perfect sampling on minute details, crop tightly around that specific element using Crop Image so the image fits under 600px without scaling. You can also adjust contrast with Adjust Image.
When should you use an operating system eyedropper instead?
Because this tool runs inside a sandboxed web page, browser security models prevent scripts from sampling pixels outside the active canvas element. The tool cannot sample colors from your desktop wallpaper, external software windows, or video streaming feeds running in separate applications.
If your task requires picking a color from a native desktop application, menu bar, or non-browser window, an operating system utility (such as macOS Digital Color Meter or Windows PowerToys Color Picker) is the appropriate tool. For extracting colors from images, mockups, and photos without installing software, TryDocsy provides private, instant extraction.
Frequently asked questions
Does this color picker work on iPhone and Mac Safari?
Yes. By using standard HTML5 canvas pixel sampling instead of the Chromium-only EyeDropper API, the tool works across Safari on iOS and macOS, Firefox, Edge, and Chrome.
How many picked colors can I store in the history list?
The tool saves up to 12 colors in its history. When you record a 13th color, the oldest entry at the bottom of the list drops off automatically.
Why does a picked color sometimes look slightly different on large photos?
Photos wider than 600px are scaled to fit the display canvas using bilinear smoothing. To sample unscaled pixels on fine details, crop the image to under 600px first.
Can I sample colors from other browser tabs or my desktop wallpaper?
No. Web security policies prevent canvas tools from reading pixels outside the uploaded image. For desktop sampling, use an OS-level utility like PowerToys or Digital Color Meter.
Which color formats are available for copying to clipboard?
Every picked color displays HEX, RGB, and HSL formats. Click any individual value to copy that exact string directly to your clipboard.
What is the file size limit when uploading an image to pick colors?
The tool accepts image files up to 20 MB, processed locally in client-side memory without network upload.