What color formats does the picker output?

The picker outputs HEX (e.g. #3B82F6), RGB (e.g. rgb(59, 130, 246)), and HSL (e.g. hsl(217, 91%, 60%)). HEX is the most common format for web design and CSS. RGB is useful for design tools and mathematical color operations. HSL (Hue, Saturation, Lightness) is the most intuitive for humans — adjusting lightness or saturation without changing the hue is straightforward in HSL.

Is my image uploaded to a server?

No. The image is loaded directly into your browser using the FileReader API and drawn onto an HTML5 Canvas element. All pixel sampling is done locally in JavaScript — your image never leaves your device. This makes it safe to use with confidential screenshots, design mockups, or any private imagery.

Why does the picked color look slightly different from what I see on screen?

Color picker tools sample the raw pixel data from the image file. If your display uses a wide color gamut (P3 or Rec. 2020) or has color calibration applied, the on-screen appearance may differ slightly from the sRGB values in the file. Additionally, JPEG compression can alter pixel colors slightly from the original. For exact brand color extraction, use PNG or lossless source files.

Colour Picker — From Image

Pick colours from an uploaded image and read them back as HEX, RGB, HSL or OKLCH, with palette extraction. The image never leaves your device.

Drop an image here

or click to browse · PNG, JPG, WebP, GIF…

Turning picked colours into a usable palette

Sampled colours are a starting point, not a palette. What makes a set of colours work as a system:

Pick one dominant colour, not five —Most images have one colour that carries the identity. Build around it rather than sampling everything and ending up with a muddle.
Generate the scale, do not sample it —Sample the hue, then build lightness steps programmatically in OKLCH. Hand-picked steps look uneven because sampled colours vary in chroma as well as lightness.
Check contrast before committing —A colour picked from a photograph is chosen for how it looks in that photograph, not for legibility as text. Verify against WCAG thresholds with the colour converter.
Reserve saturated colours for small areas —A colour that reads as vivid across 20 pixels of an image is exhausting across a full-width background.
Sample from a real photo, not a screenshot —A screenshot of an image already carries the display’s colour profile and any compression artifacts. Sample the source file.

About

The Color Picker from Image lets you upload any image and sample the color of any pixel by clicking on it. It displays the picked color as HEX, RGB, and HSL values, and shows individual R, G, and B channel bars for a quick visual breakdown. Use it for extracting brand colors from screenshots, matching colors in designs, or identifying exact color values from photographs.

How to use

1 Drag and drop an image onto the upload area, or click to browse.
2 Click anywhere on the displayed image to sample that pixel's color.
3 The HEX, RGB, and HSL values appear in the panel on the right.
4 Click any value to copy it to your clipboard.

What color formats does the picker output?: The picker outputs HEX (e.g. #3B82F6), RGB (e.g. rgb(59, 130, 246)), and HSL (e.g. hsl(217, 91%, 60%)). HEX is the most common format for web design and CSS. RGB is useful for design tools and mathematical color operations. HSL (Hue, Saturation, Lightness) is the most intuitive for humans — adjusting lightness or saturation without changing the hue is straightforward in HSL.
Is my image uploaded to a server?: No. The image is loaded directly into your browser using the FileReader API and drawn onto an HTML5 Canvas element. All pixel sampling is done locally in JavaScript — your image never leaves your device. This makes it safe to use with confidential screenshots, design mockups, or any private imagery.
Why does the picked color look slightly different from what I see on screen?: Color picker tools sample the raw pixel data from the image file. If your display uses a wide color gamut (P3 or Rec. 2020) or has color calibration applied, the on-screen appearance may differ slightly from the sRGB values in the file. Additionally, JPEG compression can alter pixel colors slightly from the original. For exact brand color extraction, use PNG or lossless source files.

More in Media & Audio

Instrument Tuner Chromatic tuner with cent-accurate deviation, presets for guitar, bass, ukulele and violin, and adjustable A4 reference.Metronome Sample-accurate metronome scheduled on the audio clock, with time signatures, accented downbeats and subdivisions.Tap Tempo Tap along to find a track’s BPM, averaged over a rolling window so a single mistimed tap does not skew the reading.Pitch Detector Real-time fundamental frequency detection from the microphone, showing the nearest note and cent offset.Tone Generator Sine, square, triangle and sawtooth at any frequency — for testing speakers, headphones and room response.Noise Generator White, pink and brown noise with a proper spectral shape, for masking, testing or concentration.

See all media & audio.