Free browser-based utility

Color Picker: Pick Colors from an Image

Pick a colour from your own image or from the colour field, then copy it as HEX, RGB, HSL or HSV. Paste a colour code in any of these formats to read it in the others.

Processed locally — your image stays on your device.

Choose a colour

Drag in the colour field, type or paste a value, or pick from an image in step 2.

Colour field

Hue

Opacity

Colour values

HEX

RGB

HSL

HSV (not CSS)

Alpha

Pick from an image

PNG, JPEG, WebP, GIF, BMP, TIFF, SVG, AVIF, HEIC or ICO

Drag & drop your image here or You can also paste an image from your clipboard.

A picked colour is the pixel as your browser shows it on a standard (sRGB) screen. What this means.

Palette

Collect colours while you work. The palette is kept only while this page is open.

No colours yet.

The palette is not saved. It clears when you close or reload this page, and nothing about it is stored on your device or sent anywhere.

How to pick a colour from an image

Open your image in step 2: browse, drag it in, or paste it.
Move over the image to see the magnified pixels, then click or tap the pixel you want.
Copy the colour as HEX, RGB or HSL for CSS, or as HSV for a design program.
Select Add current colour to collect several colours, then copy the palette.

HEX, RGB, HSL and HSV explained

Format	Example	What it means
HEX	`#1e90ff`	Red, green and blue as two hexadecimal digits each. Eight digits add opacity, for example `#1e90ff80`.
RGB	`rgb(30 144 255)`	Red, green and blue from 0 to 255. Opacity follows a slash: `rgb(30 144 255 / 0.5)`.
HSL	`hsl(210 100% 56%)`	Hue in degrees, saturation and lightness. Easy to adjust by hand: raise the lightness for a paler shade.
HSV	`hsv(210 88% 100%)`	Hue, saturation and value (brightness), used by many design programs. Not valid CSS.

HEX, RGB and HSL are written in the CSS Color Module Level 4 syntax that current browsers understand. The boxes also accept the older comma forms such as rgba(30, 144, 255, 0.5) and the 148 CSS colour names. Wide-gamut formats such as oklch(), lab() and color() are not supported.

The colour is kept as 8-bit red, green and blue values. HSL and HSV are shown rounded to whole numbers, so typing a rounded HSL value back in can give a colour one step away from the one you started with.

What a colour picked from an image means

Doodleden reads the pixel after your browser has decoded the image for a standard sRGB screen. For most images that is exactly the colour stored in the file. A photo with an embedded colour profile, such as one from a camera or phone set to Display P3 or Adobe RGB, gives the colour as your browser shows it, not the numbers stored in the file.

A fully transparent pixel has no visible colour. Doodleden shows it as transparent; any colour hidden under it in the file is not available to the browser. For a partly transparent pixel, the browser stores colour and opacity together, so at low opacity the red, green and blue values it reports can differ from the file.

An animated image is shown as its first frame. An SVG is drawn at its own size, or a size you choose, before you pick.

Private by design

Your image is opened and read inside your browser. It is not uploaded to a Doodleden server, and nothing about it is stored. Colours and the palette live only in this page while it is open.

Files are processed in your browser and are not uploaded to or stored by Doodleden. This site is funded by advertising; our ad partners use cookies and similar technologies as described in our privacy policy.