How to Take Inventory of Colors Used on a Website | Steps to Clean Up Unnecessary Colors

As a website changes, outdated background colors and once-used button colors may remain in the CSS alongside colors still in use. Deleting values simply because there are too many can break a particular page or interaction state. A useful color inventory records not just the values, but also where they appear and why they should be retained.

Collect colors from pages, components, and interaction states

Begin by choosing which pages to inspect: the homepage, listing and detail pages, forms, and error screens. Check desktop and mobile layouts as well as hover (when a pointer is over an element), focus (when an element receives keyboard or other input), selected states, and error messages. If the site offers dark mode, inspect it separately.

Search CSS (Cascading Style Sheets, the rules that control how a webpage looks) for colors applied to text, backgrounds, borders, and icons. HEX is a hexadecimal way of writing a color code. Include colors written in other formats, too, and trace both the declarations and references of CSS custom properties (also called CSS variables, which give reusable names to values). In your browser’s developer tools, inspect elements to see which colors actually take effect.

A color found in source code is not necessarily visible on the current page. Conversely, a color that does not appear in the default view may still be needed for a conditional screen or interaction state.

Use a color inventory to decide what stays or needs investigation

Here is a hypothetical audit of a small website. Each row records the color, the components where it was found, and an initial decision.

For a working inventory, also record relevant page URLs, the CSS rule or file, the review date, the reviewer, and the reason for each decision. If the same color serves different purposes, track its usage separately for each role so that changes do not overlook a component.

In this example, body text ■#283747 against the page background ■#FBFBF8 has a contrast ratio of approximately 11.72:1. Against the card background ■#F1F3F6, it is approximately 10.93:1. White text ■#FFFFFF on the teal primary button ■#245E74 has a ratio of approximately 7.17:1. All three exceed the 4.5:1 minimum for normal-sized text in WCAG (Web Content Accessibility Guidelines). These are calculated for the specified opaque color pairs; recheck the rendered result if overlays or backgrounds change.

The old campaign strip is marked for investigation. Finding its definition in CSS but not in the pages you checked is not enough to establish that it can be deleted. Look for scheduled campaigns and conditions that show it only at certain times.

Remove candidates gradually and check the results

1. Separate the candidates: Distinguish colors currently in use, colors with uncertain usage, and declarations that might have no references. Do not merge colors solely because they look similar.
2. Trace references: Check custom property usage, component settings, and code that switches views. Include seasonal banners and messages that appear after an action.
3. Test changes: Preserve the previous version and remove a small group of candidates in a test environment. Compare representative pages, text contrast, and interaction states before applying changes more widely.
4. Keep an audit trail: Once verified, remove unused declarations and record which values were deleted and why. Keep enough information to restore them if a problem appears.

The goal of a color inventory is not simply to reduce the number of colors. It is to understand which colors are genuinely needed and safely clean up the declarations that are not.