Color picker from image
Find a color you love. Make it yours. Pick exact pixels, extract a whole palette, or convert HEX, RGB, and HSL in one free toolkit.
Your image, in color
A palette will appear as soon as you add an image.
Selected color
Ready to copyCMYK is an estimate. Printed colors depend on your printer and color profile.
Screen picking isn’t available in this browser. Upload a screenshot to sample it instead.
Recent picks
Your picked colors will stay here while you explore.
What is a color picker from image?
A color picker from image reads the exact color of any pixel in a photo, screenshot, or graphic and hands you the code. You'll also see it called an image color picker, a color grabber, or an eyedropper. Point at a pixel, click, and you get that color in HEX, RGB, HSL, and three more formats. No design software, no guessing at hex digits.
People reach for one because sampling beats guessing. You spot a color you love in a competitor's post, a sunset photo, or a website you admire, and you want it in your own work. Eyeballing a hex code never lands the right shade. Reading the actual pixel does, every time. That's the whole job: find the color that's already in front of you and copy it in one click.
A regular color picker gives you a wheel and asks you to hunt for a shade. This one starts from a real image, so the color you want is already there waiting to be grabbed. It runs entirely in your browser, which means your image never uploads anywhere. It's one of Krumzi's free tools, built to get you from "I love that color" to a usable code in seconds.
How to pick colors from any image
Four steps. No signup. No watermark. Files up to 20MB.
Upload your image
Drop a file, paste from clipboard, or load straight from a URL. PNG, JPG, GIF, WebP, SVG, BMP all work.
Hover to preview
Move your cursor across the image. The magnifier zooms in so you can target a single pixel, not the blurry edge.
Click to capture
Click anywhere to lock in the color. Get HEX, RGB, HSL, HSB, OKLCH, and CMYK side by side. Tap any code to copy.
Grab the full palette
Choose 4 to 12 colors for your palette. Download PNG, CSS, or JSON, or copy CSS variables, Tailwind config, and SCSS.
HEX, RGB, HSL, HSB, OKLCH, CMYK: which one to use
Click any pixel and you get all six at once. Here's what each format is for, so you copy the right one the first time. Not sure which you need? Copy HEX. It works almost everywhere.
HEX
#5A17DDThe standard for the web. Six characters after a hash, two each for red, green, and blue. Reach for HEX any time you're writing CSS, filling a field in Figma, or pasting a brand color into a design tool. It's the most portable format and the one you'll copy most.
RGB
rgb(90, 23, 221)The same color as three numbers from 0 to 255: red, green, blue. Handy when you need an alpha channel for transparency (rgba) or when you're in code that expects channel values instead of a hex string.
HSL
hsl(260.3, 81.1%, 47.8%)Hue, saturation, lightness. The human-friendly one. Want a lighter or more muted version of a color? Nudge the lightness or saturation number instead of guessing new hex digits. Great for building tints and shades by hand.
HSB / HSV
hsb(260, 90%, 87%)Hue, saturation, brightness. This is what Photoshop, Figma, and most design apps show in their color panels. If you're matching a swatch inside a design tool, HSB is the value that lines up with what you see on screen.
OKLCH
oklch(46.4% 0.256 285.7)The modern CSS color space. Its lightness is perceptually even, so two colors with the same lightness number actually look equally bright. That makes it the best pick for accessible palettes and smooth gradients in current browsers.
CMYK
cmyk(59%, 90%, 0%, 13%)Cyan, magenta, yellow, black: the ink mix for print. This is a mathematical estimate, not a printer-profile conversion. Check the final color with your printer before using it for packaging or a print run.
Who uses an image color picker
Anyone who works with color. Here's what people grab it for.
Brand designers
Reverse-engineer competitor palettes, sample colors from inspiration boards, or pull brand colors out of a PNG or SVG logo.
Web developers
Match a CSS color to a screenshot in seconds. Export Tailwind config or CSS variables straight into your project.
Social media managers
Pull a palette from a campaign photo, then design on-brand posts in Krumzi without guessing hex codes.
Photographers
Sample skin tones, sky gradients, or shadow values for color grading in Lightroom and Photoshop.
Interior & product designers
Find paint colors that match a fabric swatch, or extract a palette from a mood board for a client pitch.
Print designers
Get an estimated CMYK value as a starting point, then check the final color with your printer.
From a picked color to a finished design
A color code is a starting point, not the finish line. Once you've pulled a palette from an image, the good part is putting it to work. Export the swatches as CSS variables or a Tailwind config and they drop straight into your codebase. Save them and you've got a ready-made scheme for your next post, thumbnail, or slide.
Building something with a soft, colorful backdrop? Feed your picked colors into the mesh gradient generator for a smooth blend, or the animated background generator if you want that gradient to move. Both take the exact colors you sampled here and turn them into a background you can download.
And when you want the whole design, not just the colors, that's where Krumzi comes in. Save your palette, describe the post you're after, and AI builds it from scratch using your colors. Every layout, font, and shape decision handled, all of it fully editable. Your first design is 30 seconds away.
Frequently asked questions
Is this color picker really free?
Yes. No signup, no watermark, no limit on how many images you use. Each file can be up to 20MB. We built it to bring people to Krumzi, our AI design tool. Use it as much as you want.
How do I find the color code of an image?
Upload the image, hover until the magnifier lands on the exact pixel you want, and click. The tool reads that pixel and shows the code in HEX, RGB, HSL, HSB, OKLCH, and CMYK all at once. Click the format you need to copy it. The whole thing takes a couple of seconds.
How do I extract a color palette from a picture?
Drop the picture in and the tool finds up to 12 distinct colors automatically, no clicking required. You get a row of swatches that actually represent the image, and you can copy them one by one or export the whole set as CSS, Tailwind, SCSS, or JSON.
Can I get the HTML color code from an image?
Yes. The HTML color code is the HEX value, like #5A17DD. Click any pixel and the HEX code sits right at the top of the results, ready to paste into your CSS, your HTML, or any design tool.
What color formats do you support?
HEX, RGB, HSL, HSB (HSV), OKLCH, and CMYK. Click any value to copy it. Most picker tools give you two or three formats. We give you six because designers and developers both end up here.
Does my image leave my browser?
No. Image processing happens entirely in your browser using HTML canvas. Local files are not uploaded. If you load an image URL, your browser contacts the image host directly.
What's the difference between HEX, RGB, HSL, and OKLCH?
HEX (#5A17DD) is the standard web format. RGB lists red/green/blue values 0-255. HSL is human-friendly (hue/saturation/lightness). HSB/HSV is what design tools like Figma use. OKLCH is the modern CSS color space with perceptually uniform lightness. CMYK is an estimate for print, not a printer-profile conversion.
Can I pick colors from a URL or screenshot?
Yes. Drop a file, click to upload, paste from clipboard, or paste a direct image URL. A direct image URL must allow cross-origin access. If it blocks access, upload the image file instead.
What image formats can I upload?
PNG, JPG, GIF, WebP, SVG, and BMP all work, up to 20MB, 32 megapixels, and 16,384 pixels per side. Drop a file, paste from your clipboard, or paste a direct image URL. Whatever you upload stays in your browser and never touches a server.
How does the dominant palette extraction work?
We sample the image, group similar colors, and average the original pixel values within each group. Choose 4, 6, 8, 10, or 12 distinct colors. Simple images may return fewer. For an exact pixel color, use the eyedropper.
Can I export the palette to use in code?
Yes. Copy CSS custom properties, a Tailwind config snippet, SCSS variables, or a JSON array. You can also download PNG, CSS, and JSON files.
Why does the magnifier matter?
Pixels matter. A logo color and the pixel next to it can differ by 10-15 RGB values from anti-aliasing. The magnifier with a single-pixel target lets you grab the right pixel, not the blurry edge.
Does this work on mobile?
Yes. Tap to pick instead of hovering. The full UI is responsive.
Can I convert HEX, RGB, and HSL without an image?
Yes. Open the Color converter tab and paste a HEX, RGB, or HSL value. The other formats update instantly. You can also adjust the visual picker or RGB sliders, and preview text contrast on white and black.
Can I use the eyedropper with a keyboard?
Yes. Focus the image sampler with Tab. Arrow keys move one original pixel at a time, Shift plus an arrow moves ten pixels, and Enter or Space selects the color. The selected color remains available while you move to another pixel.
What if I want to design a whole post with these colors?
That's exactly what Krumzi does. Save your palette, describe the design you want, and AI builds it using the colors you picked. Head to Krumzi to build a design around your colors.
More free tools you'll like
Built by Krumzi. All free, no signup.
Resize one image for every social feed. Crop or fit, save PNG or JPG, and download several sizes in a ZIP.
Calculate any ratio, resize without distortion, or drop an image and download social-ready sizes for every platform.
Celebrate milestones and grab attention on social media with animated counter videos. Export as MP4 or GIF.
Turn screenshots into stunning videos with animated gradient backgrounds. Perfect for product showcases.
Start with 12 presets or your own colors. Shuffle the layout and export mesh gradients as PNG, SVG, or CSS.
Create animated gradient video backgrounds for your social media content and marketing videos.
Turn a photo or logo into a palette of up to 12 colors. Download a labeled PNG, CSS variables, or JSON.
Convert HEX, RGB, and HSL, adjust color channels, and check text contrast. Copy any format instantly.
Turn a URL or text into a QR code. Choose your colors and download PNG or SVG. Free, with no expiry.
Picked your colors? Krumzi designs the rest.
A palette is the easy part. When you need the full post, thumbnail, or carousel built around those colors, Krumzi's AI does it from a sentence.
Make it with AI
Learn the craft
Related reading
Still picking a design tool? These two settle the Canva question.
- Canva alternatives15 tools tested, free and paid, ranked by what they are actually good at.
- Krumzi vs CanvaSide by side on process, editing, brand and price.