{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Privacy:Browser only Point:x {{ cursorX }}, y {{ cursorY }} Next sample:{{ sampleMethodLabel }}
Drop one image, browse from this device, or restore the built-in color sample.
{{ sourceFile ? sourceFile.name : 'Drop image here' }}
{{ sourceMeta || 'PNG, JPEG, or WebP' }}

Ignored {{ ignoredFileCount }} extra {{ ignoredFileCount === 1 ? 'file' : 'files' }}. This tool samples one image at a time.

{{ workflowMessage }}

The selected policy applies to the next point you add.
Pick source pixels

Click the image to add a point. With keyboard focus, use arrow keys to move and Enter or Space to add.

{{ sourceWidth }} × {{ sourceHeight }} px
x
Preserve is neutral. The selected treatment applies to the next point.
Automatic is neutral. The selected syntax applies to the next CSS token.
{{ row.name }}{{ row.css }}{{ row.coordinate }} · {{ row.policy }}
{{ computation.values.artifact_text }}

The chart renderer is unavailable. Channel values remain available in the sampling ledger.

SampleCoordinateAreaCSS colorRGBA channelsCopy
{{ row.name }}{{ row.coordinate }}{{ row.policy }}{{ row.css }}{{ row.channels }}
Color Palette Generator Generate a seeded HEX palette with fixed harmony rules, black-or-white text choices, and WCAG contrast checks for every color pair.
Image Format Converter Convert one image locally with format, resize, crop, quality, and transparency controls while checking the actual output and byte size.
Photo Print Resolution Calculator Check whether a photo has enough usable pixels for a chosen print size and framing choice, with crop reserve and practical PPI guidance.
Image to Base64 Encoder Turn an image into Base64 or a Data URI in your browser, preserve the original bytes or optimize the image, and judge whether inline use fits.

A color that looks uniform at normal size may contain many different pixel values. Compression, antialiasing, a soft shadow, camera noise, and transparency can all change the red, green, blue, or alpha channel from one coordinate to the next. Picking a color therefore begins with a choice between measuring one pixel and summarizing a small neighborhood.

Single-pixel sampling is useful for hard-edged artwork, interface screenshots, and checking a known coordinate. A local mean is calmer when nearby pixels vary slightly, but one bright or dark outlier can pull the average. A median resists isolated outliers and often gives a more representative channel value around noisy edges or textured photographs.

Sampling choice Best fit Main caution
Single pixel Exact coordinates and flat digital artwork One edge or compression artifact can dominate the result.
3 × 3 mean Small variations around a chosen point Blends all included pixels, including an outlier.
5 × 5 mean Broader smoothing over texture or noise Can mix neighboring objects or colors near an edge.
5 × 5 median Noisy patches with a few unusual pixels Each channel is selected independently, so the result need not match one original pixel.

Transparency adds another decision. Preserved alpha describes the stored color and opacity. Compositing on white describes how that translucent pixel appears over a white background. Those are different questions, and the white-composited result cannot be used to recover the original transparent color.

Pixel values are useful for CSS tokens, palette checks, and repeatable image inspection, but they are not a full color-management measurement. Browser decoding places the sample in an 8-bit sRGB canvas. Embedded profiles, wide-gamut originals, display calibration, surrounding colors, and human perception can make the same numeric token look different elsewhere.

How to Use This Tool:

Choose the sampling rule before adding a point because each saved swatch records the rule in effect at that moment.

  1. Drop or browse for one PNG, JPEG, or WebP image, or keep the built-in sample. Files may be up to 8 MB, 8,192 pixels on either side, and 16.8 megapixels.
  2. Select Sampling method. Use Single pixel for an exact coordinate, a mean for smoothing, or the median when isolated channel values should have less influence.
  3. Click the image, move the keyboard cursor, or enter the integer x and y coordinate. Areas at an image edge are clipped to the pixels that exist, so a 5 × 5 request may record a smaller area.
  4. Choose Transparency treatment and CSS notation, then add the current point. These choices affect the next swatch rather than rewriting earlier samples.
  5. Compare the saved coordinate, sampled area, CSS color, and RGBA channels. Restart the sample set after 12 points or when moving to a different comparison.

Interpreting Results:

The coordinate and sampled area are part of the result. Two identical CSS tokens are comparable only when they came from the same image decoding, coordinate convention, sampling method, and transparency treatment. Near an edge, also check whether the requested square was clipped.

  • Source RGBA keeps the sampled alpha and reports the channel aggregate before a white background is applied.
  • Output RGBA matches the selected transparency treatment. White compositing makes alpha fully opaque.
  • CSS color is a serialization of the output channels. It does not prove that the color will look identical on another display or background.

Technical Details:

Sampling reads 8-bit sRGB red, green, blue, and alpha channels from the decoded canvas. The chosen coordinate is the center of a square neighborhood. At the image boundary, the square is intersected with the valid pixel rectangle before aggregation.

Formula Core:

For a mean sample, each channel is averaged separately and rounded to the nearest integer from 0 to 255.

Cmean = round ( ∑i=1nCi n )

White compositing is applied to each source pixel before the area is summarized. For a red, green, or blue channel C and 8-bit alpha A, the opaque white result is:

Cwhite = round ( CA+255(255−A) 255 )

Transformation Core:

Stage Exact rule
Median Sort each channel independently. Use the middle value, or round the mean of the two middle values when the clipped area contains an even number of pixels.
HEX / HEXA Write two uppercase hexadecimal digits per RGB channel; append two alpha digits when alpha is below 255.
RGBA Keep RGB as integers and serialize alpha as alpha ÷ 255 rounded to three decimal places, without unnecessary trailing zeroes.
Automatic notation Use six-digit HEX for an opaque result and RGBA for a result whose alpha is below 255.

A sample set accepts up to 12 coordinate-linked results. Changing a policy affects only later additions, which preserves the evidence attached to earlier swatches.

Privacy Notes:

The selected image is decoded and sampled in the browser; it is not uploaded for processing. Treat downloaded tokens and ledgers as derived image data, since coordinates and colors may still reveal details about the source.

References: