CDRN

Pick a pixel color from an image

  • Dashboard
  • Documentation
  • API
gets the exact color of a pixel from your image (RGB, HSL, hexadecimal) by clicking the spot of your choice

What is an image colour picker?

A colour picker (also known as an eyedropper or colour capture tool) returns the exact value of a pixel chosen on an image. You load a photo, click on the point you are interested in, and the tool returns the precise colour as HEX, RGB and HSL. It is the web equivalent of the eyedropper in design software like Photoshop, GIMP or Figma.

Our tool works directly in your browser. You upload your image, it displays on the page, and you just click on a pixel to grab its colour. Reading the pixel happens client-side via the canvas API, with no server round-trip, no recompression and no image upload to the network for the selection.

Difference with a colour extractor

Our colour extractor and our colour picker meet two distinct needs that are worth distinguishing:

  • The extractor analyses the whole image and returns the dominant palette (the 5, 8 or 10 most represented hues). It is the tool of choice to summarise the chromatic mood of a photo, build a mood board or feed a brand identity.
  • The colour picker returns the exact colour of a specific pixel you point at. It is the tool of choice when you know where to look: a logo in a capture, a specific shade in a gradient, a reference wallpaper.

The extractor works on millions of pixels and applies clustering to bring out groups of colours; the picker simply reads the RGB value stored at the position you click. The first generalises, the second is surgical.

How it works, technically

A digital image is a grid of pixels, each pixel carrying three RGB channels (red, green, blue) usually encoded on 8 bits, that is 256 values per channel. When you click on a point, the tool:

  1. Draws your image in a canvas element, keeping its native dimensions (with a cap of 1500 pixels wide to stay comfortable on screen).
  2. Converts the click position into native image coordinates, compensating for the browser's display resizing.
  3. Reads the pixel's RGBA value via the canvas.getContext('2d').getImageData(x, y, 1, 1) API.
  4. Shows a preview of the picked colour. On submit, the server reads the same position with PHP GD and computes the final HEX, RGB and HSL codes.

The HSL value is computed by our colour conversion service, the same one used by our colour converter. End-to-end consistency: you get the same values as if you had typed the HEX code into the converter.

Typical use cases

  • Reproduce a colour from a screenshot: you have a screenshot of a site, you want to reuse the exact shade of a button or a background. The picker gives you the precise HEX code to paste into your CSS.
  • Identify a brand colour on a photo: a presentation PDF, a magazine page, a product visual. No need to ask for the brand guide, you read the colour directly.
  • Reverse engineering a visual identity: capture the exact blue of a logo, the pink of a banner, the orange of a call to action.
  • Design inspiration and watch: you see a photo you like, you grab the exact hue of a flower, a wall, a poster.
  • Front-end debugging: a bug screenshot shows the wrong colour, you read the actual value to compare with the one expected in the mockup.
  • Building a palette from a reference: pick several points on a single image to rebuild a custom palette.

How to use the colour picker

  1. Upload your image (PNG, JPG, GIF, BMP, WebP, up to 20 MB).
  2. A preview shows up on the page. Click on a pixel to grab its colour.
  3. A crosshair marks the clicked position and a colour preview appears next to it.
  4. Confirm with the submit button to get the final result: coloured square, HEX, RGB and HSL codes.
  5. To convert the value between formats, use our colour converter.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

They are three representations of the same colour. HEX (#ff0000) is the most-used format in CSS. RGB expresses the three red / green / blue channels as 0-255 values. HSL (Hue, Saturation, Lightness) is more intuitive to adjust a hue: it is the format to prefer when you want to darken, desaturate or modify a colour without changing the base hue.

Why does my click not return exactly the expected colour?

On a gradient zone, two neighbouring pixels can have very different values. Also, JPG images are lossy-compressed: a pixel's colour can differ slightly from the original. For reliable colour codes, prefer PNGs or non-recompressed images.

Are my coordinates those of the screen or of the image?

Those of the original image. Our JavaScript automatically converts the click position (in screen pixels) to the position in the native image. If your image is 4000x3000 and displayed at 800x600, a click in the centre returns (2000, 1500), not (400, 300).

Does the picker work with transparent images?

Yes. If you click on a transparent pixel, you get the RGB colour stored at that location (often white or black depending on the original editor). Transparency itself (the alpha channel) is not returned in the result; to analyse an alpha channel, open the image in a graphic editor.

What image size is accepted?

Up to 20 MB, in PNG, JPG, GIF, BMP and WebP formats. Very large images are displayed at a 1500 pixel maximum width to stay comfortable on screen, but the read colour remains that of the original pixel, with no resampling.

Are my images stored on the server?

No. Selection happens in your browser. On submission, the file is processed on the fly to confirm the requested pixel's colour, then the temporary file is deleted. No image is kept, indexed or shared.

What happens if JavaScript is disabled?

The classic form submission still works. The x and y coordinates are stored in hidden fields that JavaScript fills on click. Without JavaScript, those fields stay empty and the form reports a missing position, but the image itself is still sent to the server for processing.

Example request

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Input schema

Field Type Required Default
image file ✓ –
x string – –
y string – –

this tool expects a file - use Content-Type multipart/form-data instead of application/json

Endpoints

  • GET https://cdrn.fr/api/v1/tools - lists every available tool
  • GET https://cdrn.fr/api/v1/tools/color-picker - returns the schema for this tool
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - runs this tool with a JSON payload