Color Extractor

Extract Any Colour From Any Image — Instantly

You see a gradient in a product photo and want to use those exact colours in a design. You find a screenshot of a website that has a colour scheme you love and want to replicate it. Your brand guidelines reference a photograph as the source of inspiration for the colour palette. In all of these cases, you need the actual HEX, RGB and HSL values of colours in an image — not an approximation, not a visually similar colour, but the exact pixel values. The ToollyX Color Extractor pulls the dominant colours from any uploaded image, sorted by how much of the image they occupy, and gives you all three format values for each with a single-click copy.

How Dominant Colour Extraction Works

The tool processes the uploaded image using a k-means clustering algorithm running in the browser. It samples pixels across the image, groups them into colour clusters based on visual similarity, and returns the centroid of each cluster as a colour. The number of colours you request (2 to 12) sets the number of clusters. At 6 colours, the algorithm divides the entire colour space of the image into 6 groups and returns one representative colour per group. The colours are then sorted by frequency — the colour occupying the most pixels appears first. This is why a photo taken on a blue-sky day returns blue as the dominant colour even if the primary subject is a person: the sky occupies more pixel area than the subject in most landscape-oriented outdoor shots.

HEX, RGB and HSL — When Each Format Is What You Need

Each extracted colour gives you three format values simultaneously. HEXis the format for CSS colour properties, design tool colour pickers (Figma, Sketch, Adobe XD all accept hex), HTML attributes and most modern workflow tools. RGB is needed for CSS rgb() functions, JavaScript canvas drawing code, Python image processing libraries, and any API that expects numeric colour channels. HSL is the format most useful for building tint and shade scales — once you have a colour in HSL, you can predictably lighten it (increase L), darken it (decrease L), desaturate it (decrease S) or shift its hue (change H) while keeping the perceptual qualities consistent. For CSS custom property systems and design tokens, HSL is the most controllable format to work with.

Setting the Colour Count — More Is Not Always Better

The number of colours to extract is a design decision, not a technical one. For a primary brand palette, 3-5 colours is the right target — enough for primary, secondary, accent and neutral, with one extra for variation. For analysing a photograph to understand its colour story, 6-8 colours gives a richer picture. At 12 colours, the algorithm produces very granular clusters — the difference between a slightly warm white and a slightly cool white will appear as two separate entries, which is useful for precise colour matching but noisy for palette design. For hero images and background photos, 5-6 colours gives the best palette that can be practically used in a UI. For detailed artworks and illustrations with intentional colour choices, 8-10 colours reveals the artist's palette more completely.

Practical Workflows — What to Do With Extracted Colours

CSS custom properties: Extract 5-6 colours from a brand photograph, copy each HEX value and set them as --color-primary, --color-secondary etc. in a :root block. This grounds the digital palette in the physical brand imagery. Figma/Sketch colour styles: Extract dominant colours from a reference image, create matching colour styles in your design tool, and use them throughout the design — the interface will feel visually connected to the photography. Gradient generation: Extract two or three adjacent colours from an image gradient and use them as the start and end stops of a CSS gradient to reproduce the photographic look in a clean geometric element. For deeper colour work once you have the values — converting between formats, building shade scales, picking related colours — the Image Color Picker complements this tool for pixel-level sampling versus dominant colour analysis.

Photographs vs Graphics — Different Inputs, Different Results

Photographic images produce more varied, subtle extracted palettes because photographs contain thousands of slightly different colour values even in areas that appear flat. A sky that looks uniformly blue contains hundreds of blue variants from deep indigo near the zenith to pale blue-white near the horizon. The k-means algorithm clusters these into a single representative blue, but the exact HEX value will be the centroid of all those variants, not the pure colour. Graphic design files with flat colour areas (logos, illustrations, UI screenshots) produce exact colour extraction — a flat red logo returns exactly the red used, with no interpolation. For these files, extracting colours with the count set to match the number of distinct colours in the design gives precise results.

Accessibility and Contrast Checking

Extracted colours are frequently needed for WCAG contrast checking — verifying that text placed over a photographic background meets the 4.5:1 contrast ratio for normal text or 3:1 for large text. Extract the dominant mid-tone from a background image, use the RGB value in a contrast checker, and test candidate text colours against it. This is more accurate than eyeballing the background colour because the extracted value represents the actual pixel data, not a visual estimate. When a photographic background has high colour variance, extracting 2-3 colours and testing all of them gives a conservative bound — if the text passes against the darkest extracted colour and the lightest, it is likely to pass across the entire image area. After building your colour palette, use the Image Filters tool if you need to adjust the source image's colour balance before re-extracting.

✓Verified by ToollyX Team · Last updated June 2026