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

If you ever come across a website and you are curious about or inspired by its design elements such as fonts, spacing, color palettes, and typography, this guide is for you.

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!

🎁 SEO & Digital Marketing Resources: https://serp.ly/@devin/stuff
💌 SEO & Digital Marketing Insider Info: @ https://serp.ly/@devin/email

🎁 Artificial Intelligence Tools & Resources: https://serp.ly/@serpai/stuff
💌 Artificial Intelligence Insider Info: @ https://serp.ly/@serpai/email

👨‍👩‍👧‍👦 Join the Community: https://serp.ly/@serp/discord

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

Comments

More from this blog

Easy Download Loom Videos Fast: yt-dlp Extraction Methods That Actually Work

How to Download Onlyfans Profile's Videos & Images for FREE (yt-dlp tutorial)

How to Download Circle.so Videos for Free (HLS m3u8 Streams) - using yt-dlp

How to Download Coursera Videos for FREE (yt-dlp tutorial)

How to Download Skool Videos with yt-dlp

Table of Contents

Step 1: Open Chrome DevTools

Step 2: Navigate to the Computed Tab

Step 3: Open CSS Overview

Step 4: Analyze the Captured Data

Step 5: Explore Different Pages

Step 6: Sort and Organize Data

Step 7: Create Your Design

Command Palette

Comments

More from this blog

Table of Contents

Step 1: Open Chrome DevTools

Step 2: Navigate to the Computed Tab

Step 3: Open CSS Overview

Step 4: Analyze the Captured Data

Step 5: Explore Different Pages

Step 6: Sort and Organize Data

Step 7: Create Your Design