What is Color Code Extractor?

Color Code Extractor is a tool for pulling the main colors out of an image and listing them as Hex codes. It groups nearby colors into a simpler palette, which makes it useful when you want to build a color reference from a photo, banner, or screenshot.

It is handy for creating a starter palette, reviewing the dominant colors in a visual, or collecting reference colors for UI and branding work.

How to Use

1. Upload an image file.
2. The extracted colors appear as a list of Hex codes.
3. Adjust the extraction options if needed.
4. Copy one color at a time or copy the whole list at once.

Because the results update as you move the sliders, it is easy to compare a more detailed palette with a more grouped one.

Main Settings

Color Distance

This controls how aggressively similar colors are grouped overall. Higher values merge nearby colors more readily and usually reduce the number of extracted colors. Lower values keep more fine-grained color differences.

Hue Distance

This adjusts how much difference in hue should still count as the same group. Increase it when you want nearby hues to merge more easily, and lower it when you want hue shifts to stay separate.

Saturation Distance

This controls how much difference in saturation can be merged. It is useful when colors feel similar in hue but vary mainly in vividness.

Lightness Distance

This controls how much difference in brightness can be merged. Raising it can simplify highlights and shadows into a more compact palette.

Input and Output Example

For example, if you upload an image of blue sky and white clouds, the extracted result might look like this:

#5FA8FF
#A9D2FF
#F7FAFF
#C9CED6

You can copy a single swatch or copy the full list for notes, design tokens, or palette drafts.

Use Cases

• Building a palette from a photo or banner image
• Reviewing dominant colors from a screenshot of a reference site
• Quickly checking the overall color balance of an illustration or UI mockup
• Collecting candidate colors for branding or theme work

Things to Keep in Mind

• The result is a grouped palette, not a raw list of every pixel color in the image
• Slider values can change the output a lot, so starting from the defaults is usually the easiest approach
• Transparent images or compressed images can produce extra swatches that come from edges or compression noise