Web designers and developers
Grab the exact HEX code from a mockup, screenshot or client logo and paste it straight into CSS, Tailwind or Figma. Export a set of recent colors as CSS variables to start a theme in seconds.
Image Color Picker: Get HEX, RGB, HSL and CMYK from Any Photo
Upload or paste an image, click any pixel, and copy its exact color code. Extract a 5-color palette, check text contrast and export CSS variables in seconds. It is free, needs no signup, and your image never leaves your browser.
Drop an image here
Or paste a screenshot with Ctrl+V (Cmd+V on Mac). PNG, JPG, WebP, GIF, BMP or AVIF. Nothing is uploaded.
Color codes
#FFFFFF
HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
White text1.00:1 · Fail
Black text21.00:1 · AAA
Recent colors
Colors you pick will appear here.
How to pick a color from an image
Finding the exact color in a picture takes about a minute. Follow these steps.
- Add your image. Upload a file with Choose image, drag and drop it onto the tool, or paste a screenshot with Ctrl+V (Cmd+V on Mac). Supported formats are PNG, JPG, WebP, GIF, BMP and AVIF.
- Click or tap a pixel. Click anywhere on the image. On a phone or tablet, tap it or slide your finger across it. A small preview shows the color under your pointer.
- Copy the color code. Copy the HEX, RGB, HSL or CMYK value with its own Copy button, or press Copy all to get all four at once.
- Check readability. Look at the contrast panel to see how readable white or black text would be on the picked color, with a WCAG AA or AAA result.
- Extract a palette. Press Extract palette to get the 5 dominant colors of the image. Click any swatch to copy its HEX code.
- Export for your project. Press Export CSS to copy your recent colors as CSS variables you can paste straight into a stylesheet.
What is an image color picker?
An image color picker, also called an eyedropper tool or color extractor, reads the color of a single pixel in a picture and turns it into a code you can use in design and code. Instead of guessing “what blue is that?”, you get the exact value, such as #4F63FF, and can paste it into CSS, Figma, Canva, Photoshop or a brand guide.
Every digital image is a grid of pixels, and every pixel stores its color as three numbers for red, green and blue. When you click the image, this tool reads those three numbers from the pixel under your pointer and converts them into HEX, HSL and CMYK so you can use whichever format your project needs.
It works in any browser with no install, and it supports logos, photos, screenshots, artwork, product images and website mockups.
Features
- Four color formats: HEX, RGB, HSL and CMYK with individual copy buttons and Copy all.
- Palette extraction: the 5 dominant, clearly different colors of any image.
- Contrast checker: WCAG ratio and AA or AAA result for white and black text.
- CSS export: copy recent colors as CSS custom properties.
- Recent colors: keeps your last 20 picks so you can come back to them.
- Paste and drop: Ctrl+V a screenshot or drag a file in.
- Live preview: see the color under your pointer before you click.
- Private by design: processed locally, never uploaded.
- Mobile ready: touch to pick on phones and tablets.
- Accessible: keyboard-focusable buttons, labels for screen readers and visible focus.
Color formats explained: HEX vs RGB vs HSL vs CMYK
All four describe the same color. Choose the one your tool or project needs.
| Format | Example | Best for |
|---|---|---|
| HEX | #4F63FF | CSS, HTML, Figma, Canva, Tailwind, web design |
| RGB | rgb(79, 99, 255) | Screens, CSS, JavaScript, canvas, video, apps |
| HSL | hsl(231, 100%, 65%) | Making lighter, darker or less saturated shades in CSS |
| CMYK | cmyk(69%, 61%, 0%, 0%) | Print, flyers, packaging (approximate conversion) |
HEX
A HEX code is a # followed by six characters from 0 to 9 and A to F. The first two are red, the next two green and the last two blue. #000000 is black and #FFFFFF is white. It is the most common format on the web because it is short and easy to copy.
RGB
RGB lists red, green and blue as numbers from 0 to 255. It matches how screens make color from light, and it is the format used by JavaScript, canvas and many apps.
HSL
HSL is the easiest format to adjust by hand. Keep the hue and raise lightness for a tint, lower it for a shade, or reduce saturation for a muted version. This makes it ideal for building a consistent set of hover, active and background colors.
CMYK
CMYK describes ink coverage for printing. Screens can show colors that ink cannot, so a bright screen color may print duller. Treat the value here as a starting point and proof before a print run.
Common color codes reference
Here are the basic colors and their codes in each format. Use them to check the tool or as quick references.
| Color | Swatch | HEX | RGB | HSL |
|---|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Lime green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
How color palette extraction works
A photo can contain millions of slightly different colors, so the tool needs to simplify them. When you press Extract palette, it samples pixels across the whole image, skips transparent ones, and groups similar colors into small color buckets. Each bucket is averaged into one representative color and ranked by how many pixels it holds.
Finally the tool keeps the most common colors that are clearly different from each other, up to five. That is why you get a useful palette, such as sky blue, sand, green, shadow and highlight, and not five slightly different blues. This simplification step is called color quantization and it is the same idea used by image compression and palette generators.
Use the palette as a starting point. Click any swatch to copy its HEX code, then adjust it in HSL if you need a lighter or darker version.
Color contrast and accessibility
Good contrast makes text readable for everyone, including people with low vision or color blindness, and for anyone using a phone in bright sunlight. The WCAG guidelines measure contrast as a ratio between 1:1 (no difference) and 21:1 (black on white).
- AA, normal text: at least 4.5:1.
- AA, large text: at least 3:1.
- AAA, normal text: at least 7:1.
- AAA, large text: at least 4.5:1.
The contrast panel next to your picked color shows the ratio for white text and black text, with a pass level. If neither passes, adjust the lightness of the color or pick a different shade from the image.
Who uses an image color picker?
Brand and marketing teams
Keep social posts, ads, emails and presentations on-brand by sampling colors directly from approved brand images, instead of asking for a style guide every time.
Graphic designers and illustrators
Build a palette from a reference photo, a painting or a mood board, then use it as the base for posters, packaging and illustrations.
Photographers and video editors
Find the dominant colors of a scene to plan grading, pick title colors that match the footage, or keep a series visually consistent.
Interior, fashion and product design
Pull colors from a room, fabric or product photo and find coordinating shades. Use CMYK values as a starting point for print mockups.
Students and teachers
Learn how HEX, RGB and HSL relate by clicking colors and watching all values change together. It makes color theory concrete.
Accessibility reviewers
Test whether white or black text will be readable on a color before you commit to it, with an instant WCAG AA or AAA result.
Social media creators
Match thumbnails, banners and overlays to the dominant colors of your photos so every post looks designed.
How to use a picked color in your tools
Use a picked color in CSS
Copy the HEX or RGB value and use it as a property value, for example color: #4F63FF; or background-color: rgb(79, 99, 255);. For a theme, click Export CSS and paste the variables into your :root block, then reference them with var(--color-1).
Use a picked color in Tailwind CSS
Copy the HEX code and use an arbitrary value such as bg-[#4F63FF] or text-[#4F63FF]. To use it across a project, add it to the theme colors in your Tailwind configuration.
Use a picked color in Figma
Copy the HEX code, select a shape or text layer, open the Fill section and paste the code into the color field. Press Enter to apply it.
Use a picked color in Canva
Select an element, open the color picker, choose the option to add a new color, and paste the HEX code into the input box. Add it to your brand kit to reuse it.
Use a picked color in Photoshop or Illustrator
Open the foreground color picker and paste the HEX code into the # field. For print projects, convert to CMYK inside the app using your document profile.
Use a picked color in PowerPoint or Google Slides
Open the color menu for a shape or text, choose custom color, and paste the HEX code or enter the RGB values shown by this tool.
Tips for accurate color picking
- Use a PNG or a high-quality original. Heavy JPG compression adds color noise around edges and in gradients.
- Click the middle of a solid area, not an edge, where two colors blend together.
- Pick several points on one object and compare them. Real objects have highlights, midtones and shadows.
- Use Extract palette to find the overall dominant colors instead of guessing from one pixel.
- Check the contrast panel before using a color for text or buttons.
- Turn off night mode or color filters on your screen while picking, so the preview looks right.
- For print projects, treat CMYK as a starting point and proof with your printer.
- Keep your recent colors list in mind. Click Export CSS before loading a new image, because loading a new image clears the list.
Troubleshooting
My image will not load
Check that the file is an image and not a PDF or document. If it is an unusual format, open it in an image viewer and export it as PNG or JPG, then try again.
Paste does not work
Click on the page first, then press Ctrl+V (Cmd+V on Mac). Make sure you copied an image, not a file path or text. Some browsers block clipboard images on non-secure pages, so use the page over HTTPS.
Copy does not work
Browsers only allow copying after a click on a secure page. If copying is blocked, select the code on screen and copy it manually.
The color looks different in my design tool
Your design tool may use a different color profile, such as Display P3 or a print profile. Compare the numeric HEX values and not how they look on screen.
The tool seems slow on a big image
Very large photos take longer to draw and to extract a palette. Resize the image to under 4000 px wide and try again.
Privacy: your images stay on your device
All processing happens locally in your browser with the HTML canvas. No image data is sent to any server, so you can safely use client work, unreleased designs and personal photos. When you close or refresh the page, the image and your recent colors are cleared.
Color glossary
- Pixel
- The smallest dot of an image. Each pixel holds one color.
- HEX code
- A 6-digit base-16 code that starts with #. It stores red, green and blue as three pairs, for example #4F63FF.
- RGB
- A color model that mixes red, green and blue light, each from 0 to 255.
- HSL
- Hue, saturation and lightness. Hue is the color angle from 0 to 360, saturation is intensity, and lightness is how light or dark it is.
- CMYK
- Cyan, magenta, yellow and key (black). The ink-based model used for printing.
- Color palette
- A small set of colors chosen to work together in a design.
- Eyedropper
- A tool that samples the color of a single point, named after the dropper icon used in design software.
- WCAG
- Web Content Accessibility Guidelines, the international standard that defines minimum contrast for readable text.
- Contrast ratio
- A number from 1:1 to 21:1 that compares the brightness of two colors. Higher is easier to read.
- Quantization
- Grouping many similar colors into fewer representative colors, which is how a palette is extracted.
Frequently asked questions
How do I pick a color from an image?
Upload a photo, drag and drop it, or paste a screenshot with Ctrl+V. Then click or tap any pixel. The tool instantly shows the HEX, RGB, HSL and CMYK values of that exact spot, and you can copy any of them with one click.
Is this image color picker free?
Yes. It is completely free, needs no account or signup, and has no limit on the number of images or colors you can pick.
Are my images uploaded to a server?
No. The image is processed entirely inside your browser using the HTML canvas. It is never uploaded, stored or shared, so private photos, client work and unreleased designs stay on your device.
What color formats does it support?
HEX (for example #4F63FF), RGB (rgb(79, 99, 255)), HSL (hsl(231, 100%, 65%)) and CMYK (cmyk(69%, 61%, 0%, 0%)). Each has its own copy button, and Copy all gives you every format at once.
How do I find the HEX code of a color in a picture?
Click the color in the picture. The HEX code appears in the Color codes panel, for example #4F63FF. Press Copy to put it on your clipboard, then paste it into CSS, Figma, Canva or any design tool.
How do I get a color palette from a photo?
After uploading, click Extract palette. The tool samples the image, groups similar colors together, and shows the 5 most common colors that are clearly different from each other. Click any swatch to copy it.
Can I pick a color from a screenshot?
Yes. Take a screenshot, come back to this page, and press Ctrl+V (Cmd+V on Mac). The screenshot loads instantly with no saving or uploading needed.
Can I export colors as CSS variables?
Yes. Your recent colors are kept while you work. Click Export CSS to copy up to six of them as CSS custom properties such as --color-1: #4F63FF; inside a :root block.
Which image formats can I use?
PNG, JPG/JPEG, WebP, GIF, BMP and AVIF, as long as your browser can display them. For the most accurate colors, a PNG is best.
Does it work on iPhone and Android?
Yes. Open this page in Safari, Chrome or any modern mobile browser, then tap or slide across the image to pick a color. A small preview shows the color under your finger.
Do I need to install anything?
No. It runs in your browser on Windows, macOS, Linux, ChromeOS, iOS and Android. There is no extension, plugin or app to install.
Why is the picked color slightly different from what I expected?
JPG compression blends nearby pixels, and very large images are scaled down to 1200 px wide for speed. For the most exact value, use a PNG and click the center of a solid area. Your screen color profile and brightness can also change how a color looks.
Why do I get a different value on each click in the same area?
Photos contain noise, gradients, texture and compression artifacts, so neighboring pixels are rarely identical. Try several points and use the palette tool to see the dominant color of an area.
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX is a compact code used in CSS and design tools. RGB gives red, green and blue levels from 0 to 255. HSL gives hue (0 to 360 degrees), saturation and lightness as percentages, which makes colors easier to adjust by hand.
What is CMYK and when should I use it?
CMYK (cyan, magenta, yellow, black) is the color model used in printing. Use it as a starting point for print work. The value shown here is a simple mathematical conversion, so a printer may need a color-managed profile for exact results.
How do I convert a HEX code to RGB?
Split the 6-digit HEX into three pairs and convert each pair from base 16 to base 10. For #4F63FF, 4F is 79, 63 is 99 and FF is 255, so the RGB value is rgb(79, 99, 255). This tool does the conversion for you automatically.
What does the contrast ratio show?
It shows how readable white or black text would be on the picked color, using the WCAG formula. AA (4.5:1) is the usual target for body text, 3:1 is the minimum for large text, and AAA (7:1) is the strictest level.
What is a good contrast ratio for accessibility?
WCAG 2.x asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px regular or 18.66 px bold and above) at level AA. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
How are the 5 palette colors chosen?
The tool samples pixels across the image, groups similar colors into buckets, averages each bucket, ranks them by how often they appear, and then keeps only colors that are clearly different from ones already chosen. This avoids five near-identical shades.
Can I pick a color from a logo?
Yes. Logos usually have flat colors, so PNG or SVG-exported PNG files give very accurate results. Click the middle of each flat color area.
Can I use this to match paint, fabric or product colors?
It gives a good starting point from a photo, but lighting, camera settings and screen calibration change how colors look. For paint or print, confirm with a physical swatch or a color-matching service.
Does it work offline?
The picking itself happens in your browser, but you need an internet connection to load the page the first time. After it has loaded, picking colors from an image does not send any data to a server.
Can I use the colors commercially?
A color code is just a number, so you can use it freely. The image you pick it from may have its own license, and brand logos and brand colors can be protected as trademarks.
Is there a limit on image size?
There is no upload limit because nothing is uploaded. Very large images are scaled to 1200 px wide inside the tool for speed, which does not affect normal color picking.
How is this different from the eyedropper in Photoshop or Figma?
It does the same core job without any software, account or subscription. You open a page, drop an image and copy a code. Desktop tools offer more editing, but for quickly finding a color code this is faster.
Related color tools
Last updated: 2026-11-11