Image Color Picker

Pixel-Perfect Colour Sampling - Four Formats Instantly

Design tools, CSS code, print workflows and brand guidelines each use a different colour format. A web developer needs HEX. A CSS author might prefer HSL for its human-readable saturation and lightness values. A print designer needs CMYK. A developer working with canvas or WebGL needs RGB. This tool gives you all four from a single click on your image - no manual conversion, no colour picker wheel hunting, no calculator. Click any pixel and HEX, RGB, HSL and CMYK values appear instantly with individual Copy buttons for each.

How the Image Colour Picker Works

The tool renders your uploaded image onto an HTML5 canvas scaled to fit the screen. When you click, it reads the exact RGBA pixel data at that coordinate using getImageData(x, y, 1, 1) - a single-pixel sample at the precise point your cursor was positioned. The hover preview shows the colour under your cursor in real time as you move across the image, so you can identify the right pixel before committing a click. The canvas scales the image display to fit the container but maps clicks back to the original coordinate space, so the sampled colour is always from the source image's actual pixel data regardless of display zoom level.

Picking Colours from Photographs for Design Work

Sampling colours from photographs is one of the most common starting points for brand colour palettes, illustration colour schemes and UI design systems. A photo of a landscape gives you natural earthy tones; a product photo gives you the exact colour of the product under its studio lighting. The 20-colour palette history panel stores every colour you sample in the session - click any swatch to restore it as the active colour and copy any of its format values. This makes it straightforward to build a 5 - 8 colour palette from a reference image by sampling different areas and accumulating the results.

The Colour Wheel Tab - Direct Colour Exploration

The Color Wheel tab opens the browser's native colour picker - a full hue, saturation and lightness wheel with a hex input field. This is useful when you want to explore a colour space directly rather than sample from an image, or when you have a specific hex value you want to convert to RGB, HSL or CMYK without uploading anything. Enter the hex value and all four format values update immediately. The colour preview swatch shows the colour at a large size so you can evaluate it accurately before copying.

HEX, RGB, HSL and CMYK - When Each Format Is Right

HEX (#7c3aed) is the standard for web CSS and most design tool colour pickers - universally understood and compact. RGB (rgb(124, 58, 237)) is used in CSS, canvas drawing APIs, WebGL shaders and any programmatic colour manipulation. HSL (hsl(263, 83%, 58%)) is the most human-readable for CSS - adjusting the L value lightens or darkens the colour predictably, making it ideal for building tint/shade scales for a design system. CMYK is the format required for print workflows - offset printing, digital print services and packaging specifications all specify colour in CMYK. Note that browser-rendered CMYK values are an approximation converted from the screen RGB space; for colour-critical print work, a calibrated colour management workflow in professional software is required.

Practical Workflows That Start With Colour Sampling

Screenshot a website you admire, upload it here, and sample its primary, secondary and accent colours to understand the palette. Upload a brand logo to extract the exact brand colours for use in a complementary design. Sample the dominant colours from a product photo to build a landing page colour scheme that harmonises with the product imagery. Use the palette history to capture 6 - 8 colours from a single image, then export the HEX values to use in a CSS custom property definition. For further colour work on the extracted palette - adjusting saturation, building tint scales - tools like Figma's colour styles or CSS custom properties accept the HSL format directly, making it easy to programmatically generate a full shade range from a sampled base colour.

✓Verified by ToollyX Team · Last updated June 2026