Image color picker: pick colors from any image
Zoom in on any photo or screenshot, click a pixel to get its HEX, RGB, HSL and OKLCH codes, and get the image’s main color palette ready to export. Free, no signup, and your image never leaves your browser.
Image color picker tool
How to pick colors from an image
Add an image
Start with a sample photo, click Upload an image, drop a JPG, PNG or WebP on the page, or paste a screenshot with Ctrl+V (Cmd+V on a Mac). The image is read in your browser and never uploaded.
Pick colors
Hover the image to see a zoomed loupe of the pixels under the pointer and its hex code, then click to pick that exact color. On a keyboard, focus the image, aim with the arrow keys and press Enter. The image's main palette is found for you; drag a numbered marker to take that color from somewhere else.
Copy or export
Click any row to copy a color as HEX, RGB, HSL or OKLCH. Export palette copies every color as CSS variables, a Tailwind colors block or JSON, or saves a palette PNG to share.
What people use it for
Matching a brand color. Drop in a logo, a product shot or a screenshot of a website and pick the exact hex code, instead of guessing by eye in a design tool.
Building a palette from a photo. A travel photo, a painting or a moodboard image already has colors that work together. The palette pulls out the main ones in seconds, ready to paste into Figma, Canva, CSS or Tailwind.
Text and graphics that fit an image. Pick a deep tone from a photo for a headline that sits on top of it, or a light one for a button, so slides, social posts and web pages feel designed around the picture.
Tips for accurate colors
- Pick from flat areas. Edges, text and fine detail mix neighboring colors, so the middle of a shape gives the truest code.
- Use the arrow keys for the last pixel. Each press moves the loupe by one pixel; hold Shift to move 20.
- Raise the Colors slider to catch small accents, like a flower or a neon sign. Lower it for a calm, simple palette.
- A palette color covering 1 to 3% of the image is an accent. The large shares are your background and base tones.
- Screens show colors differently, so judge a palette on the screen your audience will use, and print a test before matching paint.
Turn the colors into a gradient
Image to Gradient blends a photo's palette into a soft gradient you can download free up to 8K.
More free color tools
Once you have a palette, the gradient background generator turns it into moving or still gradients, and the image to gradient tool does it straight from your photo. For texture, add film grain with the grain texture generator or turn a gradient into dots with the halftone gradient generator. Looking for colors to start from? Browse the free gradient wallpapers or the free background pack and drop any of them into the picker.
Explore more: aesthetic wallpapers, moving backgrounds, free gradient wallpapers, gradient backgrounds, cool backgrounds, free aesthetic backgrounds.
FAQs
Getting HEX, RGB and palette colors from an image: questions answered
Upload the image (or drop or paste it), move the pointer over it and watch the loupe: it zooms in on the pixels so you can land on the exact one you want. Click to pick it. The color appears under Picked colors with its HEX, RGB, HSL and OKLCH codes, and one click copies any of them. On a phone, touch and drag to aim, then lift your finger to pick.
Open the picture here and hover the spot you want: the loupe shows the hex code of the pixel under its center live, before you even click. Click to keep it, then click the HEX row to copy a code like #E8A87C, ready to paste into Figma, Canva, Photoshop or CSS. The RGB row below it gives the same color as red, green and blue values.
It happens as soon as the image loads. The tool groups every pixel of a small copy of the image into clusters of similar color, measured in OKLab, a color space where distances match what the eye sees. Each cluster becomes one palette color, shown with the share of the image it covers and a marker where it appears. Choose 3 to 10 colors with the Colors slider.
Up to 10 exact picks, plus an automatic palette of 3 to 10 colors, so as many as 20 at once. Remove a pick with its x to make room, or clear them all. Drag a numbered palette marker to take that palette color from another part of the image instead.
A palette color is the average of every pixel in its cluster, so it is the typical tone of that area rather than one exact pixel. A pick is the exact pixel under the center of the loupe. Photos, and JPGs in particular, vary a little from pixel to pixel; zoom in on a flat area for the most representative pick, or drag a palette marker, which averages a 5 by 5 pixel patch.
HEX (#E8A87C) is the most widely accepted: Figma, Canva, Photoshop and CSS all take it. RGB lists the red, green and blue values from 0 to 255. HSL describes hue, saturation and lightness, handy for making a lighter or darker version by hand. OKLCH is the modern CSS format whose lightness steps look even to the eye, the best choice for tints and shades. All codes are sRGB.
Yes. Take a screenshot, click anywhere on this page and paste it with Ctrl+V or Cmd+V. The picker reads the screenshot's pixels exactly, so you can lift a brand color from a website, an app or a slide. For text and thin lines, zoom in with the loupe and pick from the middle of a stroke, since the edges blend into the background.
Not for your own images. Searching color picker on Google shows a picker for choosing and converting colors, but it cannot read a photo. Chrome's eyedropper, in DevTools or a site's color input, only samples what is on screen. This online eyedropper works on any JPG, PNG or WebP you open, with a zoom loupe for exact pixels and a palette of the whole image.
You can get a close starting point. Pick from a flat, evenly lit area and copy the HEX, then enter it in the paint brand's color match tool or a store's search. Lighting, camera processing and screens all shift color, so a photo is never exact: check a physical swatch or sample before you buy paint.
Open Export palette. CSS variables gives a :root block you can paste into any stylesheet and use as var(--palette-1). Tailwind gives a colors block for theme.extend in tailwind.config.js, so classes like bg-palette-100 work. In Tailwind v4, paste the CSS variables into your @theme block instead. JSON lists every color in all four formats for scripts and design tokens.
Yes. Export palette also saves a palette PNG, 2000 pixels wide, with each palette color and your picked colors as swatches labeled with their HEX and RGB values. It is ready to drop into a moodboard, a brand guide, a client email or a social post.
Yes. Click Open these colors in Gradient Lab and the image's colors load into a new gradient there, ready to adjust, animate and download. To blend a whole photo into a soft gradient in one step, use the Image to Gradient tool, which reads the colors the same way.
No. The image is decoded on your device and kept in memory only while the page is open: a copy of up to 4096 pixels on the long edge for picking, and a 200 pixel copy for the palette. Nothing is sent to a server or stored, and closing the tab forgets it.
Yes. Picking, palettes, every export and the palette PNG are free, with no signup, no limits and no watermark. Colors are facts, not artwork, so you can use the codes and palettes anywhere, including client and commercial work, brand guides, websites and print.