Extract a color palette from any website

Pull every color out of a page or a single component, grouped by where it is used, and copy any of them in the format you need.

What it shows

Select an element and the Colors section on the Element tab lists every unique color used by that element and everything inside it. The section title gives the total, and the swatches are grouped by how each color is used:

• Text: the color of text elements.
• Backgrounds: background colors, plus the color stops of any CSS gradients.
• Borders: border colors on any side.

Select the <body> and you get the palette for the whole page. Select a single card, header or button and you get just that component's colors, which is often more useful than a page-wide list.

How to extract a site's colors

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
2. Click an element to select it. For the whole page, keep pressing Alt + Shift + ↑ to step up until body is selected.
3. Open the Colors section on the Element tab.
4. Pick a format from the dropdown: HEX/HEXA, RGB/RGBA, HSL/HSLA or HSB/HSBA. Every swatch switches at once, and your choice is remembered.
5. Click a swatch to copy its value.

Find where a color is used

Hover any swatch and every element in the selection that uses that color is highlighted on the page. Hover a text color to see which headings and links use it, or a border color to find the one stray divider that does not match the rest. It is the quickest way to track down an off-brand value left over from an old stylesheet.

How the colors are collected

Screen Ruler walks the selected element and its descendants and reads each one's computed styles, so the palette reflects what the browser renders, not just what a stylesheet declares.

• Hidden elements are skipped. Anything with display: none, visibility: hidden or zero opacity is left out, along with fully transparent colors.
• No duplicate borders from text. A border that simply inherits the text color is not listed again under Borders.
• Modern color spaces are converted. Colors written as oklch(), oklab(), lch(), lab(), hwb() or color() are converted to sRGB so they can be shown and copied as HEX, RGB, HSL or HSB. Transparency is kept and shown as HEXA, RGBA and so on.
• Canvas elements are sampled. For a <canvas>, up to 25 main colors are sampled from its pixels and added to Backgrounds, when the browser allows it to be read.
• Web components are included. The walk goes inside open shadow roots, so component libraries do not hide their colors.

What it does not pick up

• Colors inside images. Photos, logos and SVG files loaded as images are not analyzed. To grab a color from any pixel on screen, use the free color picker.
• Shadow and SVG paint colors. box-shadow, text-shadow, and SVG fill and stroke colors are not part of the palette. The box shadow visualizer shows shadow colors for a selected element.
• Wide-gamut precision. Colors outside the sRGB range are clamped to the nearest sRGB value when converted.

When it is useful

• Building a mood board or style guide from a site you admire.
• Auditing a design system to see how many grays or blues a product really uses.
• Matching a client's brand when there is no style guide to hand.
• Checking a component against the tokens in the design file.

For a step-by-step walkthrough see how to extract a color palette from a website, and check text against its background with the contrast checker. Extract Colors is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I get the full color palette of a website?

Activate Screen Ruler, click anything on the page, then press Alt + Shift + ↑ until body is selected. The Colors section then lists every text, background and border color on the page, grouped by use.

Can I copy colors as HEX or RGB?

Yes. The dropdown switches every swatch between HEX/HEXA, RGB/RGBA, HSL/HSLA and HSB/HSBA, and clicking a swatch copies it in the chosen format.

How is this different from an eyedropper?

An eyedropper reads one pixel at a time, which is handy for images. Extract Colors reads the CSS colors of every element in a selection at once and groups them by use, so you get the whole palette in one step, including colors you might never think to sample by hand. Screen Ruler includes both.

Does it find colors used in gradients?

Yes. The color stops of linear, radial and conic gradients are added to the Backgrounds group.