--- title: "How to find a website's color palette" description: "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." source: https://savepad.app/blog/find-website-colors --- [Blog](https://savepad.app/blog) · 24 October 2025 # 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. *A colour palette pulled from a saved website in Savepad* **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](https://savepad.app/free-tools/palette-from-image) tool. ## 1. Browser dev tools The proper way, and the most exact. 1. Right-click the page, **Inspect**. 2. In the Elements panel, click the `` element at the top. 3. In **Styles**, look for `:root`. Modern sites define their colours as variables there: `--color-primary: #7a4afb;` and friends. 4. 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](https://savepad.app/free-tools/palette-from-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](https://savepad.app/use-cases/moodboards) shows it, and if you’re also hunting the typeface, [how to find out what font a website is using](https://savepad.app/blog/find-website-font) is the companion post. *A mock coral homepage for the fictional brand Oddsocks* 0370 · oddsocks.co · palette *A mock coral meal kit ad* 0467 · ad · same coral *A specimen for the typeface Fraunces* 0564 · font · Fraunces A palette pulled from a saved page, kept next to the page and an ad in the same colours. ## 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. [Join the waitlist](https://savepad.app/#waitlist) ## Read these next - [Hero section examples: Hero section patterns that work, from product-first heroes to one-line promises, with real dev tool and SaaS homepages and the mistakes that cause bounces.](https://savepad.app/blog/hero-section-examples) - [How to find out what font a website is using: Three ways to identify a website's font in under a minute: your browser's DevTools, an extension, or a font matcher for images. Plus what to do once you've found it.](https://savepad.app/blog/find-website-font) - [How to use Pinterest secret boards as a swipe file: How to make a secret board on Pinterest, use sections to sort a swipe file, cut down the AI pins in your feed, and know when Pinterest stops being the right place.](https://savepad.app/blog/pinterest-secret-board-swipe-file)