How to get a color palette from an image (and exact hex codes)

A photo of a sunset, a product shot, or a client’s logo often holds the colors you want for a slide, a website, or a brand sheet. The hard part is turning “that warm orange in the sky” into something a design tool or a stylesheet understands: a number. This guide explains what those numbers mean, how a palette tool decides which colors matter, and how to use the result well.

What does “color palette from image” actually mean?

There are two different jobs hiding behind the phrase, and it helps to keep them apart.

• Dominant colors. A summary of the whole picture: the handful of colors that cover the most area. Useful for mood boards, picking a background that suits a photo, or a quick theme.
• An exact color. The value of one specific spot, such as the red of a logo or the blue of a button in a screenshot. This is what an image color picker (an eyedropper) does.

Image Edtr’s color palette tool does both on the same screen. The palette appears as soon as the image opens, and the image itself works as an eyedropper.

How to get colors from an image in Image Edtr

1. 1

   Choose an image

   Drop a JPEG, PNG, WebP, GIF, BMP, or AVIF file onto the page, or pick one from your device. It is decoded in your browser and never uploaded.

2. 2

   Read the dominant colors

   Under Dominant colors you’ll see up to eight swatches, each with its hex code and the percentage of the image it represents.

3. 3

   Sample an exact pixel

   Click or tap anywhere on the image. The color of that pixel appears under Sampled color.

4. 4

   Copy the hex code

   Select Copy next to any swatch to put its hex code, such as #3a6ea5, on your clipboard.

Hex, RGB, and HSL: how screens describe color

Almost every image you’ll open is stored as a grid of pixels, and each pixel has three channels: red, green, and blue. In a typical 8-bit image each channel holds a whole number from 0 to 255. Mixing them like light gives 256 × 256 × 256, or about 16.7 million, possible colors.

A hex code is the same three numbers written in base 16. #RRGGBB has two digits per channel, from 00 (0) to ff (255). So #ff0000 is full red with no green or blue, #ffffff is white, and #808080 is a middle gray. Converting RGB to hex is just converting each channel: rgb(58, 110, 165) becomes 3a, 6e, a5, which is #3a6ea5.

HSL describes the same colors differently, as hue (an angle around the color wheel), saturation, and lightness. It doesn’t store anything new; it’s easier for people to reason about. If you want a lighter version of a sampled blue, raising its lightness in HSL is more intuitive than guessing new RGB numbers.

All three are valid CSS color values, along with newer ones such as oklch(). The MDN reference for the CSS color type lists every form browsers accept.

How does a tool find the dominant colors of an image?

A 12-megapixel photo has twelve million pixels, and almost no two are exactly the same. Listing “the most common color” of the raw pixels would be meaningless, because the top result might cover a few dozen pixels. A palette tool has to group similar colors first. Here is exactly what Image Edtr does:

1. Scales the image down so its longest side is at most 200 px. Dominant colors are about large areas, so a small copy is enough, and it keeps the work fast on phones.
2. Ignores mostly transparent pixels, so the empty area around a logo on a transparent PNG doesn’t count as a color.
3. Groups pixels into buckets by keeping the first 4 bits of each channel. That gives 16 levels per channel and 4,096 possible buckets. Colors that differ only slightly land in the same bucket.
4. Averages each bucket, so the swatch shows the typical color of that group rather than its corner value.
5. Sorts buckets by size and walks down the list, skipping any color that is very close to one already chosen, until it has eight distinct colors or runs out.

The percentage beside each swatch is that bucket’s share of all the opaque pixels. Because near-duplicates are skipped rather than merged, the percentages usually add up to less than 100%. A smaller number doesn’t mean a color is unimportant, only that its exact shade is spread across fewer pixels.

How to find the hex code of one color in a picture

When you need an exact value, such as matching a brand color from a logo file, the eyedropper is the right tool. Image Edtr reads the pixel you click from the full-resolution image, not the 200 px copy used for the palette, so small details are sampled accurately.

A few habits make the result more reliable:

• Use the cleanest source you have. An original PNG or SVG export of a logo beats a screenshot of a web page, which beats a JPEG that has been shared through a chat app several times.
• Avoid edges. Pixels along the border of a shape are blended with the background (anti-aliasing), so they sit between the two colors.
• Sample a few spots. JPEG compression and camera noise make neighboring pixels differ slightly. Click two or three places in a flat area and pick the value that repeats, or the one that looks right.
• Expect photos to vary. A red car in sunlight is dozens of reds, from highlight to shadow. There is no single “correct” hex code; choose the one that represents what you want.

Why the same color can show different values

It’s common to sample a color in two apps and get two slightly different hex codes. That’s rarely a bug. The usual causes are:

For web work, values within a couple of steps of each other per channel are almost always indistinguishable by eye. Pick one, write it down, and use that value everywhere so your design is at least consistent with itself.

Using an extracted palette in design and CSS

A raw list of eight colors isn’t a palette yet. It becomes one when each color has a job. A simple, durable structure for a page or a slide deck:

• One or two neutrals for backgrounds and body text. Photos often supply a warm or cool off-white and a deep near-black; these feel related to the image without competing with it.
• One primary color for links, buttons, and focus states. Pick a mid-saturation color from the palette that stands out against your background.
• One accent, used sparingly for highlights or badges. This is often the small, vivid color you sampled with the eyedropper.

In CSS, store the colors once as custom properties and refer to them by role, not by hue. Then changing the theme later is a one-line edit:

:root { --color-bg: #f6f1ea; --color-text: #2b2420; --color-primary: #3a6ea5; --color-accent: #e07a3f; } and then a { color: var(--color-primary); }.

You’ll often want more shades than the image provides: a hover state slightly darker than the primary, a subtle tinted background, a border that sits between background and text. Build these from your chosen colors rather than sampling more. Keep the hue in hsl() the same and move lightness up or down in even steps, and the set will look related because it is. The newer oklch() notation does the same job with steps that look more even to the eye across different hues.

Check contrast before you commit. Text needs enough contrast against its background to be readable; the common accessibility guideline (WCAG) asks for at least 4.5:1 for normal body text. Colors pulled from a photo are often mid-tones that look lovely as swatches but fail as text colors, so you may need a darker or lighter variant. Adjusting lightness in hsl() is the easiest way to make one that still belongs to the family.

Getting better palettes from your photos

Because the palette reflects area, you can steer it by changing what the image contains:

• Crop to the part you care about. If a wide shot is mostly sky, the palette will be mostly blue. Crop to the subject first with the crop tool, then open the crop in the palette tool.
• Use a transparent background for logos. Transparent pixels are ignored, so a logo on transparency gives you only the logo’s colors instead of a large white share.
• Don’t pre-filter unless you mean to. Boosting saturation or applying a filter changes the colors the palette finds. That’s useful when you want a bolder theme, but sample the original if you need faithful values.

If you want to see how edits shift the colors, the guide on adjusting brightness and contrast explains what each slider does to pixel values.

Is it private to extract colors from a photo here?

Yes. The image is decoded and analyzed by your browser on your device. It isn’t sent to a server, and nothing about it is stored after you close the page. That makes the tool fine for unreleased designs, client work, or personal photos. The privacy page describes exactly what the site does and doesn’t collect.