Image Color Picker
& Palette Generator.
Find a shade in your image. Build a palette around it. Check contrast, try color harmonies, and take your colors straight into your next design.
Loading editor… If this message remains, reload the page and check that JavaScript is enabled.
01 / Start with an image
See something you like? Pick it.
Or drop / paste an image here.
JPEG, PNG or WebP · up to 20 MiB and 12 MP
All processing stays in this page.
Click the image or use arrow keys; hold Shift for 10 px steps. Area averages use available pixels near edges. Color-profile conversion and browser decoding can affect values.
Extract a representative palette
Replaces the palette; Undo restores it. Extraction samples and averages colors, so it is approximate and may return fewer colors. Background is set in the color panel.
02 / Make it your color
Selected color
- HEX
- RGB
- HSL
- HSV
- Opacity
HEX opacity uses 8-bit precision. HSL values are rounded for display. The editable value uses RGBA when needed to preserve opacity when you press Apply again. HSV is a numeric design reference, not CSS syntax.
Screen sampling starts only when you choose it, in a browser that supports EyeDropper.
Keep the colors that work together.
Click a swatch to select it. Edit the current color, then choose Replace selected color. Text and Background buttons send a swatch to the contrast checker.
Harmonies replace the palette and use HSL relationships. They do not guarantee contrast or aesthetic suitability. Undo restores the previous palette.
Create tints and shades
Replaces the palette using sRGB channel mixing. Opacity is preserved. Steps are not perceptually uniform; check each color for contrast.
Import a list of colors
The entire list is checked before any change. Undo restores the old palette.
Save before leaving. JSON palettes contain colors only, without the original image or contrast settings. Maximum 24 colors and 32 KiB per project.
Turn this palette into a gradient
Is your text easy to read?
A little contrast goes a long way.Use this preview to judge your color pair, then review the actual text size, weight and background in your design.
WCAG 2.2 color-pair checks only. Large text generally means 18pt regular or 14pt bold. The 3:1 non-text result applies where the criterion requires it. A pass is not a complete accessibility audit. Gradients, photographs, focus states and surrounding colors require separate checks.
Transparency is composited over the opaque canvas color above. Contrast results use sRGB relative luminance and the unrounded ratio; the displayed ratio is rounded.
Sample it. Shape it. Use it.
Pick with intention
Use one pixel for a specific shade, or an area average for a noisy photo. Transparent pixels keep their opacity. Switch to the sample image to learn the controls.
Make a usable palette
Extract representative colors, add accents, try a harmony and arrange swatches. Save the palette so you can return without losing the colors.
Check and export
Test your text/background pair, copy a gradient or export CSS for a website. Download a swatch board for discussion with a designer.
Designed for screen colors
This tool works with browser-decoded sRGB image data. It does not provide calibrated print measurements, exact CMYK separations, Pantone matches or an accessibility certification. Palette extraction is an estimate; manual sampling is the better choice for a particular pixel.
For related tasks, use Image Converter, Resize Image, Photo Collage & Image Combiner or Batch Image Watermark.
Calculation reference: W3C WCAG 2.2. Image behavior: Canvas image pixel data. Guidance reviewed September 30, 2026.
Frequently asked questions
How do I pick a color from an image?
Choose or drop a still JPEG, PNG or WebP image, then click a pixel. Use arrow keys for one-pixel movement or Shift plus an arrow for ten pixels. You can also enter zero-based x/y coordinates. Zoom helps inspect small details; the original image is not resized.
Are picked colors exact?
Single-pixel mode reads the browser-decoded sRGB pixel at the selected coordinate. Color profiles, decoding, premultiplied alpha and the display can affect what you see. This is not a print or Pantone measurement. Area samples are alpha-weighted averages; they are not the value of one pixel.
Is automatic palette extraction exact?
No. It samples a bounded grid, groups nearby RGB values and uses deterministic median-cut clustering to estimate representative colors. Small accents can be missed and some colors are averaged. Use the pixel picker when you need a particular pixel. A simple image may produce fewer colors than requested.
How are transparent pixels handled?
Pixel samples retain opacity. Palette extraction can use only fully opaque sampled pixels, or composite all sampled pixels onto your chosen background. The latter includes transparent areas as background color. Contrast calculations composite the foreground over the background and then the background over the opaque canvas color.
Which files and sizes are supported?
Use one still JPEG, PNG or WebP at a time, up to 20 MiB, 12 million pixels and 8,192 pixels per side. Animated images, GIF, SVG and HEIC inputs are rejected. Convert or resize unsupported images first. Actual memory limits can be lower on your device.
Does the contrast checker prove accessibility compliance?
No. It calculates the WCAG 2.2 contrast ratio for a flat sRGB color pair. Normal text uses 4.5:1 for AA and 7:1 for AAA; large text uses 3:1 and 4.5:1. Large text generally means 18pt regular or 14pt bold. Non-text color pairs use 3:1 where applicable. Other accessibility requirements, exceptions, images and gradients need separate review.
Which color formats can I enter?
Enter 3-, 4-, 6- or 8-digit HEX; RGB/RGBA or HSL/HSLA with commas or spaces and slash alpha; modern HWB; or transparent. Hue supports degrees, turns, radians and gradians. Channels must be in range; named colors, relative colors and CSS expressions are not supported. HEX alpha uses 8-bit precision; HSL and HSV display values are rounded.
What can I export?
Save up to 24 colors as an editable JSON palette, CSS variables, CSV, GIMP GPL, an SVG strip or a PNG swatch board. Transparent colors are composited onto the chosen background for GPL and the PNG board. Also copy palette codes or a CSS gradient and download a contrast report.
Are my image and colors uploaded?
Image bytes and color values are processed locally by this tool and are not uploaded or saved automatically. Palette projects contain colors only, not the image. The website can still load its normal analytics and feedback services; this tool does not send your image or entered values to them.
Why is screen sampling unavailable?
Screen sampling uses the browser EyeDropper API, which is available only in some browsers and contexts. It starts only after you press the button and choose a screen pixel. Image picking and manual color entry remain available without this API.
Can I restore changes or continue later?
Undo and redo keep up to 30 palette edits during the current page session. Save a palette JSON file before leaving, then reopen it later. Images, selected pixels and contrast settings are not included in the palette file. Cancelling an image load may need to wait for its decoder to finish.