Color Picker from Image — Get HEX and RGB Color Codes

Upload any JPG, PNG, WebP or GIF and click anywhere on the displayed image — the exact pixel under your cursor is sampled and shown as HEX, RGB and HSL with one-click copy for each format. Useful for matching a brand color, sampling a swatch from a photograph, or grabbing accent tones from a design mockup.

Click any pixel and this color picker tool shows its HEX color code (for example #FF6B35) alongside RGB and HSL — the same HTML/CSS color codes you paste straight into a stylesheet, design token or HTML attribute. Hit Copy to grab the hex code in one click.

The image is downsampled to 320 pixels on its longest side, then each pixel is bucketed by its top 4 bits per channel. The most-populated buckets are averaged back to full 8-bit color, sorted by frequency, and returned as your palette. The result is typically 5-24 dominant colors that visually summarise the image.

Yes. The Download buttons produce two formats: a CSS variable block ready to paste into a :root selector (--color-1, --color-2…), and a JSON file with hex, RGB components and weight percentage for each color. Both formats integrate cleanly into design tokens, Tailwind configs, and palette libraries.

No — color picking and palette extraction happen entirely in your browser using the HTML canvas API. The image stays on your device, which makes the tool safe for unreleased product photos, draft mockups, and brand assets under NDA.

For brand identity work, 5-8 colors is the sweet spot — it captures the dominant theme without diluting accent choices. For data visualisation we recommend 10-16 colors so you have enough categorical hues. The Size menu offers 5, 8, 10, 16 or 24 colors.

Nearly transparent pixels (alpha below 32) are ignored, so transparent backgrounds do not pollute the palette with "background" colors. This makes Image Color Picker especially good for product cutouts, sticker artwork and isolated subjects.

HEX (#RRGGBB) is the most compact and is what CSS, Figma and Sketch use by default. RGB shows the three component values from 0-255 — useful when working with image data programmatically. HSL (hue, saturation, lightness) is intuitive for adjusting colors: shift hue to change the color family, adjust lightness for tints and shades.

Yes. It runs in the browser and needs no account. There is nothing to install and no limit on the number of palettes you inspect.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic (four colors spaced 90 degrees apart) and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

In the standalone Color Picker & Wheel, dial in your color and the panel shows its contrast ratio against pure white and pure black along with the WCAG rating — AAA, AA, AA Large, or Fail. Use this before finalizing a text or button color so it stays readable and meets WCAG 2.1 accessibility guidelines.

Yes. The standalone Color Picker & Wheel shows the closest matching named CSS color next to whatever HEX, RGB or HSL value you've dialed in, which is handy for quickly describing a shade in a brief, ticket or design spec without guessing.

Click Random in the Color Picker & Wheel to jump to a new color, then use the Color harmonies panel below it to see complementary, analogous, triadic and other coordinated palettes built from that color — a quick way to find a starting point when you're designing from scratch rather than sampling an existing image.

Use the Size dropdown above the palette to choose 5, 8, 10, 16 or 24 dominant colors — the palette recalculates instantly as you change it. Combine a small size like 5 for a clean brand palette with the picked-color eyedropper to grab one or two exact accent shades the automatic extraction might average away.

Yes — the standalone Color Picker & Wheel shows your current color's contrast ratio against pure white and pure black right under the swatch, labelled AAA, AA, AA Large or Fail per the WCAG thresholds (7:1, 4.5:1, 3:1). Use it to check a text/background pairing meets accessibility standards before you lock in a design color.

The Color Picker & Wheel automatically matches whatever color you've dialed in — via the picker, HEX box, or RGB/HSL fields — to its closest standard CSS color name, shown as 'Closest name' next to the swatch. It's a quick way to describe a color verbally or find its nearest web-safe equivalent.

Yes — every click or tap on the uploaded image adds a new swatch to your Picked Colors list rather than replacing the last one, so you can build up a custom set of exact pixel colors from different parts of a photo. Remove any single swatch with its × button, or clear the whole list with Clear picked.

Yes — the Random button (shuffle icon) in the Color Picker & Wheel jumps to a new hue, saturation and brightness combination in one click, useful for breaking creative block or exploring a palette you wouldn't have typed in manually. HEX, RGB, HSL and the harmony swatches below all update together.

On a touchscreen, drag your finger across the image to preview the color under it in a live floating swatch, then lift your finger to add that exact pixel to your Picked Colors list — no separate confirm tap needed. The same palette-size dropdown and export buttons work identically on mobile.

Yes. The color wheel at the top of the page has a Random button that jumps to a random color and instantly shows its HEX, RGB and HSL codes, its closest named color, contrast ratios on white and black, and full harmony sets — complementary, analogous, triadic, split complementary, tetradic and monochromatic. It is a fast way to explore starting points for a palette.

This tool samples colors from an uploaded image or from the built-in color wheel rather than reading your live screen. The quickest workaround for a screen color picker: take a screenshot, drop it onto the page, and click the exact pixel you want — you get the same HEX, RGB and HSL codes without installing an extension, and the screenshot never leaves your browser.

Yes — Pixoate supports batch and bulk processing. Switch to Batch mode, add up to 60 images on Premium or 200 on Pro, set your options once, and every image is processed with the same settings before you download one spreadsheet — a palette row per image. Bulk processing is a Premium feature; the output uses the same quality and settings as single mode.

Yes — with bulk processing you configure the settings a single time and they apply to every item in the batch — up to 60 images on Premium or 200 on Pro. There is no need to repeat the setup per item, and Palette extraction runs in your browser; only the finished spreadsheet is saved for download.

Almost always one of three things. The file is over the 20 MB free upload limit — Premium takes 50 MB and Pro 120 MB. The format is not one this tool accepts, so check the list shown on the upload panel. Or the file is not really the format its name says: renaming a file does not change what is inside it, and that is the reason a valid-looking image gets refused.

Check the input first: a sharp, well-lit original that has not been through a messaging app gives the best result. Then review the settings on the page, change one at a time and run it again — nothing is locked in until you download.

Color Picker supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Premium supports batches of up to 60 files, with the applicable plan limits shown before processing.

No — Color Picker runs in the browser on desktop and phone. There is nothing to install, no trial to start, and no license to buy before you can see whether it does what you need. Try it on the file you are actually stuck with rather than a sample.

The box takes a 3-digit or 6-digit HEX code with or without the #, an rgb() or rgba() value, an hsl() or hsla() value, or a CSS color name such as tomato. An 8-digit HEX code is accepted too, and the alpha part of it, of rgba() and of hsla() is dropped, so the output is always an opaque HEX, RGB or HSL value. Values written with a deg unit are not read.

A fully transparent pixel has no color of its own, and the reading comes back as #000000. Click a visible part of the image instead. If you only need the artwork colors, extract the palette, which skips transparent pixels instead of reporting black.

The tool reports the pixel exactly as your browser decodes the file. Compression, lighting in a photo, a screenshot or a changed color profile can shift a color away from the official value. Pick from a clean logo file in a flat area, or use the published brand code.

Each percentage is the share of the visible pixels that fall into that color group, measured on a copy of the image reduced to at most 320 pixels on its longest side. Similar shades are merged into one group, so the figures are approximate and add up to less than 100 when you ask for few colors.