Image Color Picker

Image Color Picker is a free online tool that lets you extract precise colour values from any image. Upload a photo, graphic, or screenshot, hover over any part of the image, and the tool instantly shows you the exact colour at your cursor position in HEX, RGB, and HSL formats. Click to lock and copy any value with a single click. No design software required — get exact colour codes from any image directly in your browser.

Matching colours exactly is one of the most important tasks in design and web development. When building a website or application that incorporates a brand's logo or photography, you need the exact hex codes used in the imagery to maintain consistency across all digital touchpoints. Eyeballing colours or using rough approximations leads to subtle mismatches that are immediately visible to designers and brand-conscious stakeholders. An image colour picker eliminates guesswork and provides precise, verifiable colour values in seconds.

Our tool provides colour values in three formats simultaneously. HEX (hexadecimal) is the most widely used format in web development — CSS and HTML use hex codes like #FF5733. It is a compact 6-character representation of red, green, and blue channel values in base 16. RGB (Red, Green, Blue) expresses the same colour as three decimal numbers from 0 to 255, such as rgb(255, 87, 51) — intuitive for developers who think in terms of colour channels and needed for many design tool colour inputs. HSL (Hue, Saturation, Lightness) represents colour as a hue angle (0–360°), a saturation percentage, and a lightness percentage — easier for designers to reason about when adjusting colour relationships, since changing lightness makes a colour brighter or darker without altering its hue.

Web developers use Image Colour Picker to extract brand colours from logo files, marketing assets, and design mockups for use in CSS stylesheets. Graphic designers match colours from reference images when creating brand-consistent assets. UI/UX designers ensure that UI components like buttons, icons, and backgrounds precisely match colours in the design system. Social media managers extract colours from template graphics to maintain brand consistency across posts. Interior designers and product photographers reference colour values from fabric, paint, and material swatches to communicate precise specifications.

Brand consistency depends on exact colour reproducibility. Major brands define their colours precisely — Coca-Cola red is #F40009, Spotify green is #1DB954, Facebook blue is #1877F2 — and deviation from these values is immediately noticeable to anyone familiar with the brand. When you receive design assets from a client and need to implement them in code, Image Colour Picker lets you extract every exact colour without asking the designer for a spec sheet. You can also use it to build a complete colour palette from a reference photograph or artwork, identifying the dominant and accent colours for use in a design system or brand guideline document.

Colour contrast checking for WCAG accessibility compliance requires knowing the exact HEX values of text and background colours. Extract colours from an existing design or screenshot using Image Colour Picker, then verify them in the Colour Contrast Checker to ensure sufficient contrast for users with visual impairments. WCAG AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. Identifying and correcting insufficient contrast early in the design process saves significant rework during accessibility audits.

Image Colour Picker uses the HTML5 Canvas API. When you upload an image it is drawn onto an off-screen canvas element. As you move your cursor over the image preview, the tool calls the canvas context's getImageData() method at the cursor position to retrieve the RGBA values of the exact pixel underneath. These raw values are converted to HEX, RGB, and HSL representations in real time. Clicking locks the current colour so you can copy the values. All processing is entirely client-side — no images are uploaded to any server.