Searchlight
Tools
BlogAbout
Free SEO Audit
Back to home
๐Ÿ“ˆSEO & Analytics
๐Ÿ—‚๏ธText & Data
๐Ÿ”Encoders & Decoders
โšกGenerators
๐Ÿ”„Converters
๐Ÿ–ผ๏ธImage Tools
๐Ÿ“„PDF Tools
๐Ÿ’ปCode Tools
๐Ÿ”Regex & Parsing
๐ŸงฎCalculators
๐Ÿ—บ๏ธDiagrams
๐ŸŒNetwork & Web
โœ๏ธText Utilities
๐ŸŽจColor Tools
Color PickerImage PaletteContrast CheckerColour Blindness Sim.Tailwind Colors
๐Ÿ”€Diff & Compare
148+ tools. OAuth is read-only.
Searchlight

148+ free SEO, developer, image, PDF, and productivity tools - no account needed.

Free ยท all tools included
Company
  • Blog
  • About
  • Free SEO Audit
Legal
  • Privacy Policy
  • Terms of Service
  • Cookie Policy

ยฉ 2026 Searchlight. All rights reserved.

Read-only OAuth ยท No data reselling ยท Completely free

Image Palette Extractor

Upload an image to extract its dominant colour palette.

Upload an image to extract its colour palette

About this tool

Extract the dominant colour palette from any image automatically. Upload a photo, logo, or screenshot and get 5-10 dominant colours with their HEX, RGB, and HSL values. Perfect for brand colour extraction, interior design inspiration, and building cohesive colour systems from photography.

How to Extract Colours from an Image

  1. 1Upload your image by dragging it in or clicking the upload area.
  2. 2Set the number of colours to extract (5 is a good default).
  3. 3The dominant palette appears as swatches with HEX, RGB, and HSL values.
  4. 4Click any swatch to copy the colour value.
  5. 5Export as CSS variables or JSON for use in your project.

Frequently Asked Questions

How does automatic colour extraction work?+
The tool uses k-means clustering to group pixels by colour similarity, then returns the centroid of each cluster as a dominant colour. The number of clusters controls how many colours are extracted.
Can I extract colours from a website screenshot?+
Yes. Take a full-page screenshot, upload it, and see the exact colours used in the design. This is useful for analysing competitor colour schemes or documenting an existing design system.
How do I use extracted colours in CSS?+
Click any colour swatch to copy the HEX value, then paste it into your CSS. Or export the full palette as CSS custom properties (--color-1: #hexvalue;) to use across your project.
How many colours should I extract?+
5 colours works well for most images, giving the dominant palette without too many similar shades. For photographs with complex gradients, 8-10 colours captures more variety. For logos, 3-4 colours is usually sufficient.
Looking for a deeper guide on this topic? Browse the Searchlight blog.
Visit the blog โ†’

Related tools

View all Color Tools โ†’
Color PickerVisual color picker with format outputContrast CheckerWCAG AA/AAA contrast ratio checkerColour Blindness Sim.Simulate different types of colour blindnessTailwind ColorsFull Tailwind CSS colour palette reference