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 samples an exact pixel from a photo, screenshot, logo or design and expresses that color as HEX, RGB, HSL, HSV, CMYK or OKLCH. Zoom and a magnified preview help separate neighboring antialiased pixels that may look identical at normal size.
Sample the right pixel, not just the right area
- Upload or paste a supported image.
- Zoom into the edge or surface you want to inspect.
- Move the pointer until the magnifier centers the intended pixel.
- Click to lock the sample, then copy the required format.
Edges, shadows and compressed photographs contain many near-colors. Take several samples before treating one pixel as the color of an entire object.
HEX and RGB describe the same sRGB channels
A six-digit HEX value stores red, green and blue as hexadecimal pairs. #FF0000 corresponds to rgb(255 0 0). Eight-digit HEX or an RGB alpha component can also describe transparency.
Use HEX for compact tokens and RGB when channel values or alpha need to be obvious. Converting notation does not change the underlying sRGB color.
HSL is convenient for controlled variations
HSL separates hue, saturation and lightness, making it easier to create lighter, darker or less saturated variants. Equal numeric lightness does not guarantee equal perceived brightness across different hues, so verify contrast visually and with an accessibility checker.
Why OKLCH is useful in design systems
OKLCH organizes color using perceived lightness, chroma and hue. It can make systematic palettes more predictable than HSL, especially when maintaining similar perceived lightness. Some high-chroma values fall outside a display’s gamut and may be clipped.
Transparency can change the visible result
A semitransparent pixel is composited with the background. The sampled source color and the visible blended color may differ. When matching a screenshot, identify whether the desired value belongs to the foreground layer or to the final composite.
Color management and screenshots
Wide-gamut images, embedded profiles, browser conversion and display calibration can affect appearance. The copied numeric value is exact for the decoded pixel in the tool, but two uncalibrated screens may still look different.
Compare samples before choosing a token
For a textured area, collect samples from the highlight, midpoint and shadow instead of copying the first pixel. A median-looking sample often represents the surface more faithfully, while the extremes can become separate hover, border or shadow tokens. Save the coordinates or a small annotated screenshot when the choice needs to be reviewed later.
When matching an existing website, inspect the computed CSS value if you control the source. Pixel sampling is most helpful when the original design token is unavailable or when you need the color as it actually appears after blending.
Better ways to build a palette
Sample a dominant surface, text color, accent and state colors separately. Preserve the original brand token when available instead of reverse-engineering it from a compressed screenshot. Check contrast for real text sizes and backgrounds.
Common pixel-picking errors
- Sampling an antialiased edge
- Ignoring an alpha channel
- Copying CMYK as if it were a press-ready profile conversion
- Assuming one photo pixel represents a flat object color
- Choosing a palette without checking contrast
Continue the image workflow
Use the Image Cropper to refine composition, then create site icons with the Favicon Generator. Keep an untouched source file before exporting derivatives.
Image Color Picker FAQ
Which format should I copy for CSS?
HEX, RGB, HSL and OKLCH are all valid in modern CSS contexts; choose the notation that fits your design system and browser requirements.
Why do nearby pixels have different values?
Antialiasing, shadows, texture and compression blend neighboring colors.
Does the tool upload my image?
Review the tool’s displayed privacy behavior and browser indicators for the current version; do not use sensitive images unless you are comfortable with that handling.
MDN documents modern CSS color notations, including HEX, RGB, HSL and OKLCH.
