Image Color Picker
Upload, drop or paste an image and select any pixel to find its HEX, RGB, HSL, HSV, CMYK and OKLCH values. Extract a balanced color palette, identify the nearest CSS color name, check contrast and export the results directly from your browser.
Select a color
Click a pixel to sample it. Drag the image to pan while zoomed.
Focus the image and use arrow keys for precise movement. Press Enter to select the current pixel.
Selected color
Click any value below to copy it.
Click or tap anywhere on your image to inspect that pixel.
Image color palette
Perceptually separated dominant colors extracted from the image.
Recently selected
Your latest colors from this image.
Your image, pasted screenshot and generated palette remain in your browser and are not uploaded by this tool. Animated GIF files use one decoded frame.
The Image Color Picker identifies the colour of any pixel in a photo, screenshot, logo or design. Upload an image, click or tap the colour you want, and copy its HEX, RGB, HSL, HSV, CMYK or OKLCH value.
How to Pick a Color from an Image
- Upload a PNG, JPG, WebP or GIF image, drag it into the upload area, or paste a copied image using Ctrl+V or Cmd+V.
- Move over the image to inspect pixels with the magnifier.
- Click or tap the required pixel to select its color.
- Use the keyboard arrow keys for precise pixel-by-pixel movement when needed.
- Zoom from 25% to 500% and drag to pan around detailed areas of the image.
- Copy the HEX, RGB, HSL, HSV, CMYK, OKLCH or CSS value.
- Select a palette size of 5, 8 or 12 colors.
- Copy or download the extracted palette in HEX, CSS, PNG or JSON format.
Color Values Provided
The Image Color Picker displays several common color formats for the selected pixel:
- HEX: A hexadecimal color code commonly used in websites and applications.
- RGB and RGBA: Red, green and blue values, including opacity when transparency is present.
- HSL: Hue, saturation and lightness values for intuitive color adjustments.
- HSV or HSB: Hue, saturation and value values often used in graphics software.
- CMYK: An estimated cyan, magenta, yellow and black conversion for general reference.
- OKLCH: A modern CSS color format based on perceptual lightness, chroma and hue.
- Nearest CSS color name: The closest matching named color from the standard CSS color list.
Extract a Color Palette from an Image
The tool analyzes the image and creates a balanced palette using perceptual OKLab color clustering. This helps separate visually distinct colors more effectively than simply counting the most common pixel values.
Choose a palette containing 5, 8 or 12 colors. Eight colors are selected by default.
- Copy All HEX: Copy every palette color as a list of HEX codes.
- Copy as CSS Variables: Generate reusable CSS custom properties for the palette.
- Download Palette PNG: Save a visual palette image.
- Download Palette JSON: Export the palette as structured data.
- Clear Palette: Remove the current extracted colors and start again.
Zoom, Pan and Select Precise Pixels
Use the zoom controls to inspect small details or high-resolution images. The image can be enlarged from 25% to 500%, and the current zoom percentage is displayed beside the controls.
- Zoom in or out to inspect detailed areas.
- Drag the image to pan while it is zoomed.
- Use touch gestures to pan on supported mobile devices.
- Select Reset Zoom to return to the original zoom level.
- Select Fit Image to fit the complete image inside the workspace.
- Use the magnifier and keyboard controls for exact pixel selection.
Paste a Screenshot or Copied Image
You can paste a screenshot or copied image directly into the tool using Ctrl+V on Windows and Linux or Cmd+V on macOS. A visible Paste Image button is also available when supported by the browser.
Clipboard access normally requires a secure HTTPS connection and browser permission. If automatic clipboard access is blocked, use the keyboard paste shortcut or upload the image manually.
Color Accuracy and Limitations
The displayed values are calculated from the image pixels decoded by your browser. The same color may appear different on another screen or in print because of display calibration, brightness, image color profiles, printer settings, ink and paper.
CMYK values are mathematical estimates derived from screen-based RGB data. They should not be treated as printer-specific production values. Professional printing normally requires an appropriate ICC profile and a color-managed workflow.
The displayed color name is the nearest match from the standard CSS named-color list. Most digital colors do not have an exact official name, so the result should be treated as an approximate description.
Palette extraction is designed to produce a visually balanced group of representative colors. Results may vary depending on image transparency, gradients, shadows, compression and the selected palette size.
What Can You Use the Image Color Picker For?
- Identify a brand color from a logo.
- Find the exact color of a pixel in a screenshot.
- Extract a palette from a photograph, illustration or design.
- Match colors used in a website or application interface.
- Create CSS variables from an image palette.
- Check whether black or white text provides stronger contrast.
- Inspect transparent pixels and opacity values.
Private Browser-Based Image Processing
Your image, selected colors and generated palette are processed locally in your browser. AjaxCalculators does not intentionally upload or store the image or palette files on a server.
Clipboard access is used only when you choose to paste an image. The tool does not continuously read or monitor the clipboard.
Frequently Asked Questions
Which image formats can I upload?
You can upload PNG, JPG, WebP and GIF images. You can also paste supported screenshots and copied images directly from the clipboard.
Can I paste a screenshot into the color picker?
Yes. Copy the screenshot or image and press Ctrl+V on Windows or Linux, or Cmd+V on macOS. You can also use the Paste Image button when clipboard permission is available.
Why is the Paste Image button not working?
Clipboard access normally requires HTTPS and permission from the browser. If access is blocked, use Ctrl+V or Cmd+V, drag the image into the tool or select it from your device.
How do I select an exact pixel?
Move over the image with the magnifier, then click or tap the required pixel. You can zoom the image and use the keyboard arrow keys to move one pixel at a time for more precise selection.
Can the tool extract a color palette automatically?
Yes. The tool can generate a balanced palette of 5, 8 or 12 colors using perceptual OKLab clustering. You can copy the colors or export the palette as CSS variables, PNG or JSON.
What is OKLCH?
OKLCH is a modern CSS color format that represents lightness, chroma and hue. It is designed to make changes in perceived lightness and color intensity more consistent.
What does the nearest CSS color name mean?
The tool compares the selected pixel with the standard list of named CSS colors and displays the closest match. It is an approximate description rather than an exact official name for every possible color.
Does the tool support transparent pixels?
Yes. When transparency is present, the tool can display RGBA values, opacity information and an eight-digit HEX value that includes the alpha channel.
Are the CMYK values suitable for professional printing?
No. The CMYK values are approximate conversions from RGB image data. Professional print production should use a suitable ICC profile and printer-specific color settings.
Are my images uploaded or stored?
No. Image analysis, pixel selection and palette generation take place locally in your browser. The uploaded or pasted image is not intentionally sent to or stored by AjaxCalculators.