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.
1. 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.
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.