Website CSS Color Extractor: Inspect Source Colors

Build a palette inventory from the CSS actually present in HTML

This extractor examines embedded style elements and inline style attributes from returned HTML. It groups supported color literals into normalized hex values and counts their occurrences in parsed declaration values. Those counts do not measure screen area, design importance or whether a rule currently applies to a visible element.

Original three-blue-declarations exercise

Select Load worked sample to inspect a local workshop page without making a target-site request. Its embedded rule for the #bad selector contains color: #369, border-color: rgb(51, 102, 153) and background: #fff. An inline style adds color: #336699. The blue values all represent the same opaque color.

The result is two distinct colors: #336699 with 3 literal occurrences and #ffffff with 1. The selector #bad matches an element ID. Treating that selector as a hex color would invent #bbaadd; this inspector excludes IDs, page text, script bodies, selectors, quoted strings and URL fragments from the count.

Use this inventory to find duplicate spellings before consolidating design tokens. Three blue declarations do not prove that blue is the primary brand color: an unused rule still appears in source, while a large photo and an external stylesheet contribute no counted colors. Confirm changes against the rendered page and the design system before editing a stylesheet.

What normalization includes

Supported literals include 3-, 4-, 6- and 8-digit hex, plus numeric comma-separated RGB and RGBA. Short hex expands, equivalent opaque spellings merge, and alpha is rounded to an 8-bit channel. For example, #3698 becomes #33669988; rgba(51, 102, 153, 0.5) becomes #33669980. These differ because hex alpha 88 is approximately 0.533, rather than 0.5.

The browser's CSS parser discards invalid declarations and may normalize some values. Counts use its serialized declarations: shorthand longhands are recombined, and repeated overrides may collapse. They are not a raw token count of the original file. The tool does not comprehensively resolve named colors, HSL, modern space-separated RGB, CSS variables or inheritance. Custom properties can hold candidate literals without proving they are used. Swatches show alpha over white and offer a keyboard-accessible copy button. Their labels are not an accessibility contrast certification.

Scope, exports and missing colors

External stylesheet links are counted but not fetched. CSS imports, images, remote fonts and scripts are not loaded by this inspector. Embedded media-query rules are included regardless of whether they match the current screen. Only the first 1,000 style elements and first 1,000 inline styles are inspected; a cap notice appears if either list exceeds that limit. The accepted HTML size is at most 1 MiB.

If the result is empty, check where the website defines its styles. A React page may return only a shell, or a site may keep every color in external files. The message means no supported literals were found in the inspected source, not that the website has no colors. Inspect the actual stylesheet or use a screenshot-based color tool for image pixels. Export here is a tab-separated inventory of hex values and occurrence counts, rather than a Tailwind configuration, CSS variable sheet or JSON palette.

Server-Side Public Fetch and local analysis

Live requests send the public page URL through the SimplyUtils server to the target website. The worked sample is local. Returned markup is parsed in an inert template and stylesheet objects that are never applied to the displayed page. Source and results stay in application memory until the input changes or the page reloads; see the Privacy Policy for site-wide practices.

Use a public domain URL on the standard HTTP or HTTPS port. The interface rejects credentials and IP literals; the server additionally checks public destinations and redirects. A blocked or slow target, JSON endpoint or oversized response displays a fetch error. Cancel or edit the URL to discard the result; the browser expires a fetch after 20 seconds. Clipboard and download failures are shown explicitly so a failed export is not reported as saved.

Repeatable palette review before changing tokens

Start with the worked sample and write down the two expected hex values and their counts. Export the TSV and open it as plain text or in a spreadsheet with tab-separated columns. Confirm that the blue row has three occurrences and the white row has one. Those are occurrences in supported declaration values, rather than the number of visible blue elements. A spreadsheet chart of those counts cannot establish the percentage of screen area covered by each color.

For a second controlled exercise, add a supported inline color declaration to your own public HTML page, fetch that page and compare the returned inventory with the source. Keep the existing stylesheet untouched during the comparison. If the same blue appears through a short hex value and an RGB value, expect normalization to merge them. If a color appears only in an external CSS file, expect it to be absent here. These two outcomes help distinguish a parser defect from the documented scope of source inspection.

Alpha, contrast and design decisions

A translucent swatch depends on the background beneath it. An exported alpha color is a literal value, not the final composited screen color. Check the actual design background before deciding that two colors are equivalent or sufficiently legible. This inspector does not measure WCAG contrast ratios, evaluate text sizes or verify accessible focus states. Use an appropriate contrast check and review the actual interface after changing tokens.

Frequency can highlight duplicate spellings, but it cannot identify the correct brand palette by itself. A rarely used error color may be essential, while a frequently repeated border color may be incidental. Record where a candidate is used and whether the declaration is overridden before removing it. Compare the resulting page on relevant viewport sizes and interaction states. Keep a rollback copy of your stylesheet so a cleanup can be reviewed without losing the original design decisions.

Sharing an inventory and reporting errors

Share the public source address, capture time, relevant supported declarations and the exported rows when collaborating on a palette review. Avoid pasting private HTML or secret links into a public issue. If parsing seems incorrect, reduce the example to a small embedded style and one element, state the expected normalized value and occurrence count, and include the actual result. An unsupported syntax example should be described as a coverage request rather than a promise the current parser already makes.