Image Color Picker

About Image Colour Picker

Load a screenshot, a photograph or a design mock-up, move the pointer over it and read the colour under the pixel; click to keep it. The colour then comes back as hex, RGB, HSL, HSV and CMYK, with its luminance and its contrast against white and black — everything you need to use it rather than merely admire it.

The picture is drawn on a canvas in this tab and read pixel by pixel from there. Nothing is uploaded, which matters when the screenshot is of something internal.

Alongside the image sit the colours the picture is mostly made of, worked out by binning every pixel into a coarse cube and keeping the busiest bins that are not near-duplicates of each other. That is usually the quickest way to lift a palette out of a brand asset — one click per swatch, no squinting at edges.

Where it helps

• Reads the true pixel value rather than an eye's guess at it, which is where hand-matched colours go wrong.
• Offers the picture's dominant colours as swatches, so a palette is a few clicks rather than a hunt.
• Gives every notation at once — hex, RGB, HSL, HSV, CMYK — plus luminance and contrast against black and white.
• Runs entirely in the browser, so an internal screenshot is never uploaded anywhere.

Limits

• It reads what the file contains: a JPEG that has been compressed hard will have shifted the colour slightly before you ever see it.
• Colour profiles are not applied, so a photograph tagged with a wide-gamut profile can read differently here than in a colour-managed editor.
• Large pictures are scaled to 1600 pixels on the long edge before sampling, which averages neighbouring pixels at the very finest detail.
• A colour lifted from a gradient or a shadow is one point on it, not the whole thing.

Frequently asked questions

Is my picture uploaded anywhere?

No. It is read straight from disk into a canvas in this tab, and the pixels never leave your browser.

Can I pick from anywhere on screen rather than from a file?

Not from this page — a web page cannot read pixels outside itself. Take a screenshot and drop it in, which is the same two keystrokes on both macOS and Windows.

Why does the colour differ slightly from my design tool?

Usually a colour profile: this reads the raw pixel values without applying an embedded profile, while a colour-managed editor converts them for your display first. A PNG exported in sRGB will match.

How are the suggested colours chosen?

Every pixel is binned into a coarse colour cube, the busiest bins win, and any winner too close to one already chosen is skipped so the eight swatches are eight genuinely different colours.

Related tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Palette Generator — Harmonious colour schemes from a base colour
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it