Free Color Picker From Image
Drop any image. Pull out HEX, RGB, HSL, HSB, OKLCH, and CMYK. Auto-extract the full palette.
Your image will appear here
Drop a file on the left to start picking colors
Describe any design in words. Krumzi's AI creates it from scratch — layout, colors, typography, everything. Start Free Trial →
This Free Tool Is Just the Start
Krumzi designs complete social media graphics and videos from a text description. No templates. No design skills. Just describe what you want and watch AI build it.
Every layout decision. Every color choice. Every font and composition. Done in seconds. Fully editable. Fully yours.
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 four 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. No upload limits.
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
The 8 dominant colors get extracted automatically. Export as CSS variables, Tailwind config, SCSS, or JSON.
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, 82%, 48%)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(42% 0.24 291)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. Grab CMYK when your color is headed for a business card, flyer, or anything on paper, so what comes off the printer matches what you designed.
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 logo PDF.
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
Convert any pixel to CMYK on the spot. No need to open Illustrator or Photoshop just to grab a color code.
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 upload caps. 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 pulls its 8 dominant 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. Nothing gets uploaded to a server, so even private screenshots stay private.
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 for print.
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. All four work the same way.
What image formats can I upload?
PNG, JPG, GIF, WebP, SVG, and BMP all work, up to 20MB. 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 downsample your image, quantize the pixels into color buckets, and surface the most-frequent colors filtered for visual distinctness. You get up to 8 swatches that actually represent the image, not 8 near-identical greys.
Can I export the palette to use in code?
Yes. One click copies it as CSS custom properties, a Tailwind config snippet, SCSS variables, or a JSON array. Paste straight into your project.
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.
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. 7-day free trial, no credit card to start.
More free tools you'll like
Built by Krumzi. All free, no signup.
Calculate any ratio, resize images without distortion, export social-ready sizes for every platform.
Build vibrant gradient backgrounds. Start from a preset, then export PNG, SVG, or CSS.
Looping animated gradient backgrounds for slides, intros, and reels.
Slick number animations for milestones and stats. Export MP4.
Wrap product screenshots in animated gradients. Perfect for launches.
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.