The Image Color Picker helps you pick an exact color from a photo, screenshot, logo, or other image. Once you select a point, the tool shows the color in several useful formats, including HEX, RGB, HSL, HSV, CMYK, and OKLCH.

For more precise picking, you can zoom in and use the magnified preview to focus on a single pixel. This is especially helpful around edges, shadows, gradients, and compressed images, where several similar shades may appear very close together.

How to Use the Image Color Picker

1. Upload or paste the image you want to examine.
2. Zoom in on the area that contains the color you want.
3. Move your pointer over the image and use the magnifier to focus on the exact pixel.
4. Click the pixel to lock in the color.
5. Copy the value in the format you need.

If you are picking a color from a flat, solid area, a single pixel is often enough. Photos, screenshots, gradients, and textured surfaces can be a little different, so it helps to check a few nearby pixels before choosing the value that best represents the area.

Even a color that looks completely uniform can contain small variations from one pixel to the next.

Understanding the Available Color Formats

The same sampled color can be written in several different ways.

Format	Example	Common Use
HEX	#2F80ED	CSS, design systems, brand colors
RGB	rgb(47 128 237)	CSS, screen colors, channel editing
HSL	hsl(214 83% 56%)	Creating lighter, darker, or less saturated variants
HSV	hsv(214 80% 93%)	Color pickers and design applications
CMYK	Approximate print values	Print-oriented reference
OKLCH	oklch(...)	Modern CSS palettes and perceptual color adjustments

These formats describe color in different ways. Converting between them does not automatically create a different visible color, although some color spaces can represent ranges that others cannot.

HEX and RGB

HEX and RGB are two common ways to represent colors in the sRGB color space.

For example:

#FF0000

describes the same basic red as:

rgb(255 0 0)

HEX is short, familiar, and widely used in CSS and design tools. RGB can be easier to work with when you want to see the individual red, green, and blue channel values.

Some color formats can also include transparency through an alpha value. When transparency is involved, the final color you see on screen is affected by the background behind it, so the same color may appear slightly different on different backgrounds.

HSL Can Be Easier for Color Adjustments

HSL describes a color using:

• Hue — the general color family
• Saturation — how intense or muted the color is
• Lightness — how light or dark it is

This can make HSL convenient when creating variations of an existing color.

For example, you can keep roughly the same hue while reducing saturation for a muted version or changing lightness for lighter and darker states.

Keep in mind that equal HSL lightness values do not always look equally bright across different hues. If the color is being used for text, buttons, or other interface elements, check the actual contrast rather than relying on the numeric value alone.

Why OKLCH Is Useful

OKLCH is becoming more common in modern design systems because it separates color into three parts: perceived lightness, chroma, and hue.

That makes it easier to create palettes that feel visually balanced. For example, you can shift the hue while keeping the perceived lightness relatively consistent, which is harder to do reliably with HSL alone.

One thing to keep in mind is that some very vivid OKLCH colors can fall outside the range a particular screen can display. When that happens, the browser or display may adjust the color slightly to fit within its supported gamut.

Why Nearby Pixels Can Have Different Colors

Two pixels can look almost identical but still return different color values.

This usually happens because the image contains small variations caused by things like:

• antialiasing around text and shapes;
• shadows and highlights;
• gradients;
• image compression;
• texture;
• transparency; or
• resizing and interpolation.

For example, the edge of a blue logo on a white background may contain several lighter shades of blue created by antialiasing.

If you are trying to find the original brand color, sample from the solid center of the shape rather than from the edge. That will usually give you a cleaner and more accurate value.

Transparency Can Affect the Color You See

A partly transparent pixel blends with whatever sits behind it. Because of that, the color stored in the foreground and the color you actually see on screen may be different.

For example, a semi-transparent black layer placed over a white background can appear gray, even though the foreground color itself is still black.

If you are trying to match the final appearance of a screenshot or image, the blended color may be the value you want.

If you are recreating the original design layer, though, you may need the foreground color and its transparency value separately.

