Color Picker & Converter

Color Picker — Get the Exact Color Value From Any Image

You're looking at an image — a logo, a photo, a screenshot — and you need to know the exact colour of something in it. Not "that's a kind of dusty blue-green", but the precise hex code. Maybe it's a brand colour you need to match in CSS. Maybe it's a paint colour you want to identify. Maybe you're trying to match the exact shade of grey in a design and need the RGB values. This tool gives you the precise answer: click any pixel in any image and get the exact colour value at that point.

It works on any image you can upload or paste — screenshots, photographs, logo files, UI mockups, artwork. The colour picker shows the hex code, RGB value, and HSL value for wherever you click or hover. A colour history records your last ten picks so you don't lose values as you move around the image.

How to Use It

Upload your image using the file picker or paste it from clipboard. The image appears on the interactive canvas. Hover over any part of the image to see a live preview of the colour under your cursor, along with its hex, RGB, and HSL values. Click to lock that colour and add it to your history. The hex code is displayed in a format you can copy directly and paste into any design or code tool.

The colour history at the bottom shows your last picked colours as swatches. Click any swatch to bring back that colour's values. This is useful when you're sampling multiple colours from the same image and want to compare or use several of them.

Common Use Cases

Matching brand colours in code: You have a logo or brand image and need the exact hex code to use in CSS, React styles, or a design system. Click the colour you need in the image and copy the hex value directly. Far faster than opening Photoshop, loading the image as a new file, and using the eyedropper.

Identifying paint or product colours: Upload a photo of a paint chip, a fabric swatch, or a product in a specific colour and get the closest representable hex value. While the tool can't directly map to a manufacturer's paint code, having the RGB or hex value is useful for comparing to paint colour databases or ordering matching materials.

Matching colours across design files: If you received a design mockup as a flat image rather than a source file, use the colour picker to extract the exact values of elements — backgrounds, text, borders, icons — and replicate them in your code or design tool.

Colour correction reference: When colour-grading a photo in Lightroom or Photoshop, using the colour picker to check what values specific tones are at — before and after editing — gives you measurable reference points rather than working purely by eye.

Web accessibility checks: Pick the foreground and background colour from a screenshot of a UI and check the contrast ratio between them. This is a quick way to spot potential accessibility issues without access to the design source file.

Understanding Colour Formats

The tool shows you the same colour in three formats: Hex (e.g., #3B82F6) — the most common format in web development and design tools. RGB (e.g., 59, 130, 246) — the raw red, green, blue channel values, used in CSS, Figma, and most design applications. HSL (e.g., 217°, 91%, 60%) — hue, saturation, lightness, which is useful for understanding the colour's relationship to other tones and for making relative adjustments.

All three represent the same colour — use whichever format the tool you're working in requires.

Tips for Accurate Picking

JPEG images use lossy compression that can introduce colour artefacts near edges and in areas of subtle gradient. If you're trying to pick the exact colour of a logo element from a JPEG, you may get slightly different values depending on exactly which pixel you click. For precise brand colour identification, use a PNG or SVG version of the logo if available — they don't have JPEG compression artefacts.

Screen-captured images may not perfectly represent colours due to monitor colour profiles and display settings. If colour accuracy is critical (for print production or physical matching), work from the original design file rather than a screenshot.

Privacy and Limitations

Images are processed entirely in your browser. Nothing is uploaded. The tool gives you the exact pixel value at the point you click — colours are screen-colour values (sRGB) rather than print colour values (CMYK or Pantone). For print work, use the RGB values as a reference and convert to CMYK through your print software. Very small images may be difficult to click precisely on mobile — zooming in helps.