Get color palette from website

Get a color palette from website pages in the state you can actually see

A website does not have one timeless bag of colors waiting behind its URL. Media queries, light and dark themes, login state, feature flags and JavaScript can all change the rendered page. A server-side fetch also lacks your browser’s viewport and session. This tool therefore begins with a bookmarklet in the ordinary tab you chose. Set the viewport and theme, reveal the interface state you want to study, and run the collector there.

The collector inspects up to 15,000 loaded elements and keeps those with a measurable box, visible layout and nonzero opacity. It records resolved text, background, border, outline, SVG fill and SVG stroke colors. The CSS Object Model defines resolved values as the values returned by getComputedStyle(); that means the active cascade has already been applied. A declaration hidden inside a stylesheet can still become a measured color when it affects a visible element.

The palette is counted evidence, not invented brand semantics

Equal resolved colors are grouped and ranked by observation count. Each swatch retains the property categories and short element labels that produced it, such as background · header.site-header. The collector renders each browser color into a one-pixel canvas and records portable sRGB hex, including an alpha pair when the pixel is partly transparent. Fully transparent values are omitted because transparency alone does not identify the color underneath it.

Frequency does not establish purpose. The most common value might be body text, a page background or a border inherited by hundreds of controls. The generated names therefore stay neutral: --color-01, --color-02 and so on. Renaming a reviewed token to --color-action is a design decision; this extractor does not manufacture that decision from a count. The JSON and CSV keep enough evidence for a person to make it later.

Font stacks are observable; the exact glyph face is a boundary

The inventory groups computed font-family stacks and preserves the observed weights, styles, pixel sizes and example elements. This answers the practical website-font question more faithfully than searching raw stylesheet text: unused declarations do not dominate the list, while a stack inherited through several layers still appears where it is rendered. The sample line uses that stack when your current device can resolve it.

A computed stack is not proof that its first family drew every character. Font loading can fail, a local font can satisfy a name, and a single line can fall back for one script or missing symbol. Browsers do not expose a simple whole-page ledger mapping every glyph to a font file. The tool therefore says font stack, never identified font, and does not offer a font-file download. Use the list as implementation evidence and verify licensed font sources in the site’s own code or network log.

Spacing, corners and shadows become a repeatable scale

Positive resolved margins, padding and row or column gaps are converted to pixels, grouped and ranked. Border-corner radii and rendered box or text shadows receive their own lists. These values describe the loaded viewport. A percentage, rem value or layout calculation may resolve to another pixel measurement at a different width, so the source URL, collection time and bounded element count stay attached to every export.

The CSS starter uses only normalized colors, validated font stacks, bounded pixel values and rendered shadows. It deliberately avoids assigning roles or reconstructing component rules. Copying the entire cascade would be a different job: specificity, inheritance, media queries, container queries, browser defaults and source order matter, and a flat list cannot preserve those relationships honestly.

Cross-origin styles can apply without exposing their rule text

The browser’s same-origin policy can prevent page JavaScript from reading cssRules in a stylesheet served by another origin. This tool catches that exception and reports the inaccessible stylesheet count. The stylesheet can still affect the page, so its rendered colors, computed font stacks and resolved measurements remain visible through each element. What can be missing are the stylesheet’s original custom-property names and authored declarations.

Accessible stylesheet, inline and computed-root custom properties are retained as evidence in JSON and CSV. They are not executed in the generated CSS. A custom property may contain a URL, a browser-specific function or a fragment that only makes sense inside its source cascade; replaying arbitrary collected text in another site would be both misleading and unsafe. The generated token sheet is intentionally made from the smaller normalized value inventory.

The bookmarklet transfers a style manifest, not the page

The manifest contains the source URL and title, aggregate style values, counts and short element labels built from tag, ID and at most two class names. It excludes text content, HTML, input values, cookies, local-storage contents and screenshots. The collector can save that manifest as JSON on the source site. Choosing Build palette & tokens instead opens this tool and sends bounded chunks with an exact web-messaging target origin. The receiver rejects a completed collection when its reported page origin differs from the sender.

A restrictive Content Security Policy, blocked popup or disabled bookmarklet can still stop the direct path. The downloaded JSON is the explicit fallback and also makes the input reproducible. Imported JSON cannot prove its sender origin, so the receipt says that plainly. In either path, analysis and export happen in this tab; there is no processing upload.

The verified ZIP keeps both the starter and the audit trail

design-tokens.css contains the neutral frequency-ranked properties. style-inventory.json preserves the normalized inventory, source boundary and the exact generated CSS. style-inventory.csv is one row per color, font stack, spacing value, radius, shadow and source custom property. README.txt carries the source URL and interpretation limits beside the files rather than leaving them only on this page. Before download, the tool reads the ZIP central directory back and compares all four names and byte lengths with what it generated.

This is a reference kit, not permission to reproduce another product’s visual identity. Colors by themselves are rarely protected, but logos, typefaces, artwork, trade dress and a copied interface can carry license, trademark, copyright or contractual restrictions. Use the extractor on work you own, are authorized to inspect, or are using for legitimate interoperability and analysis. If the actual job is to preserve image files rather than study the rendered system, use the website image extractor; it keeps byte hashes and source receipts instead of turning pixels into style tokens.