Skip to content
Toolspire

Image Tools

Image Color Picker

Image Color Picker is part of Toolspire and is ready as soon as this page loads. Open a photo, screenshot or logo and click any pixel to get its colour code in HEX, RGB, HSL, HSV and CMYK — with a magnifier for exact pixels, the nearest colour name and the image’s main colour palette.

Runs in this tabFreeNo account

On this page

What you can do here

Pixel-exact

A zoomed loupe and arrow-key nudging land on exactly the pixel you want, even in fine details.

Every format

HEX, RGB, HSL, HSV, CMYK, a CSS name and a Tailwind class — copy whichever your project uses.

Instant palette

The main colours of the whole image, worked out automatically and sorted by how much space they take.

Accessible colours

See at once whether the colour is readable on white or on black, with WCAG contrast ratios.

Colour history

Every colour you pick is kept in a row of swatches, so you can compare and copy them all.

Private

Pixels are read in this tab — logos, designs and screenshots are not sent to us.

The sequence

How to pick a colour from an image

  1. 1

    Open the image

    Drop a photo, screenshot or logo on the page, browse for it, or paste a screenshot with Ctrl+V.

  2. 2

    Aim with the magnifier

    Move over the image to see the pixels up close. On a phone, drag your finger and lift it to pick.

  3. 3

    Click to pick

    Click the pixel you want. Its HEX, RGB, HSL, HSV and CMYK codes appear on the right.

  4. 4

    Copy the code

    Press the copy button next to any format, or use the palette and history to copy several colours at once.

Worth knowing

  • Image Color Picker on Toolspire: click any pixel to get its colour as HEX, RGB, HSL, HSV and CMYK, each with a copy button — transparent pixels also give RGBA and 8-digit HEX.
  • A magnifier shows the 11 × 11 pixels around the pointer; sample a single pixel or the average of 3×3, 5×5 or 9×9 pixels to smooth out noise.
  • Shows the nearest CSS colour name and the closest Tailwind CSS colour, matched with the CIEDE2000 colour-difference formula.
  • Builds the image’s colour palette — its 5, 8 or 12 main colours with how much of the image each covers — ready to copy as a HEX list or CSS variables.
  • Checks contrast against white and black text (WCAG ratio and AA/AAA level). In Chrome and Edge on a computer you can also pick a colour from anywhere on your screen.
  • Works with JPG, PNG, WebP, HEIC and pasted screenshots. The image never leaves your browser.

Colour code formats explained

FormatExampleUsed for
HEX#1E90FFWebsites (HTML and CSS), design apps, brand guides
RGBrgb(30, 144, 255)CSS, screens, video and most software
HSLhsl(210, 100%, 56%)CSS — easy to make lighter, darker or less saturated versions
HSV / HSBhsv(210, 88%, 100%)Colour pickers in Photoshop, Figma and other design tools
CMYKcmyk(88%, 44%, 0%, 0%)A starting point for print — check final print colours with your printer

Tips for accurate colours

  • Use a PNG or a high-quality original where you can: JPG compression and resizing blend neighbouring pixels.
  • In photos, average 3×3 or 5×5 pixels — single pixels vary because of noise and texture.
  • Pick from flat areas of a logo, not its edges, where colours blend into the background.
  • Screenshots show colours as your screen displays them, which may differ slightly from the original design file.

FAQ

Questions about Image Color Picker

Where does Image Color Picker run?

Image Color Picker runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

How do I find the HEX code of a colour in an image?

Open the image here and click the colour. The HEX code (such as #1E90FF) appears at the top of the list with a copy button, together with RGB, HSL, HSV and CMYK.

Is my image uploaded?

No. The image is opened and read entirely in this tab, so it never leaves your device.

Can I pick a colour from my screen, outside the image?

Yes, in Chrome, Edge and other Chromium browsers on a computer: press Pick from screen and click anywhere. Other browsers don’t offer this yet — take a screenshot and paste it instead.

How is the colour palette made?

The tool groups similar pixels together (k-means clustering in the CIELAB colour space, which matches how people see colour differences) and shows each group’s average colour, largest first.

Why does the colour look slightly different from my design file?

JPG compression, resizing and screen colour profiles all shift colours a little. For brand colours, pick from the original PNG or SVG export, or average a few pixels.

What does the contrast ratio mean?

It is the WCAG measure of how readable text is: at least 4.5:1 for normal text (AA) and 7:1 for AAA. The two cards show the picked colour as text on white and on black.

Keep going

Related tools

Crop ImageNewCrop Image on Toolspire. Crop images online to any size or ratio: 1:1, 16:9, Instagram and YouTube sizes, circle crop, rotate, flip and straighten. Free.Image ToolsImage to Grayscale ConverterNewImage to Grayscale Converter on Toolspire: Convert images to grayscale or black and white online: pick the method, adjust contrast, add sepia.Image ToolsCSS to Tailwind ConverterNewCSS to Tailwind Converter on Toolspire. Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants.Developer ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsImage CompressorPopularImage Compressor on Toolspire: Compress JPG, PNG, WebP and AVIF images on your device. Shrink photos by up to 90% or hit an exact KB target.Image ToolsImage ResizerNewResize JPG, PNG and WebP images by pixels, percentage or social media presets. Crop to fill or fit, batch resize and download a ZIP — without uploading needed.Image Tools

Open the full directory

Last updated Report a problem or suggest a feature