Browsing colors

The Colors tab lets you browse all the colors used across the page. You can copy individual colors or export the entire color palette. The exported palette is compatible with popular design tools such as Figma, Sketch, and Adobe Suite.

If you're on the the Professional plan, you get access to the Categories tab, where you can browse colors by semantic grouping including:

• Typography colors

• Background colors

• Border colors

• Shadow colors

• Foreground colors

Inspect color instances

The Ultra plan not only displays all colors but also helps you locate specific colors used on the site. By clicking the "Inspect" icon, you’ll be taken to a dedicated screen to preview and inspect any color instance on the page.

Each color instance provides a quick preview of key design properties, including:

• Element name

• Category

• Token/Class

• Value

• Color contrast (if applicable)

Exporting color palette

You can export an entire color palette to use in design tools like Figma, Sketch, or Adobe Suite, saving time and ensuring consistency in your designs.

1. Navigate to the Colors tab, where you can see all colors used on the website.

2. Click the “Export All” button at the top-right corner.

3. You will get a .zip file containing the entire color palette (in formats such as .json or .ase) automatically downloaded to your device.

Copying colors

You can easily grab any color from the website without needing to inspect the code, making it quicker to reuse colors in your designs.

1. Hover over the color you want to copy within the Colors tab. Click on the color swatch to open a detailed view.

2. Click the copy icon next to the color value. This will instantly copy the color to your clipboard.