Image Color Picker

Color is one of the hardest things to get right by eye and one of the easiest to get right with the correct tool. Whether you are matching a brand, building a website theme, designing a slide, or just curious what shade that sunset really is, the answer is already sitting in the image — you just need to read it precisely. This guide walks through every way to work with the colors in an image, from grabbing a single hex code to building an exportable palette, and the tool on this page does all of it in your browser.

Picking a single color (the eyedropper)

The most common task is lifting one exact color out of a picture: the blue in a logo, the background of a screenshot, the accent in a photograph. An eyedropper does this by reading the pixel directly, so the value you get is the true color rather than something your eye approximated.

To pick a color, open your image and move the pointer over it. The hex value follows your cursor so you can see colors update in real time. When you find the one you want, click it — the tool locks that color and shows it in three formats at once:

• HEX — a compact six-digit code like #4F46E5, used everywhere on the web and in design apps.
• RGB — the red, green, and blue channels (rgb(79, 70, 229)), common in editors and code.
• HSL — hue, saturation, and lightness (hsl(245, 76%, 59%)), which is the easiest format to reason about when you want a slightly lighter or more muted version of a color.

Each value has a one-click copy button, and your recent picks are kept in a small strip so you can collect several colors without losing earlier ones. On a phone, tap instead of hover.

Building a color palette

A palette is the small set of colors that represents an image as a whole — the foundation of a brand kit, a website theme, or a moodboard. Rather than picking ten colors by hand, the palette extractor analyses the whole picture and returns the most representative colors automatically.

It works by k-means clustering: every sampled pixel is grouped with the colors most like it, and each group’s average becomes one swatch. The swatches are sorted by how much of the image they cover, and each one shows its percentage share, so you can immediately see which colors dominate and which are accents. You choose how many colors you want, anywhere from two to twelve.

When the palette looks right, export it in whatever form your workflow needs:

• A PNG swatch sheet with the hex codes baked in — perfect for dropping into a document or sharing in chat.
• A block of CSS custom properties (--color-1, --color-2, …) you can paste straight into a stylesheet.
• A JSON file listing hex, RGB, HSL, and the share of each color, for use in code or design tooling.

Dominant and average color

Sometimes you need just one color to represent an image — to tint a card behind a thumbnail, set a matching background, or tag photos by color. There are two ways to compute that one color, and they give very different results.

The average color blends every pixel into a single value. It is simple, but on a colorful image it often looks muddy because bright and dark pixels cancel each other out. The dominant color instead finds the single largest cluster of similar pixels, so it stays vivid and usually matches what your eye reads as the image’s main color. The tool shows both side by side so you can choose the right one — dominant for a result that looks like the image, average for a soft, neutral tint.

Reading the histogram

A histogram plots how many pixels fall at each brightness level, from black on the left to white on the right. It is the most objective way to judge a photo’s exposure and contrast, because it does not depend on how bright your screen happens to be. This tool draws a curve for each of the red, green, and blue channels plus an overall luminance line.

Pixels piled against the left edge mean crushed shadows; pixels piled against the right mean blown highlights. A balanced photo generally spreads across the range. The per-channel view also reveals color casts — if the red curve sits well to the right of the others, the image leans warm; a raised blue curve leans cool.

Checking for color blindness

Around one in twelve men has some form of color vision deficiency. If your charts, maps, or interface rely on color alone to carry meaning, a real portion of your audience may miss it. The colorblind simulator re-renders an image as it would appear with protanopia or deuteranopia (the common red–green deficiencies) or tritanopia (a rarer blue–yellow one).

If two categories become hard to tell apart in any simulation, the fix is to add a second, non-color cue — a label, an icon, a pattern, or position. Color should reinforce meaning, never be the only thing carrying it. You can export the simulated image to share the issue with a teammate.

Recoloring and replacing colors

Two modes actually change the image. Recolor shifts the hue, saturation, and lightness of the whole picture with live sliders — rotate every color around the wheel to match a new brand color, mute a busy photo, or brighten a flat one. Because it rotates hue rather than painting over pixels, shading and texture are preserved.

Replace color swaps one specific color for another. You set the target by clicking it in the image (far more accurate than guessing a code), choose the replacement, and tune a tolerance slider so similar shades are included. The edge of the match is feathered so the swap blends in. Both modes preview live and export at full resolution as PNG, JPG, or WebP.

A note on privacy

Color picking, palette extraction, histograms, and the recolor and replace edits all happen in your browser, so the values you copy and the images you export are created on your own device. How any data associated with the tool is handled is described in our privacy policy. For anything highly sensitive, an offline desktop tool is always the most private option.

Between the eyedropper, the palette extractor, dominant and average color, the histogram, the colorblind simulator, and the recolor and replace tools, you have everything needed to read and reshape the colors in any image — quickly, precisely, and for free.