How to Pick a Representative Color From a Photo

Photos rarely contain one perfectly flat color. Even areas that look uniform can include subtle changes caused by lighting, texture, shadows, and reflections.

If you are trying to identify the color of a wall, fabric, product, skin tone, sky, or another textured surface, avoid relying on the first pixel you click.

Instead, sample a few different points, such as:

• a brighter area;
• a midtone;
• a darker area; and
• the area that looks most representative under neutral lighting.

In many cases, the midtone gives you a more useful overall reference than the brightest highlight or deepest shadow.

For design work, you can also save several nearby samples and compare them before choosing the color that best represents the image.

Using the Tool to Match a Website Color

If you have access to the website’s code, checking the actual CSS color is usually more accurate than picking a color from a screenshot.

Pixel sampling is more useful when:

• you cannot access the original CSS or design token;
• the color appears inside an image;
• transparency or blending changes how the color looks; or
• you want to match the color that is actually visible on screen.

Be especially careful when sampling the edges of text, icons, or shapes. Antialiasing can create intermediate shades that were never defined directly in the CSS.

Building a Palette From an Image

Instead of clicking lots of random points, start by identifying a few clear color roles in the design.

For example, you might pick:

• the main background or surface color;
• the primary text color;
• the main brand or accent color;
• a secondary accent;
• a border or muted color; and
• any state colors you need, such as success, warning, or error.

If you already have access to an official brand color, use that value rather than trying to recreate it from a compressed logo or screenshot.

The image picker is most helpful when the original color value is unavailable, or when you specifically want to capture the color as it appears after rendering on screen.

General mistakes to avoid

Sampling an antialiased edge

The edges of text, icons, and shapes often contain blended pixels created by antialiasing.

If you want the original color, avoid sampling right on the edge. Move slightly inward and pick from a solid part of the shape or letter instead.

Assuming one photo pixel represents the whole object

Objects in photos rarely have one exact color. Lighting, shadows, texture, reflections, and camera processing can all create small variations across the same surface.

Take a few samples from different parts of the object, then choose the value that best fits what you are trying to achieve.

Ignoring transparency

Transparent and semi-transparent pixels can look very different depending on the background behind them.

Before choosing a value, decide whether you need the original source color or the final blended color that appears on screen.

Treating CMYK as a finished print conversion

A CMYK value converted from an on-screen RGB color is useful as a reference, but it should not automatically be treated as a print-ready specification.

Printed color can vary depending on the color profile, printer, ink, paper, and production process. For professional print work, use the specifications provided by your printer or design workflow.

Choosing colors without checking contrast

A color can look good on its own but still be difficult to read when used for text, buttons, or other interface elements.

Always test important foreground and background color combinations in the place where they will actually be used.

Color management and screenshots

The picker returns the numeric value of the decoded pixel you select, but that does not mean the color will look identical on every screen.

Display quality, calibration, browser processing, embedded color profiles, and wide-gamut images can all affect how a color appears.

Because of this, two people can view the same color value on different displays and see slightly different results.

When accurate brand or print color matching is important, use the original design specification or a properly managed color workflow whenever possible.

Continue the image workflow

After finding the color you need, you can use the Image Cropper to adjust the composition and remove unwanted parts of the image.

If you are preparing website branding, the Favicon Generator can turn a logo or symbol into favicon files for browser tabs, bookmarks, and app shortcuts.

Before making permanent edits or exporting new versions, keep an untouched copy of the original image. It gives you a clean source to return to if you need to make changes later.

FAQ

Pick the Color That Matches the Job

An Image Color Picker can give you the exact value of a pixel, but the first pixel you click is not always the best one to use.

Zoom in when you need precision, avoid blended edges, and compare a few nearby samples when working with photos, gradients, or textured surfaces. If you are building a color palette, focus on the role each color will play instead of collecting every small variation you find.

The numeric value gives you accuracy, but choosing the right pixel is what makes that value useful.

For more details about HEX, RGB, HSL, and other CSS color formats, see MDN’s documentation on CSS color values.