Get the color palette of any website
You like how a site looks and want its colors. Here are three ways to get them, from the thorough one to the quick one.
Play video1. Chrome's CSS Overview
Open DevTools (F12), then the CSS Overview panel from the More tools menu, and capture an overview. It lists every color the page's CSS uses, grouped into backgrounds, text, fills and borders.
Complete, but long: a typical page has dozens of colors, many of them used once, and nothing tells you which ones carry the design.
2. A screenshot and a palette generator
Take a screenshot and drop it into an image palette tool. You get the colors of the pixels, which includes photos, shadows and the blur around text, rather than the colors the design is made of.
3. One click with Pigmo
Click the Pigmo button, then Grab. Pigmo reads the colors of the page's elements, such as backgrounds, text, borders and icons, merges colors that look the same, and shows up to eight, ranked from most to least used. Each one says where it appears, for example in the header or on buttons.
Click a swatch to copy it as HEX, RGB or HSL. With Pro you save the palette under a name and export it as CSS variables, a Tailwind theme, JSON or a PNG.
From palette to code
A palette is only useful once it is in your project. With Pro, a saved palette exports in four shapes: CSS custom properties for any stylesheet, a Tailwind theme block, JSON for scripts and design tokens, or a PNG to drop into a mood board or a chat.
Tips for a cleaner palette
- Grab on a page that shows the design, like the home page or a product page, not a login form or a blog post that is mostly text.
- Accept cookie banners and close popups first. Their colors count too.
- If a site has a dark mode, grab it once in each. You get two palettes that belong together.
- Pure white and near-black text show up on almost every site. The colors after them are usually the brand.
Which one to use
Use CSS Overview when you need every color, for an audit or a redesign. Use Grab when you want the handful of colors that make a site look the way it does.