Every designer and developer working with photography, brand assets, or UI components frequently needs to extract exact colour values from images. What shade of blue is that brand's logo? What are the dominant colours in this hero photograph? Which hex code matches the warm orange in this illustration? Without a colour extractor, you are left guessing or spending time in Photoshop/Figma eyedroppers. The Utility Spark Image Colour Extractor analyses any uploaded image directly in your browser and returns the dominant colour palette: hex codes, RGB values, and HSL values for the top colours by frequency and visual prominence. The image is processed using the HTML5 Canvas API — pixels never leave your browser, making it safe to use with client images, copyrighted assets, or brand materials.
lightbulb When to use this tool
- check_circle Extracting brand colours from a logo PNG to build a design system or CSS colour palette.
- check_circle Identifying the dominant colours in a product photograph to create a matching UI palette.
- check_circle Getting exact hex codes from a design reference image when the source file is unavailable.
- check_circle Building a colour palette for a website redesign that harmonises with the client's existing imagery.
Why use our tool?
Hex, RGB, and HSL — All Three Formats
Each extracted colour is shown in all three formats simultaneously. CSS accepts hex (#3B82F6), RGB (rgb(59, 130, 246)), and HSL (hsl(217, 91%, 60%)). Copy whichever format your codebase or design tool uses.
Canvas API — Zero Upload
The image is loaded into an HTML5 Canvas element in your browser. The pixel data is read using getImageData() locally. Your image — which may contain confidential client work or copyrighted material — never makes a network request.
Dominant Colours by Frequency
The tool groups similar colours using a colour quantisation algorithm and returns the top 5–10 colours by pixel frequency. This gives a useful palette rather than thousands of individual pixel values.
How it works
Click 'Upload Image' or drag-and-drop any JPG, PNG, GIF, or WebP image.
The tool processes the image locally and displays the dominant colour palette.
Click any colour swatch to see its hex, RGB, and HSL values.
Click the copy icon next to any colour value to copy it to clipboard.
Examples
science Brand Logo Colour Extraction
Input: Company logo PNG (blue, white, and dark grey)
Output palette: #1E40AF (brand blue), #FFFFFF (white), #1F2937 (dark grey), #3B82F6 (lighter blue highlight)
Use: Paste hex values directly into Tailwind config, CSS variables, or Figma colour styles