Click anywhere on your image to instantly get the exact HEX, RGB, and HSL color values. Extract a full color palette automatically. Perfect for designers and developers. No uploads.
✏️ Upload Your Image
🎨
Drop image here or click to browse
Then click anywhere on the image to pick a color
👆 Click anywhere on the image to pick a color
📌 Picked Color
HEX
#000000
RGB
HSL
🎨 Color Palette (click to add)
Click colors on the image to build your palette
🎨 Color Picked!
🔒 Processed in your browser — never uploaded
⚙️ How It Works
1
Upload your image
Drop any photo, screenshot, or design. It renders on a high-resolution canvas.
2
Click any pixel
A magnifier loupe shows a zoomed preview of the area under your cursor. Click to capture that exact color's HEX, RGB, and HSL values.
3
Build your palette
Each color you pick adds to a palette. Export the full palette as CSS custom properties (variables) ready to paste into your stylesheet.
❓ Frequently Asked Questions
How do I find the exact color of a pixel in an image?
▼
Upload your image and hover over it to see the magnifier loupe. Click on any pixel to instantly get its exact HEX code, RGB values, and HSL values. The color is extracted using the getImageData() Canvas API which reads the precise pixel data.
What is the difference between HEX, RGB, and HSL color formats?
▼
HEX (#FF6B9D) is the format used in HTML/CSS for web colors. RGB (rgb(255, 107, 157)) specifies red, green, blue channels 0–255 — used in CSS and most design tools. HSL (hsl(339, 100%, 71%)) uses Hue (0–360°), Saturation, and Lightness — more intuitive for creating color variations.
How do I extract a color palette from an image?
▼
Click on multiple colors throughout your image — each click adds that color to the palette below. Click different areas like shadows, highlights, and midtones to build a complete palette. Export as CSS variables with one click for use in your stylesheet.
Can I use this to match brand colors from a logo?
▼
Yes — upload your logo PNG and click on each brand color to get its exact HEX code. This is commonly used to maintain brand consistency when you need colors from a logo file but don't have the original design source files.
Why does the picked color look slightly different from what I expected?
▼
JPEG compression can alter pixel colors slightly from the original. For exact color matching from logos or brand assets, always work from PNG or SVG source files which preserve exact color values without lossy compression artifacts.