--- title: "Color Code Extractor - Extract dominant Hex colors from images | Web ToolBox" description: "Extract dominant colors from images and list them as Hex codes. You can adjust how nearby colors are grouped by hue, saturation, lightness, and overall distance when building a palette." canonical_url: "https://web-toolbox.dev/en/tools/color-extractor" meta: author: K "og:description": "Extract dominant colors from images and list them as Hex codes. You can adjust how nearby colors are grouped by hue, saturation, lightness, and overall distance when building a palette." "og:image": "https://web-toolbox.dev/og/en/tools/color-extractor-a609c37e.png" "og:image:alt": "Color Code Extractor" "og:image:height": "630" "og:image:width": "1200" "og:title": "Color Code Extractor - Extract dominant Hex colors from images | Web ToolBox" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Color Code Extractor** Extract dominant colors and show them in Hex **Image file** **Drag & drop file here** OR ## **Color extraction options** Color distance Groups nearby colors together more easily. Hue distance Controls how far hues can differ before they are treated as separate colors. Saturation distance Groups colors with similar saturation more easily. Lightness distance Groups colors with similar lightness more easily. Upload an image to see the extracted colors here. ## **Preview** ## 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: ```text #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 **How was your experience?** Last updated: April 2, 2026 ### **Related Tools** - [

**Color Eyedropper**

](https://web-toolbox.dev/en/tools/color-eyedropper) - [

**Color Contrast Checker**

](https://web-toolbox.dev/en/tools/color-contrast-checker) - [

**Color Code Converter**

](https://web-toolbox.dev/en/tools/color-converter) - [

**Tailwind Color Palette Generator**

](https://web-toolbox.dev/en/tools/tailwind-color-palette) - [

**Heading Extractor**

](https://web-toolbox.dev/en/tools/heading-extractor) - [

**Suggest Keyword Extractor**

](https://web-toolbox.dev/en/tools/suggestion-extractor) - [

**Video Frame Extractor**

](https://web-toolbox.dev/en/tools/video-frame-extractor) - [

**ASCII to HEX Converter**

](https://web-toolbox.dev/en/tools/ascii-to-hex) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/color-extractor#webpage","@type":"WebPage","description":"Extract dominant colors from images and list them as Hex codes. You can adjust how nearby colors are grouped by hue, saturation, lightness, and overall distance when building a palette.","name":"Color Code Extractor - Extract dominant Hex colors from images","url":"https://web-toolbox.dev/en/tools/color-extractor","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/color-extractor"]}]},{"@id":"https://web-toolbox.dev/en/tools/color-extractor#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Extract dominant colors from images and list them as Hex codes. You can adjust how nearby colors are grouped by hue, saturation, lightness, and overall distance when building a palette.","name":"Color Code Extractor - Extract dominant Hex colors from images","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.