On a recent project, our client wanted to update their brand’s colors.
Part of updating their brand included changing one of the background colors from a light tan to a light cream.
I started out by looking at the CSS file to see where the light tan color was being used and replaced it with the new color.
There was another very similar color being used on the site as well and I wanted to get a better idea of all of the colors used on a single page.
The CSS Overview Chrome Developer Panel
The CSS Overview panel is a tool inside the Chrome developer tools.
To access it, do the following:
- In Chrome, click the View menu > Developer > Developer Tools
- In the top-right of the developer tools are three dots; click those
- Next, go to More Tools > CSS Overview
- Now click the Capture Overview button
The CSS Overview panel provides insight into the following, as quoted from the panel directly:
- Capture an overview of your page’s CSS
- Identify potential CSS improvements (e.g. low contrast issues, unused declarations, color or font mismatches)
- Locate the affected elements in the Elements panel
View All Colors on a Page
I wanted to gain greater insight into the colors used on the page before I called the task done.
Using the CSS Overview panel allowed me to do that by viewing all of the colors used on the page.
I’m using my own website for this example, but immediately I can see that I have a few different white and off-white colors going on. I’ll probably clean those up at some point and this tool makes it super easy to find things like this.
