How to find a website's colour palette
Three ways to get the exact colours a website uses, from Chrome dev tools to an eyedropper and a screenshot, and how to keep the palettes you like.
TLDR
- Fastest for a whole page: Chrome’s CSS Overview panel lists every colour a page uses.
- Most exact: browser dev tools. Most sites keep their brand colours as CSS variables on
:root. - One colour: an eyedropper. Chrome has one built in, and so does your operating system.
- From a picture: the palette from an image tool.
1. Browser dev tools
The proper way, and the most exact.
- Right-click the page, Inspect.
- In the Elements panel, click the
<html>element at the top. - In Styles, look for
:root. Modern sites define their colours as variables there:--color-primary: #7a4afb;and friends. - For any element, click the little colour square next to a value to get the picker, with hex, RGB, and HSL.
Chrome also has a CSS Overview panel (in the three-dot menu, under More tools) that lists every colour used on a page. Hugely underrated.
2. An eyedropper
For one colour, fast:
- Chrome: in dev tools, click any colour swatch, then the eyedropper icon, and click anywhere on the page.
- Mac: open Digital Color Meter (it’s in Utilities) and hover.
- Windows: install PowerToys and press Win+Shift+C for the Color Picker.
3. From a screenshot
If the colour is in an image (a hero photo, an ad), CSS won’t help. Screenshot it and drop it into the palette from an image tool for its five main colours.
Keep the palettes you like
Finding a palette is easy. Finding it again in six months is the hard bit. In Savepad, every saved page has its palette pulled out automatically, and you can save a palette on its own as a colour save. Then pick a swatch in the colour row and see every save with that colour in it, across pages, ads, and screenshots. The moodboards use case shows it, and if you’re also hunting the typeface, how to find out what font a website is using is the companion post.
FAQ
How do I find the hex code of a colour on a website?
Use an eyedropper: Chrome's dev tools colour picker, the macOS Digital Color Meter, or Windows PowerToys Color Picker.
Can I get a website's colours from its CSS?
Yes. Open dev tools, look at the root element's styles, and most modern sites define their colours as CSS variables there, like --brand or --primary.
How do I get a colour palette from an image?
Drop the image into a palette-from-image tool. It finds the main colours and gives you the hex codes.