How to Find the Colors and Fonts Used on Any Website (Free, No Guessing)

You have found a site with a colour palette or a type pairing you love. Guessing the values by eye wastes time and is usually wrong. Every browser can tell you exactly what a site uses, and the best method is built into Chrome. Here is how to find the colours and fonts on any website.

The fastest method: Chrome CSS Overview

Chrome has a little-known panel that lists every colour and font on a page at once.

1. Open DevTools: Cmd+Option+I on Mac or Ctrl+Shift+I on Windows.
2. Open the command menu: Cmd+Shift+P or Ctrl+Shift+P.
3. Type CSS Overview and choose Show CSS Overview.
4. Click Capture overview.

You get a full report: background colours, text colours, fill and border colours, every font family with its sizes and weights, and even contrast issues. Click any colour to see which elements use it. It is the quickest way to see a site's real palette.

Inspect one element

For a single button or heading:

1. Right-click it and choose Inspect.
2. In the Styles panel, look for color, background-color and border-color values.
3. Open the Computed tab and scroll to font-family. At the bottom, Rendered Fonts shows the font that actually displayed, which matters because font stacks often fall back to something else.

Click a colour swatch in the Styles panel to open Chrome's colour picker, which includes an eyedropper and a contrast ratio for text.

Free extensions

• WhatFont: hover over any text to see the font, size, weight and line height.
• ColorZilla: an eyedropper for any pixel in the browser, plus a page colour analyser.
• Fonts Ninja and similar tools: identify fonts and show where to get them.

Extensions are convenient if you do this often. CSS Overview is better when you want the whole picture.

System colour pickers

For colours in images, videos or apps, where CSS cannot help:

• Mac: Digital Color Meter, in Applications > Utilities.
• Windows: PowerToys Color Picker, opened with Win+Shift+C.

Both read any pixel on your screen and copy the value.

Read the palette, not just the values

A list of 40 colours is data, not a palette. To learn from it:

• Find the primary: the colour on main buttons and links.
• Count the neutrals: how many greys, and are they tinted?
• Check proportions: how little of the primary is actually used.
• Note the type scale: the sizes of headings and body text and the line height.

This is where most of the lessons are. We cover how to turn these observations into your own system in how to choose a color palette for UI and the font pairing guide for UI designers.

A note on fonts and licences

Knowing a font's name does not mean you can use it. Google Fonts are free for any project. Many commercial fonts need a licence for your own site, even though you can see them on someone else's. Look the font up before you build with it.

Save what you find

Next month you will want those values again. Save a screenshot of the page with the hex codes and font names in the note. In GetRef, the text in the screenshot and your note are both searchable, so "Inter with tinted greys" or a hex code finds it instantly. If you are pulling colours from images instead, see how to extract a color palette from an image.