1. Load the source picture
Browse, drop, or paste an image. The browser scales large files for a responsive workspace while preserving the pixel relationship used for sampling.
Private browser color sampler
Image Color Picker for HEX, RGB, and HSB
Drop, browse, or paste a picture, then click the area you want to inspect. Toon Tone turns the selected pixel into copy-ready HEX, RGB, and HSB values and lets you collect a small working palette.
Updated July 21, 2026
image color picker
What does this image color picker do?
This image color picker reads the red, green, blue, and alpha data at the exact pixel you select in a browser canvas. It reports the same visible pixel as six-digit HEX, RGB, and HSB, shows its source coordinates, and can save up to five sampled colors as a downloadable palette. Uploaded and pasted files stay inside the current browser tab; the tool does not send them to a Toon Tone server.
Pick an exact color from your picture
Pick an exact color from your picture
Use the sample artwork immediately or replace it with your own JPG, PNG, WebP, GIF, or other browser-readable image. Click or drag across the canvas to inspect pixels.
Processed locally — your picture is not uploaded
Drop a picture hereor choose a file from your device
You can also paste an image from your clipboard. · Browser-readable image · maximum 12 MBYour five-color palette
Your five-color palette
Save distinct picks, copy the complete palette, or export a labeled PNG.
Pick a color, then add it here. You can save up to five colors.
Image ready. Click any area to sample a pixel.
Processed locally — your picture is not uploaded
Your picture stays in this browser tab
The picker decodes the file with browser image APIs and reads pixels from a local canvas. There is no image upload endpoint, account, cloud library, or background save in this workflow. Closing or refreshing the tab clears the working image and palette.
- No server upload
- No account required
- Palette export is created on your device
How to pick a color from an image
A reliable sample begins with a clear source area and ends with a recorded code. The three-step workflow keeps the picture, pixel, and output connected.
2. Click the intended surface
Choose a flat interior area rather than an antialiased edge, highlight, shadow, or compression block. Use the magnified grid to confirm the exact pixel.
3. Copy or save the result
Copy HEX, RGB, or HSB for one pick, or add several meaningful samples to a five-color palette and download a labeled reference image.
Choose the color format that matches the next task
The formats describe the same sampled screen pixel, but each makes a different part of the workflow easier to read or edit.
| Format | Best for | What the tool reports |
|---|---|---|
| HEX | CSS tokens, design notes, quick sharing | Six-digit sRGB-style web code |
| RGB | Channel inspection and browser graphics | Red, green, and blue from 0 to 255 |
| HSB | Visual editing and Toon Tone practice | Hue 0–360°, saturation and brightness 0–100% |
Where an image color picker helps
Sampling is most useful when the source, target area, and intended use are stated clearly. These common workflows need slightly different choices.
Cartoon and illustration study
Sample a flat costume, fur, prop, or background area, save several related swatches, and inspect how hue, saturation, and brightness separate the palette. Treat screenshot values as study references rather than official franchise specifications.
Interface and design handoff
Read a pixel from a mockup or screenshot, copy its HEX value, and keep the original file beside the result. Verify the approved design token when exact brand or production fidelity matters.
Color-memory practice
Choose a color, hide the source, rebuild the impression with the HSB picker or Toon Tone controls, and compare the remembered value with the sampled result after committing a guess.
An exact pixel is not always the representative color
An image is a grid of pixels, so the picker can report the exact stored red, green, and blue values at one coordinate. That precision does not decide which coordinate best represents an object. A character shirt may contain a flat base color, a bright highlight, a dark shadow, an outline, and softened edge pixels. All are real pixels, yet only one may match the question you are trying to answer. State the target area first, then sample its broad, visually stable interior.
Take more than one reading when the surface includes texture, lighting, gradients, or compression. Save a small set of deliberate samples instead of clicking many random points. The five-color palette is designed for this short comparison: base, highlight, shadow, accent, and background are often more informative than one unsupported code. If you need a dominant average rather than a point sample, that is a different calculation and should be labeled as an extracted or averaged palette rather than an exact pixel.
Use the magnifier to avoid edges and blended pixels
Edges in digital artwork are frequently antialiased. The browser blends object and background colors across nearby pixels so a curve looks smooth at normal size. A click on that transition can produce a color that appears nowhere in the flat interior. The magnified grid shows the neighborhood around the pointer and marks the selected square, making it easier to move away from outlines, transparent fringes, text smoothing, and tiny highlights before saving a value.
Mouse and touch coordinates are translated back to the canvas pixel grid even when the displayed image is scaled to fit a phone or laptop. Keyboard users can focus the canvas and move the selection with arrow keys; holding Shift moves farther. The reported coordinates describe the decoded working image. If the browser reduced a very large source for responsive processing, keep the original file when a production workflow needs coordinates from its full native resolution.
Compression, transparency, and profiles can change a sample
JPEG compression can create small blocks or halos around high-contrast lines, so adjacent pixels may differ even where the artwork looks flat. PNG and WebP can include transparency, and a partially transparent pixel is normally composited against a background before viewers perceive it. This tool reports the decoded canvas appearance and displays the alpha value when it is below full opacity. Sample away from damaged edges and keep the source format noted when the result will be reused elsewhere.
Browser canvas works in a display-oriented color workflow. Embedded profiles, wide-gamut sources, operating-system color management, monitor calibration, brightness settings, and surrounding colors can all affect appearance. A code can be correct for the decoded pixel without proving that another device, print process, merchandise sample, or official design file uses the same color. For exact production decisions, return to the authoritative asset and its documented color space rather than treating a screenshot as a specification.
Continue from a sampled color
Image color picker questions
Does Toon Tone upload my image?
No. The selected or pasted image is decoded and sampled in the current browser tab. This page has no image upload endpoint, account library, or cloud save step.
Which image formats can I use?
You can use image formats your current browser can decode, commonly JPG, PNG, WebP, GIF, and several additional formats. The tool limits each file to 12 MB for a responsive local workspace.
Why does the color change when I click nearby?
Nearby pixels can contain antialiasing, shadows, highlights, texture, transparency, or compression artifacts. Use the magnifier and sample a stable interior area when you want a base color.
Are the reported HEX and RGB values exact?
They are exact for the decoded canvas pixel selected by the tool. They do not prove that a screenshot matches an original design file, another color profile, a calibrated display, print, paint, or merchandise.
Can I create a palette from one picture?
Yes. Add up to five distinct sampled colors, then copy their HEX, RGB, and HSB values or download a labeled PNG swatch reference.
Is HSB the same as HSL?
No. HSB is commonly equivalent to HSV, while HSL calculates its lightness axis differently. Keep the HEX or RGB value beside any converted percentages when moving between tools.