Skip to main content
Recently used

Online Image Color Picker

Upload an image and move your pointer over any area to preview its exact pixel color. Click to lock your selection, then copy the HEX, RGB, HSL, HSV or CMYK value for CSS, web design, branding and creative work.

  1. 1. Hover to preview
  2. 2. Click to lock
  3. 3. Copy the color
Image preview

Upload an image to pick a color

Drag and drop an image here, or choose a file to inspect any pixel color.

Maximum file size: 50MB

Your image is processed locally in your browser and is not uploaded to our servers.
Live Pointer
Selected Pick pixel Locked

Click the image to lock a color.

Color values
Color name —
HEX —
RGB —
HSL —
HSV —
CMYK —
Hue —

How to Pick a Color From an Image

Use the Image Color Picker to inspect an exact point in a photo, screenshot, illustration or design. The tool displays the selected pixel in several common color formats so you can reuse it in websites, applications and creative projects.

An image color picker is a tool that identifies the color of a specific pixel in an image. Instead of estimating a shade by eye, you can point to an exact location and view its HEX, RGB, HSL, HSV and CMYK values. This is useful when matching interface colors, recreating design elements or checking colors in screenshots and reference images.

  1. Upload an image up to 50MB.
  2. Move your pointer over the image to preview different colors.
  3. Use the zoom loupe to target the exact pixel you need.
  4. Click or tap the image to lock the selected color.
  5. Copy the HEX, RGB, HSL, HSV, CMYK or color-name value.
  6. Use Copy all when you need every available format.

Use HEX or RGB for most websites and interface designs. HSL is useful when adjusting hue, saturation or lightness in CSS. HSV is commonly used in visual color-selection interfaces, while CMYK is primarily associated with print-oriented workflows. The tool shows each format together so you can choose the value that matches your project.

The tool reads the pixel located at the selected point in the image. The zoom loupe helps you distinguish between neighboring pixels, which is especially useful around text, icons, shadows, gradients and detailed edges. Image compression, transparency, scaling and anti-aliasing can cause nearby pixels to have slightly different values.

Frequently Asked Questions

Upload the image, move your pointer over the color you want and click the exact point to lock it. The corresponding HEX code will appear in the selected-color panel, where you can copy it with one click.

Yes. After selecting a point in the photo, the tool displays its RGB value together with HEX, HSL, HSV, CMYK, Hue and a readable color name.

Photos and graphics often contain gradients, shadows, compression artifacts and anti-aliased edges. These details can make neighboring pixels slightly different. Use the zoom loupe to select the precise pixel you need.

Yes. The image is processed locally in your browser and is not uploaded to our servers.

Yes. Copy the HEX, RGB or HSL value and use it in CSS properties such as color, background-color, border-color, fill or box-shadow.

Built for Accurate Color Selection

Inspect image colors precisely and copy the format that fits your design, development or creative workflow.

Pixel-Precise Selection

Use the crosshair and zoom loupe to target an exact pixel instead of estimating a color by eye.

Live Color Preview

Move across the image to preview colors instantly before choosing and locking your final selection.

CSS-Ready Values

Copy HEX, RGB or HSL values for stylesheets, components, design systems and interface prototypes.

Multiple Color Formats

View the selected color as HEX, RGB, Hue, HSL, HSV, CMYK and a readable color name.

One-Click Copying

Copy an individual value or collect every available color format with the Copy all action.

Private Browser Processing

Inspect image colors directly in your browser without sending the image to a remote processing server.

Ways to Use the Image Color Picker

Web Development

Sample colors from screenshots and convert them into HEX, RGB or HSL values for CSS.

UI and UX Design

Match interface elements, buttons, backgrounds, borders and design-system colors.

Brand and Creative Work

Reference exact colors from approved graphics, promotional assets and visual inspiration.

Photo and Digital Art

Inspect shades from photos, illustrations, gradients, shadows and textured artwork.