Hex as the Primary Output
The central design choice for this page is that the colour value you get first is the hexadecimal colour code — a six‑digit notation like #1E90FF that is the native format for CSS, HTML, and almost every design tool. Unlike the sibling tools that default to RGB functional notation or HSL, this page exists because hex is the most compact, web‑native form: no parentheses, no commas, no rgb() wrapper. You can paste it directly into color, background-color, border-color, or any property that accepts a colour.
A six‑digit hex code encodes red, green, and blue in two hexadecimal digits each (00 to FF), representing 0 to 255. There is no alpha channel in this representation. If a pixel in the image carries transparency, the hex code only describes the raw colour values of the pixel itself — the alpha is reported separately as a percentage (e.g. “Alpha 45% — this pixel is partly transparent.”). This is a deliberate split: hex on its own cannot express partial opacity, and the tool does not pretend it can. For workflows that need transparency embedded in the colour value, the sibling RGB page (which can output rgba()) or the HSL page should be used instead.
The three‑digit shorthand (e.g. #1E0) is not output by this tool; all hex values are six‑digit because that matches the precision of the underlying RGB pixel data read from the image. The tool reads the exact 8‑bit per channel values stored in the file, so each channel can be any of 256 levels, which maps directly to two hex digits.
How the Sampling Works
You provide a single image file — PNG, JPG, WebP, GIF, AVIF, or HEIC — through a file picker or by drag‑and‑drop. The tool validates MIME types (image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif). If the file is unsupported, you see “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” If the file cannot be decoded (corrupted or unknown format), the message is “That image could not be opened. It may be corrupted or in an unsupported format.”
Once loaded, the image is drawn onto a <canvas> element. If the longest side of the image exceeds 4096 pixels, the entire image is scaled down proportionally until the longest side is 4096 or less. This limit keeps the canvas manipulation fast and memory‑safe while preserving enough detail for most sampling tasks. The scaled dimensions are shown (e.g. “800 × 600”).
Immediately after loading, the tool samples the centre pixel of the image (coordinates rounded to integers) and displays its HEX, RGB, and HSL values. As you move the pointer over the image, the pixel under the cursor is sampled in real time. A magnified view (a zoomed circle or square, depending on implementation) helps you see individual pixels, which is critical when anti‑aliasing or compression has blurred edges.
Keyboard navigation is supported for accessibility and precision:
- Arrow keys move the sampling crosshair by 1 pixel in the corresponding direction.
- Shift + arrow key moves by 10 pixels.
- Enter or Space saves the current colour to the history (same as clicking).
The crosshair starts at the centre pixel; its coordinates update in the display.
Understanding the Output Values
The display area shows three colour representations for the current pixel:
| Notation | Example | Range |
|---|---|---|
| HEX | #1E90FF |
#000000 to #FFFFFF (six hex digits) |
| RGB | rgb(30,144,255) |
Red, Green, Blue each 0–255 |
| HSL | hsl(210,100%,56%) |
Hue 0°–360°, Saturation 0%–100%, Lightness 0%–100% |
Clicking any of these three values — the hex string, the RGB group, or the HSL group — copies that exact text to the clipboard. If the browser blocks the clipboard API (common in older browsers or restrictive HTTPS contexts), the tool shows “Could not copy — your browser blocked clipboard access.”
When the sampled pixel has an alpha channel less than 255 (i.e. partially transparent), a line appears below the values:
“Alpha ‹n›% — this pixel is partly transparent.”
The percentage is calculated as alpha / 255 × 100, rounded to an integer. For a fully opaque pixel, no alpha message is shown.
The tool reads the theoretical pixel value stored in the image — it does not composite the pixel against a background. A semi‑transparent pixel is reported as its own colour with its own alpha, not as the colour you would see if it were overlaid on white or black. This matters when sampling PNG images with transparency: the colour under the alpha blend is what you get, not the visually blended result.
Saving, History, and Clipboard
Clicking the image (or pressing Enter/Space) saves the currently sampled colour to a history list. Each save adds a small swatch and its hex code. The message “Saved #1E90FF to your picks.” appears.
- The history holds a maximum of 12 entries. When the 13th colour is saved, the oldest is removed from the display (FIFO behaviour).
- Colours with the same RGB values but different alpha levels are treated as separate entries. This ensures you can collect, say,
#FF0000at 50% opacity and#FF0000at 100% opacity — both are useful for design work even though the hex string is identical. - Clicking any swatch in the history loads that colour back into the main display: the hex, RGB, and HSL values appear as if you had just sampled that pixel. This lets you re‑examine a colour or copy its values again.
- The “Start over” button clears the current image, empties the history entirely, and resets the tool to its initial state (no image loaded, no colours).
The history is client‑side only — nothing is stored on a server, and all processing stays in your browser.
Edge Cases and Common Pitfalls
Compression artefacts (JPEG, screenshots)
JPEG is lossy: it discards detail to reduce file size. This means that what looks like a flat area of blue may actually contain dozens of slightly different blue pixels. The tool reads the exact pixel value, so two adjacent pixels in a JPEG can give different hex codes even if they appear identical to the eye. The same is true for screenshots when sub‑pixel anti‑aliasing has been applied. The magnifier helps you pick the pixel you intend, but you should be aware that the colour you sample is not necessarily the average or intended colour — it is the raw pixel value.
Transparency within the image
PNG and WebP support full alpha. If a pixel is semi‑transparent, the hex code you copy (e.g. #FF0000) does not carry any opacity information. You must manually apply an alpha value in your CSS (e.g. via rgba(255,0,0,0.3)) or use the HSL tool’s output if you need an hsla() value. The alpha percentage displayed is a separate piece of metadata — it is not part of the hex string.
Scaling large images
Images with a longest side over 4096 pixels are scaled down before sampling. This means the pixel you sample might correspond to an averaged or interpolated colour, not a real pixel from the original. If you need exact original pixel values, ensure your image is no larger than 4096 pixels on its longest side.
Unsupported formats or corrupted files
The tool will reject images with non‑standard MIME types or those that fail to decode. The error messages are specific: unsupported type or corrupted/invalid format.
Clipboard permission
If your browser environment disallows navigator.clipboard.writeText() (often due to insecure context, e.g. a local file:// page or mixed content), clicking a colour value will show the error message. In such cases you can still manually select and copy the text from the page.
FAQ
Can I get a hex code that includes alpha?
No. Standard six‑digit hex has no alpha channel. The tool reports transparency as a separate percentage. If you need an #RRGGBBAA or #RGBA hex, use the RGB output (which can be formatted as rgba()) or another tool designed for 8‑digit hex.
How many colours can I save in the history?
Up to 12. Each save adds a swatch; the oldest is removed when the limit is reached.
Does the tool modify my image?
Only if the image is too large — then it scales it down for display in the canvas. No pixel data is sent to any server. The entire operation is client‑side.
Why does the same colour in a JPEG give different hex values when I move the mouse?
JPEG compression causes slight variation between adjacent pixels. Even a single flat-colour area will show multiple nearly-identical hex codes due to compression noise. Use the magnifier and hover carefully, or consider using a lossless format like PNG if exact colour matching is critical.
What happens if I press arrow keys with no image loaded?
Nothing. Keyboard navigation is only active after an image has been loaded and is displayed in the canvas.
Can I use this tool on a file:// URL?
The tool runs entirely in the browser, so it works from a local HTML file as long as the browser allows file access. However, clipboard copying may be blocked in some browsers when the page is served over file://.