You see a site whose colours just work, and you want them. Not approximately, and not in a month when you will have forgotten which site it was. This is how to capture a palette properly and, more importantly, how to store it so it is still useful later.
Method 1: read the source
Most modern sites define their palette as CSS variables. Right-click, Inspect, select the html or body element and look in the Styles panel for a block of custom properties: --color-primary, --bg, --accent and so on. These are the actual design tokens, exact to the hex. Copy the block into a note. For sites that do not use variables, finding the colors and fonts used on any website covers the other inspector tricks.
Method 2: sample pixels
Extensions such as ColorZilla and ColorPick Eyedropper let you click any pixel and copy its hex. Slower, but it works on images and gradients where the source gives you nothing. Sample five or six colours: background, surface, primary text, secondary text, accent, and one more if there is a second accent.
Method 3: screenshot and let the tool read it
The fastest method, and the only one that keeps context. Take a screenshot of the design and save it into a reference manager that extracts dominant colours on arrival. GetRef does this automatically and attaches the colours as searchable tags, so the palette and the design that used it stay together and can be found by colour later. If you only need the swatches, extracting a palette from an image lists free tools that do the same thing one image at a time.
Why the context matters more than the swatches
A palette is six squares. Six squares tell you nothing about how the colours were used: which is background and which is accent, how much of each, what the type sits on. The screenshot answers all of that. Save the palette as part of the reference, not instead of it.
Storing palettes so you can find them
- One record per palette, with the screenshot, the hex values in a note, and the source link.
- Tag by mood and field rather than hue: warm, muted, high-contrast, fintech, health. You will remember "that warm fintech one" long before you remember a hex.
- Let automatic colour tagging cover the actual hues. Then a search for "pale green" works even when you never typed it.
For picking a palette for your own work once you have a few saved, see how to choose a color palette for UI.
Common questions
- How do I get the color palette from a website?
- Open the browser inspector and read the CSS variables on the root element, use an extension such as ColorZilla to sample pixels, or save a screenshot into a tool that extracts dominant colors automatically. The last one is fastest and also keeps the context.
- Where should I store color palettes?
- With the screenshot of the design that used them. A palette on its own is six squares; a palette next to the interface that made it work is a decision you can reuse. A reference manager that reads colors from saved images does this without extra steps.
- Can I search my saved references by color?
- In tools that analyse images on save, yes. GetRef tags each save with its dominant colors, so "dark navy dashboard" or "pale green landing page" finds matching references without you tagging anything.
