The picker reports the decoded pixel
A color picker can show an unexpected color beside a sharp JPEG edge because the JPEG decoder has already reconstructed that pixel from compressed image data. The picker reports the reconstructed pixel; it cannot recover the flat design color that existed before the JPEG export.
The imgrove Image Color Picker draws the decoded image on a canvas at its natural dimensions, maps your preview click back to one source coordinate, and reads that pixel. The HTML standard defines getImageData as returning pixels from a requested rectangle of the canvas output bitmap. [3] A scaled preview can make the edge look blended and make a one-pixel target harder to select, while the reported value still comes from one mapped canvas coordinate.
JPEG reconstructs a hard boundary from blocks
The DCT-based JPEG process groups component samples into 8 × 8 blocks, transforms each block into 64 coefficients, and quantizes those coefficients. The decoder reverses that path with dequantization and an inverse transform. [1] Quantization makes the process lossy, so the reconstructed samples can differ from the source.
A hard red-to-blue boundary contains a fast spatial change. Reconstructing that change from quantized coefficients can shift pixels beside the boundary. Encoder settings, quality, source colors, block alignment, and decoder behavior shape the exact result. Treat each sampled value as evidence about that file, rather than a universal JPEG constant.
Component sampling can spread color across the edge
JPEG defines horizontal and vertical sampling factors for each image component. [1] Many encoders store color-difference components at a lower spatial resolution than brightness, then a decoder upsamples them before producing RGB pixels. The JPEG Committee describes chroma upsampling and YCbCr-to-RGB conversion in the JFIF part of JPEG 1. [2]
That workflow can share color information across neighboring positions, so a red pixel beside blue can gain some blue and a blue pixel can gain some red. A JPEG may also use full-resolution components, because the standard supports multiple sampling factors. Check the decoded result instead of assuming that every file uses one fixed 4:2:0 layout.
A controlled edge test shows where values move
We created a 64 × 32 browser canvas with pure red in columns 0–31 and pure blue in columns 32–63. The PNG copy preserved both edge pixels. PNG defines lossless compression, which makes an original PNG a useful control for this test. [4] A JPEG exported by Headless Chrome 150 at quality 0.92 produced different values on both sides of the same boundary.
The red-side edge moved from RGB(255, 0, 0), #FF0000 to RGB(202, 12, 74), #CA0C4A. The blue-side edge moved from RGB(0, 0, 255), #0000FF to RGB(51, 0, 180), #3300B4. These numbers reproduce one encoder and decoder run. Repeat the method with your own export because a different image or encoder can produce different pixels.
Sample a stable flat color in four steps
Keep the original lossless file. Open that file and the JPEG export in separate picker sessions. Sample three or more neighboring pixels well inside the flat region, then sample the boundary columns for comparison. Use the repeated interior value for a design color and record the JPEG edge values only when you need to describe the rendered JPEG.
The JPEG format guide explains the broader compression tradeoff, while the PNG format guide covers lossless flat-color work. Converting an existing JPEG to PNG preserves its decoded pixels; it cannot restore the pre-compression values. Color profiles and display conversion form a separate color-management question, so keep them controlled when exact color matters.
Pixels from the controlled red-blue edge test
| Sample | PNG control | JPEG quality 0.92 |
|---|---|---|
| Red-side edge, x=31 | RGB(255, 0, 0) · #FF0000 | RGB(202, 12, 74) · #CA0C4A |
| Blue-side edge, x=32 | RGB(0, 0, 255) · #0000FF | RGB(51, 0, 180) · #3300B4 |
| What the value means | Lossless control pixel | Pixel from this decoded JPEG |
Use this test when
- A picked HEX value changes beside text, a logo, or a hard boundary
- You need to compare a lossless source with one JPEG export
- You want a repeatable interior-versus-edge sampling record
Use a separate check when
- A brand system already provides the authoritative design token
- A color profile or cross-display mismatch drives the visible change
- You need to recover source pixels that survived only in a lossy JPEG
Continue with the closest image guides
Related imgrove tools
Compare the center and edge of your JPEG
Open one image locally, sample a stable interior point and the nearest edge pixels, then compare their HEX, RGB, and HSL values. The picker reads decoded pixels and keeps the file in your browser. Use the feedback email below to send your test file, result, bug, or correction.
Try Image Color PickerTry the workflow and tell us what worked, what failed, or what needs clearer guidance: hi@imgrove.com.