Free Online Color Picker
Extract colors from images with an eyedropper and get exact HEX, RGB, and HSL values in your browser.
No Image Loaded – open an image to pick colors online
Click "Open Image" to get started
Supports: JPG, PNG, GIF, WebP- Click Open Image and choose a JPG, PNG, GIF, or WebP file.
- Once the image loads, click Pick Color to enable the eyedropper.
- Move your cursor over the image and click on the pixel you want to sample.
- Read the selected color in HEX, RGB, and HSL from the toolbar.
- Click any value to copy it to your clipboard for use in code, design tools, or style guides.
An online color picker is useful any time you need to match colors exactly between images, websites, and design systems.
- Branding and logos: Extract official brand colors from logo files and lock them into a style guide.
- UI and web design: Match button, link, and background colors from mockups or existing sites.
- Illustration and photography: Build palettes from key areas of illustrations or photos.
- Accessibility checks: Sample text and background colors before running contrast checks.
The LeanTul color picker works fully in your browser and supports common image formats used for design work.
- JPG and JPEG photos from cameras and phones
- PNG screenshots and graphics with transparency
- GIF images for basic graphics and UI elements
- WebP images from modern browsers and exports
Each sampled color is shown in HEX for web, RGB for design tools, and HSL for fine tuning hue, saturation, and lightness. All sampling happens locally in your browser, so your images are never uploaded to a server.
When you are ready to build a full palette, try the color palette extractor or use other image tools like the image resizer and image converter.
Is this online color picker private?
Yes. All color sampling happens in your browser. Your images are never uploaded to a server, which keeps your design files and photos private.
Which image formats does the color picker support?
The LeanTul color picker supports JPG, PNG, GIF, and WebP images, which covers most photos, screenshots, and design exports.
How do I get precise colors from small details?
Use the eyedropper over the area you want to sample and rely on the built in magnifier to zoom in on single pixels. This helps you grab exact colors from icons, borders, and text.
What is the difference between HEX, RGB, and HSL?
HEX is the format most often used in CSS for web colors. RGB is common in design tools and represents red, green, and blue values. HSL represents hue, saturation, and lightness and is helpful when you need to adjust brightness or intensity without changing the base hue.