How to Extract HEX, RGB and CMYK Colors From Any Image

When working on a website or UI, I often run into the same small problem: I see a color in a screenshot, photo, or reference image and need the actual value.

The three formats I use most often are HEX, RGB, and CMYK.

HEX

HEX is usually the most convenient format for web design.

For example:

color: #4A6B5A;

A HEX value can be copied directly into CSS, design systems, and frontend code.

RGB

RGB represents the red, green, and blue channels of a digital color.

For example:

color: rgb(74, 107, 90);

RGB is useful when working with screens, JavaScript color manipulation, and programmatic design tools.

CMYK

CMYK is mainly associated with print workflows.

It is worth remembering that converting a screen color into CMYK is only an approximation unless you are working in a properly color-managed print environment.

A simple workflow

For most web and design work, the process can be very simple:

1. Upload the source image.
2. Pick a color from the image.
3. Copy the HEX or RGB value.
4. Save useful colors as reusable design tokens.

For example:

:root {
  --primary: #4A6B5A;
  --secondary: #E6D7A8;
}

I ended up building a small browser-based tool for this workflow called ImageColorPickerAI.

It lets you upload an image, pick colors, and extract reusable HEX, RGB, and CMYK values directly in the browser.

While building it, I also became interested in something less technical: how different cultures name colors.

That led me to add traditional Chinese and Japanese color collections alongside the image color picker.

For example, a machine may only need:

#7AA8BE

But a person may find a traditional color name much easier to remember and understand.

That contrast became one of the more interesting parts of the project:

Machines need color coordinates. Humans often need color meaning.

The core image color picker is free to use and does not require sign-up.

I’d be interested to know what color formats other developers regularly use besides HEX and RGB.