Image Color Picker

How do I pick a color and verify the result?

Choose an image, leave Sample size at 1×1 (single pixel), and click inside the area you want to measure. The resulting card gives you copyable color codes rather than a visual guess. For a reproducible example, open a PNG with an opaque patch whose RGB channels are 255, 0 and 0. Click well inside that patch, away from any softened edge.

Card value	Result for the red patch
HEX	#ff0000
RGB	rgb(255, 0, 0)
HSL	hsl(0, 100%, 50%)
CMYK	cmyk(0%, 100%, 100%, 0%)

Area averaging changes the question from “which pixel?” to “what is the mean color here?” Suppose a 3×3 square contains eight pixels at RGB (100, 150, 200) and one at (109, 159, 209). The sums are 909, 1359 and 1809; dividing each by nine yields RGB (101, 151, 201), or #6597c9. A single-pixel click on the outlier would instead return its own channels. This is an arithmetic RGB average, not a dominant-color calculation.

How do you sample a screenshot or design mockup?

Use the original screenshot file rather than a resized preview pasted into another document. For a button fill or flat panel, pick an interior pixel away from borders, shadows and text. The edge of a letter includes anti-aliasing pixels blended with its background, so a click there often returns a transition color rather than the intended text color.

Compare several interior locations before treating a result as a design token. A gradient or textured surface has no single uniform value to recover. Keep separate swatches for the background, accent and text, then test the actual combinations before implementing them. A screenshot records rendered pixels; the source stylesheet remains the better reference when available.

When should you pick manually rather than extract a palette?

Manual selection answers a location-specific question, such as the color of a small icon that occupies little of an image. Automatic extraction summarizes colors across an image and may prioritize large regions instead. Use manual picks for deliberate brand references; use extraction when exploring a photograph's overall color distribution.

This file-based workflow also works with captures from application windows or exported mockups without installing a browser extension. It samples the supplied bitmap, not the live page beneath your cursor. Capture the relevant screen first when that is your source. Keep the image and exported palette together if you need to trace where a candidate came from later.

Which sample size should I use for photos and screenshots?

The choices are 1×1, 3×3, 5×5 and 11×11: respectively one, nine, 25 and 121 pixels when the entire square fits inside the image. Start with one pixel for a flat background or a crisp icon. Use a larger square for a textured surface or small local variations in a photograph. Averaging across an object boundary mixes both sides, so keep the square inside the intended region.

The square is centered on the selected source coordinate and clipped at image boundaries. At the top-left corner, a 3×3 selection covers only a 2×2 area, giving four pixels equal weight. Each channel's mean is rounded with Math.round(). The calculation does not weight pixels by opacity or linearize the RGB channels before averaging.

How do magnification, zoom and touch selection work?

The magnifier draws a 15×15 source region into a 120×120 lens with image smoothing disabled, giving 8x enlargement. An outline indicates the selected averaging area. Near the image boundary the lens view shifts to stay within the source; its central crosshair should not be treated as a coordinate ruler at those edges.

Image zoom is separate from lens magnification. Its steps are 100%, 150%, 200%, 300% and 400%; at enlarged sizes you can drag to pan. Touch controls support previewing, tapping to pick and pinch zoom. Pointer coordinates are mapped back to canvas coordinates before sampling, so enlarging the displayed image does not change the sampling square's size in source pixels.

What do the color formats and nearest name mean?

Each saved card offers HEX, RGB, HSL, OKLCH and CMYK copy controls. HEX and RGB express the sampled integer channels directly. HSL hue, saturation and lightness are rounded to whole numbers. OKLCH output rounds lightness to a whole percentage and chroma to two decimal places; very low chroma uses a hue of zero. These formatted conversions are rounded representations, so retain HEX or RGB when you need the original sampled channels.

The nearest CSS color name uses redmean weighted RGB distance. It is a descriptive match, not a replacement for the sampled code: a nearby named color need not have identical channels. CMYK comes from an RGB conversion without a printer profile, so treat it as a numerical reference rather than a print proof. Open a swatch in Color Converter for further conversion work.

How can I build and reuse a palette across images?

New unique picks appear first in Picked Colors; duplicate HEX values are ignored. The palette holds 16 entries. When full, a new color replaces the last unlocked entry in the displayed order. Reordering therefore changes which unlocked color is replaced next. If all entries are locked, further picks leave the palette unchanged.

Use Lock color before Change image to carry selected swatches into another image. Locks prevent removal until you unlock the card, but do not prevent reordering or export. State lives in the current page session, so download before reloading. For a summary of an entire photograph rather than manually selected locations, use Image Palette Extractor.

How do contrast checks and palette exports help in a stylesheet?

Cards show contrast against white and black using the WCAG 2.2 relative-luminance calculation. The badges use normal-text thresholds: AA requires 4.5:1 and AAA requires 7:1. Ratios display two decimal places, while pass decisions use the unrounded result. These two background checks do not certify your actual layout. Use Contrast Checker to test the foreground and background you intend to combine.

Copy all HEX copies one value per line. CSS creates colors.css with a :root block numbered --color-1, --color-2 and onward; SCSS creates corresponding dollar-prefixed variables. Tailwind produces a JavaScript configuration snippet under theme.extend.colors, not a stylesheet. JSON exports hex, rgb, hsl, oklch and name, excluding CMYK and locks. Every format follows the current card order, and downloads are generated locally.

What happens with transparent images or unexpected colors?

The source canvas is drawn without a white fill. Sampling reads RGBA bytes but ignores alpha, and the exported colors do not preserve transparency. A transparent image's appearance against the page background therefore need not match its picked RGB code. Flatten onto the intended background before importing when the composite appearance is what you need to measure.

The tool measures the bitmap decoded by your browser, not the original physical scene or a screen-wide eyedropper reading. Compressed images, softened edges and different neighboring pixels can yield different picks. It does not recover an original design token from a screenshot or manage printer profiles. Prefer an opaque interior region when checking a flat design color.

Which files can I open, and where does processing happen?

The upload interface lists PNG, JPG, WebP, AVIF, SVG and BMP and accepts image files. Successful loading depends on browser decoding. It reads only the first supplied file and draws the decoded image at its natural dimensions; the page does not set a megabyte or pixel-count limit. Large decoded images still consume browser memory, so a smaller source can be more practical.

Open a local file, drag it into the upload area or paste a clipboard image while that area is visible. Pasting a text URL does not load an image. The file is read with FileReader into a local image and canvas, and exports use generated Blobs. The picker has no image-upload request; choosing a file does not send its bytes to a server.