Color Picker
Pick any color from an image and copy its HEX, RGB, and HSL values.
Upload an image and pick the exact color from any pixel using an eyedropper. Hover or click any point in the photo, screenshot, logo, or design, and instantly get the color in HEX, RGB, and HSL so you can drop it straight into your code or design tool.
The image is decoded and read entirely in your browser. It is never uploaded to a server, so a private mockup, an unreleased brand asset, or a client screenshot stays on your device. The eyedropper reads pixel values locally and nothing leaves your machine.
Drop an image to pick colors
Click anywhere on the image to grab a color
🔒 100% Browser-Based
Your image is processed entirely in your browser. Nothing is uploaded. Verify in DevTools → Network tab — zero outbound traffic with file content.
About Color Picker
Click anywhere on an image to sample the exact color and copy its HEX, RGB, and HSL values. Perfect for matching brand colors or pulling a shade from a photo. Runs locally in your browser.
How to use the Color Picker
- 1
Load your image
Drag in or select a PNG, JPG, WebP, or screenshot. It renders to a canvas in the browser where each pixel can be sampled directly. Larger images give you more precise spots to target.
- 2
Aim the eyedropper
Move your cursor over the area you want. A live preview shows the color under the pointer. Zoom in first if you need to hit a single small pixel, like a one-pixel border or a tiny icon.
- 3
Click to lock the color
Click the pixel to capture it. The tool displays the value in HEX, RGB, and HSL at once so you can copy whichever format your project needs.
- 4
Copy the format you need
Copy HEX for CSS and design apps, RGB when you need raw channel values or to add transparency, and HSL when you want to tweak hue, saturation, or lightness by hand.
HEX, RGB, and HSL explained
HEX (e.g. #3A7BD5) is a six-digit code packing red, green, and blue into a compact form. It is the default in CSS and most design tools, perfect for copy-paste.
RGB (e.g. rgb(58, 123, 213)) lists the red, green, and blue channels from 0 to 255. It is handy when a tool wants numeric channels, and the rgba() form lets you add an alpha value for transparency.
HSL (e.g. hsl(213, 64%, 53%)) describes color as hue (the position on the color wheel, 0 to 360), saturation (how vivid), and lightness (how bright). HSL is the easiest format for adjusting a color by intuition: nudge lightness for a tint or shade, drop saturation for a muted version, all without guessing at hex digits.
When pixel-accurate sampling matters
Eyeballing a color almost always misses. JPEG compression, anti-aliased edges, and your monitor's color profile all shift what you think you see. Sampling the actual pixel value removes the guesswork.
Common uses: matching a website's button color to a brand screenshot, pulling the precise hex from a logo a client sent as a flat image, identifying the background color of a graphic so a new element blends in seamlessly, recreating a gradient's stop colors, or grabbing the accent tone from a photo to build a matching UI. Designers also use it to audit whether a rendered page matches the intended palette down to the exact value.
Quick tips
- ✓Zoom in before sampling near edges. Anti-aliasing blends two colors into a halo of in-between pixels, so the true color sits a pixel or two inside the shape.
- ✓Sample a flat, solid area rather than a gradient or textured region to get the representative color you actually want.
- ✓JPEG artifacts can shift colors slightly near sharp boundaries. Sample several nearby pixels and use the most consistent value.
- ✓Use HSL when you want a lighter or darker version of the same color: keep hue and saturation, change only the lightness.
- ✓Copy RGB if you need to add transparency later, since rgba() lets you append an alpha channel that plain HEX (without the 8-digit form) does not.
Frequently asked questions
What color formats do I get?
HEX, RGB, and HSL — click any value to copy it to your clipboard.
Is the image uploaded?
No. The image is read on a local canvas in your browser; nothing is sent anywhere.
Can I extract a whole palette?
Yes — use the Color Palette Extractor to pull the dominant colors at once.
Is my image uploaded anywhere?
No. The image is decoded and sampled entirely in your browser. It never touches a server, so private designs and screenshots stay on your device.
Why does the color look slightly different from what I expected?
Two common causes: JPEG compression alters pixel values near edges, and anti-aliasing blends colors at boundaries. Sample inside a flat, solid region for the most accurate result.
Which format should I paste into CSS?
Any of the three work in modern CSS, but HEX is the most common and compact. Use RGB or HSL when you need transparency or want to adjust the color mathematically.