Your screenshot
Drop, paste or choose an image. It is read on your device and never uploaded.
How it works
From a picture to a palette you can ship.
- 1
Drop an image
Any screenshot, photo or exported frame. Paste from the clipboard works too.
- 2
Read the palette
The eight most common distinct colours appear as swatches, most common first.
- 3
Pick the lead
The most vivid colour leads by default. Click another swatch to change it.
- 4
Get the scale
Tints, shades and tinted neutrals are built from the lead automatically.
- 5
Copy CSS
Everything as variables, ready to paste into a stylesheet or a design token file.
Learn more about colour
Guides that go deeper on what this tool does.
How to Extract a Color Palette From an Image (Free Tools and a Manual Method)How to Save Color Palettes From Websites and Apps You Admire (And Find Them Again)How to Choose a Color Palette for UI Design (With a Step-by-Step System)How to Find the Colors and Fonts Used on Any Website (Free, No Guessing)
FAQ
How do I extract a color palette from a screenshot?+
Drop the screenshot on the box above, or paste it. The tool reads the pixels in your browser, groups them into the eight most common distinct colours, and shows them as swatches you can click to copy. The most vivid one becomes the lead colour for the scale.
Is the image uploaded anywhere?+
No. Everything runs in your browser with a canvas element. The image never leaves your device and nothing is stored.
Why is the most common colour not the lead?+
In most screenshots the most common colour is a background, usually white or near black. The lead defaults to the most saturated extracted colour, which is more likely to be the brand or accent. Click any swatch to make it the lead instead.
What is the 50 to 900 scale for?+
It is the set of tints and shades a UI needs from one colour: light steps for backgrounds and hover states, the middle for buttons, the dark end for text. Copy it as CSS variables and you have a ready design token set.
Can I use this on photos, not just screenshots?+
Yes. Photos produce softer, more varied palettes. For website and app screenshots the results map more directly onto a usable UI palette.
More free tools
Same idea, no sign-up, nothing uploaded.
ColourColor Match FinderPick a colour and get harmonies, a 50 to 900 UI scale, tinted neutrals, contrast checks and CSS.ScreenshotsScreenshot Text ExtractorDrop a screenshot and copy the text out of it. Runs in your browser, nothing is uploaded.ColourContrast CheckerTwo colours in, WCAG AA and AAA results out, with the nearest passing shade suggested for you.ImagesImage CompressorShrink PNG, JPG and WebP images up to 80% smaller, resize them and convert formats. In your browser, nothing uploaded.ImagesImage ResizerResize and crop to exact sizes for Instagram, LinkedIn, Open Graph, app stores and portfolios. Drag to frame.ImagesImage ConverterConvert HEIC, PNG, JPG, WebP, GIF and SVG to JPG, PNG or WebP. iPhone photos included. Batch, in your browser.TypeFont Pairing FinderTwenty proven Google Fonts pairings previewed as real UI, with the HTML and CSS to copy.
Keep the screenshot and its palette together
GetRef reads the colours out of every screenshot you save and makes them searchable, so 'warm fintech dashboard' finds the reference and its palette.
