🌈 Extract Colours
Pull the key colours with HEX and CSS
Pick an image and its key colours are listed below with HEX, RGB, and CSS variables ready to copy.
ℹ️ Click any swatch to copy its HEX. The exported image is a colour card you can keep for reference.
🔒 Everything runs inside your browser — your files are never uploaded to our servers and we never see them. Close the tab and nothing is left behind.
Step-by-step
- Pick an image A photo, illustration, screenshot, or design mock — anything works. Colours appear immediately on load; there is no need to press start.
- Choose how many colours Five or six is the practical number — enough for a full scheme (primary, secondary, accent, background, text) without becoming impossible to choose between. Push to 10–12 for a mood board.
- Pick a method Dominant sorts by area and reflects how the image actually reads. Vibrant pushes saturated colours to the front — the single red flower in a landscape gets ignored by dominant and surfaced by vibrant.
- Click a swatch to copy it Clicking any swatch copies its HEX to the clipboard. Below that is a block of CSS variables you can paste straight into a stylesheet.
- Export a colour card (optional) Pressing start produces a PNG card showing the source thumbnail with every colour's HEX and RGB. Keep it as a project reference or send it to a client as-is.
When you would use this
Building a site palette from one photograph
You have a hero image or product shot you like and want the site to sit well against it. Pull its colours and use the CSS variables as your starting point. It is far more reliable than picking colours from nothing, because those colours already coexist happily in a real image.
Matching a deck or poster to its cover image
The cover uses a photograph, but the heading and chart colours fight with it. Take the colours from the image for headings and accents and the whole document immediately looks like one person made it.
Reproducing a palette you have seen
Spotted a site, package, or poster whose colours you like? Screenshot it, drop it in, and you have the values. Much faster than eyedropping one pixel at a time, and it tells you which colour covers the most area.
Checking whether brand colours have drifted
Feed in a printed piece or something produced by somebody else and compare the extracted colours against your brand guide. Colour shifts between screens and print are normal; this is a quick way to see how far.
Why extracting beats choosing
Building a palette from scratch is hard, because colours do not harmonise on their own merits — what matters is how they behave together. Taking colours from a photograph you already like inherits a set that has demonstrably coexisted, because those colours were sitting happily in one frame to begin with.
This is why designers pull palettes from photographs, film stills, and packaging. It is not laziness: real-world light and materials naturally produce coherent colour relationships.
How many colours to take
Five or six is usually right, and enough for a complete interface palette:
- One primary (buttons, links, emphasis)
- One or two secondaries (supporting elements)
- One accent (warnings, tags, small highlights)
- One dark (text) and one light (background)
Past about eight you start getting colours too close to each other to assign distinct jobs. Go above ten only for mood boards or when you want to see the overall distribution.
What to do after extracting
Using them straight is usually one step short. Colours taken from photographs often have saturation and lightness unsuited to interface use — text that is too dark to read comfortably, backgrounds vivid enough to tire the eye. The practical approach is to treat what you extracted as a source of hues, then build a full scale by adjusting lightness and saturation for each role.
Also check contrast. Insufficient contrast between text and background is the most common accessibility failure, and two colours pulled from the same photograph are not especially likely to clear the bar by accident.
Frequently asked questions
How does it decide what the dominant colours are?
What is the difference between dominant and vibrant?
Why do the extracted colours look muddy?
Does it use the network?
What you might need next
Image work rarely ends in one step. These pair up with Extract Colours most often:
- 🔗 Image to Base64 — Data URI, CSS, and HTML snippets
- 💧 Add Watermark — Text watermark with position & opacity
- 🗜️ Compress Image — Shrink file size while keeping quality
Want to share the result? Upload turns images, photos, or videos into a short link with optional password, expiry, and view limits. Or head back to all 12 tools.
More tools
Compress Image
Shrink file size while keeping quality
Compress to Size
Say 2MB and it lands under 2MB
HEIC to JPG
iPhone photos into a format everything reads
View & Remove EXIF
See what your photo reveals, then strip it
ID Photo Sizes
Passport and ID sizes, print sheet included
Resize Image
By width, percentage, or exact size
Upscale Image
Enlarge up to 4× the original size
Crop Image
Drag to select the area to keep
Rotate Image
Batch rotate and flip
Add Watermark
Text watermark with position & opacity
Blur & Redact
Hide faces, plates, and personal data
Convert to JPG
PNG, GIF, and WebP to JPG
JPG to PNG
Convert to lossless PNG or WebP
PNG to WebP
Typically 30%+ smaller files
Split into Grid
Cut into a 3×3 Instagram grid
Merge Images
Join several images into one long strip
Favicon Generator
Every size plus a real .ico file
SVG to PNG
Vector to raster at any size you want
Image to Base64
Data URI, CSS, and HTML snippets
Video Frame Grab
Grab any frame as a cover image
Video to GIF
Turn a clip into an animated GIF
Remove Background
For white and green-screen product shots
Image to Text (OCR)
Pull the text out of a screenshot
Images to PDF
Merge multiple images into one PDF
PDF to Images
Every page as a JPG or PNG