HEX for web
Use HEX values for CSS, design tokens and quick interface references.
Photo & Image Tools Pro
Image Color Picker
Upload a screenshot, logo, photograph or design reference, then click a pixel to inspect and copy its HEX, RGB and HSL values. Sample multiple nearby pixels when anti-aliasing, shadows or compression may affect the result.
Image tool authority guide
How to use Image Color Picker reliably
Follow this four-step process to create a usable output, verify the result and preserve the original file as a master copy.
- 1Select a supported image from your device.
- 2Choose the available output settings for the destination.
- 3Preview the result and inspect dimensions, quality and transparency.
- 4Download the new copy while keeping the original separately.
Practical image workflow
Sample colours as references, then validate them in context
A sampled pixel can help reproduce a logo, screenshot or design reference, but a single pixel may be affected by anti-aliasing, shadows and compression. Sample several nearby pixels and test the chosen colour in the real interface.
RGB for screens
RGB is useful for code, image editing and digital colour comparison.
Sample carefully
Avoid edge pixels when you need the flat base colour of a shape.
Image engineering
Choose settings based on pixels, compression and colour
Image tools work with pixel dimensions, colour channels, metadata and format-specific compression. A smaller file can come from fewer pixels, stronger compression, reduced metadata or a more efficient format. These choices affect sharpness, transparency, colour consistency and future editability in different ways.
Pixel dimensions
Width and height determine on-screen detail and usually have the largest effect on file size.
Lossy vs lossless
Lossy formats discard visual information; lossless formats preserve exact decoded pixels but may remain larger.
Alpha transparency
PNG and WebP can store transparent pixels, while JPG replaces them with a solid background.
Colour and metadata
ICC profiles, EXIF orientation and camera metadata can affect appearance, rotation and privacy.
What the operation can change
- Resizing permanently changes the number of pixels in the exported copy.
- Lossy compression can create ringing, blocking or blurred fine detail.
- Format conversion may remove transparency or metadata.
- Repeated JPG saves can accumulate quality loss.
Domain-specific verification
- Compare the output at 100% zoom rather than only as a thumbnail.
- Inspect text edges, gradients, skin tones and transparent areas.
- Confirm width, height, file size and orientation.
- Test the final image in the website, marketplace or document where it will be used.
Engineering review
Prepare, verify and troubleshoot the image
Before processing
- ✓ Keep the original file as the master copy before editing or conversion.
- ✓ Confirm the source dimensions, colour mode, transparency and orientation.
- ✓ Remove confidential metadata when the image will be published or shared externally.
After downloading
- ✓ Inspect text, faces, logos, gradients and transparent edges at 100% zoom.
- ✓ Confirm the pixel dimensions and file size match the destination requirements.
- ✓ Open the downloaded file in the target browser, CMS, document or application.
ProblemPractical check
The result looks blurredAvoid enlarging a small raster source and reduce compression strength.
The file is still too largeReduce pixel dimensions before applying stronger compression.
Colours or transparency changedUse a format that supports the required alpha channel and test the result on its final background.
Implementation notes
- • Browser image processing is constrained by device memory, especially for high-resolution photographs.
- • Lossy formats discard image information; repeated exports can accumulate visible artefacts.
- • Visual quality should be judged at the final display size rather than only from the compression percentage.
Verify the output before using it
- ✓ Zoom into the intended colour area
- ✓ Sample multiple nearby pixels
- ✓ Compare the colour on light and dark backgrounds
- ✓ Store approved colours in a design token or style guide
Technical limitations
- • Screenshots may contain compression artefacts
- • Display profiles can affect perceived colour
- • A sampled colour does not guarantee print accuracy
Continue your image workflow
Use the selected value in a small UI test before updating a whole website, brand asset or design system.