Color Picker
Extract colors from any image. Get HEX, RGB, and HSL values. Build color palettes.
Drop your image here or click to upload
Supports PNG, JPG, WebP, BMP, GIF
About This Tool
Pick and convert colors with instant values in HEX, RGB, HSL and CMYK — plus automatic shade/tint ramps for design systems. Sample a color from any uploaded image (hover the picture, click to capture), or fine-tune a brand color and copy every format your CSS, design tool or print shop needs. Everything is computed locally and instantly: no page reloads, no sign-in, no data collection of your palette work.
How to Use This Tool
- Drop an image to sample from, or start from any color value in the input.
- Hover the image and click to capture the exact pixel (zoom grid helps for 1-px precision).
- Read the converted values: HEX for CSS, RGB for design tools, HSL for harmony work, CMYK as a print approximation.
- Copy any format with one click; the shade ramp gives 9 lighter/darker steps for hover states and borders.
- Build your palette: capture several colors and they accumulate into a swatch list you can review together.
Advantages & Use Cases
Extract a client's brand color from their logo file for a website build, get the exact hover shade by generating a ramp, or convert a designer's HSL to HEX for CSS. Print designers approximate CMYK before sending to the shop (with the usual caveats).
Supported Formats & Recommendations
- HEX/RGB/HSL are exact math — always accurate.
- CMYK is a best-effort conversion (screen RGB is a smaller space than print); treat it as a starting point and rely on proofing for color-critical work.
- Sample from PNG screenshots for UI-matching; JPG sampling shifts colors slightly due to compression.
How We Test This Tool
Each release checks conversions against reference tables (HEX↔RGB↔HSL round-trips must be exact), ramp steps must differ uniformly in lightness, and image sampling must return the identical value as a native eyedropper on the same pixel.
Related Tools You May Like
Helpful Resources
Frequently Asked Questions
Why do CMYK values look wrong when printed?
RGB screens and CMYK inks are different color worlds — conversion is an approximation. Use CMYK values as a starting brief, then correct on a printed proof.
How do I make a lighter version of my brand color?
Read the HSL, raise L (lightness) by 10-15 points for the first tint — or just copy a step from the generated ramp; steps are computed to stay in the same hue.
Can I pick a color from a website screenshot?
Yes — screenshot the area, drop the PNG here, and click the pixel. Screenshots are pixel-accurate as long as the browser didn't scale the image.