What is Color Picker?
Color Picker lets you upload any image and sample exact color values by hovering over pixels. Get the hex, RGB, and HSL representation of any color you can see — perfect for matching brand colors, extracting palettes from photos, or reverse-engineering designs.
Color Picker is the “where did they get that color?” tool. When you see a shade you love in a screenshot, a photo, or a reference site, upload it here to get the exact code.
Color Format Outputs
Hex (#RRGGBB)
The standard format for CSS and design tools. 6 hex digits encoding red, green, and blue channels.
RGB (0–255)
Red, Green, Blue channels as decimal numbers. Useful in code where you need individual channel values.
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Best for programmatic color adjustments and tints.
CMYK (preview)
Cyan, Magenta, Yellow, Key (Black). Informational — for reference if passing colors to print design.
How to Use Color Picker
Upload an image
Drag-and-drop or click to upload any PNG, JPG, or WEBP image.
Hover to sample
Move your cursor over the image — a magnified preview shows the pixel under your pointer.
Click to lock
Click any spot to lock the sampled color and see its hex, RGB, and HSL values in the panel.
Copy the value
Click any color format to copy it to your clipboard in one click.
Common Use Cases
| Use Case | How |
|---|---|
| Match a brand color | Upload a brand asset, sample the primary color |
| Extract palette from photo | Sample 5–6 spots across the image |
| Reverse-engineer a website | Screenshot → upload → sample the colors |
| Get CSS value from Figma export | Export PNG, upload, sample |
Tips & Common Mistakes
Zoom in before sampling gradients. Gradients shift color gradually — hovering over the edge of a gradient element can give a blended value. Zoom into the flat center for the pure color.
JPEG compression shifts colors. If you sampled from a JPEG and the color looks slightly off from what you see on screen, take a PNG screenshot instead — PNG is lossless and preserves exact pixel values.
Use HSL for dark/light variants. Once you have a sampled hex, convert it to HSL and adjust lightness to create tints (+L) and shades (-L) of the same hue.
Related Tools
- Color Converter — convert between hex, RGB, HSL, and HSV
- Color Palette Generator — generate a full palette from a sampled color
- Contrast Checker — verify your sampled color pairs meet WCAG