How to Easily Get Colors, Typography, and Type Scale from Any Website for Free, Without Extensions

Click here to watch the video if you don't feel like reading

Table of Contents

1. Open Chrome DevTools
2. Navigate to the Computed Tab
3. Open CSS Overview
4. Analyze the Captured Data
5. Explore Different Pages
6. Sort and Organize Data
7. Create Your Design

Step 1: Open Chrome DevTools

Navigate to the website you want to analyze.

Right-click anywhere on the page and select “Inspect” or press Ctrl + Shift + I on your keyboard to open Chrome DevTools.

Step 2: Navigate to the Computed Tab

Once DevTools is open, look at the right side of the panel for the “Computed” tab.

This tab shows you the CSS of the webpage in an easier-to-read format compared to the default view. However, there is an even better way to see an overview.

Step 3: Open CSS Overview

In the top-right corner of the DevTools panel, click on the three dots to open a menu.

Hover over “More tools” and select “CSS Overview” from the dropdown menu.

Now click “Capture Overview”.

Step 4: Analyze the Captured Data

You will now see a wealth of information including the background color palette, text color palette, fill colors, border colors, and more.

Scroll down to see font information including type scale, weight, line height, font family, and fallbacks.

Step 5: Explore Different Pages

Different pages on the same website might use different styles.

You can navigate to other pages and repeat steps 3 and 4.

For instance, blogs usually have different typography. Find the blog section on the website and analyze the typography there if that is what you are interested in.

Step 6: Sort and Organize Data

The data in CSS Overview is usually sorted by the number of occurrences.

You might want to copy it into a spreadsheet or document and sort it by font size or any other parameter that interests you.

Step 7: Create Your Design

Now that you have all the design elements you liked from the website, you can use this data to create your own design or simply learn from it.

Don’t forget to bookmark or like this guide if you found it helpful!

Click here to get the official chrome store extension

Cheers & stay funky, my friends 🦩

- Devin Schumacher Founder @ SERP | SERP AI