How to Check All Colors on a Page

Learn how to check all colors on a web page using simple steps. This guide will help you identify and organize colors efficiently.

05 Aug 2024 By Graham Sysko

In this guide, we'll learn how to check and manage colors on a page using Figma. This process involves selecting all elements, viewing the selection colors, and identifying where specific styles are used. By understanding how to navigate and organize these colors, you can ensure consistency and make necessary adjustments efficiently.

Let's get started

To check all colors on the page, first press Command-A to select everything.

Type "Cmd + A"

Step #2: Click on "Show selection colors" — Click on "Show selection colors"

Step #3: Click on "See all 79 colors" — Click on "See all 79 colors"

Here, the variables are organized first, and the styles are below. There should be no styles here. You can pick one of those styles and use the target to see where the old styles exist.

We might want to look at one of the tabs here, so I'll select a single component.

Step #5: Click on "Configure" — Click on "Configure"

I can look at its parent to inspect the component overall and why there is an issue.

Step #7: In this case there are no color overrides, so this means this is a component that no longer exists in Garden (it is an older tab version that lost its link). — In this case there are no color overrides, so this means this is a component that no longer exists in Garden (it is an older tab version that lost its link).