How to Get Font Colour From a Website

This post may contain affiliate links. If you make a purchase through these links, we may earn a commission at no additional cost to you.

Ever stumbled upon a website and thought, “Wow, that colour is brilliant!”? Whether it’s a striking headline, a subtle shade on a button, or the perfect hue for body text, finding the exact colour a website uses can feel like a bit of a treasure hunt. You might be a designer looking for inspiration, a developer trying to match a brand’s style, or just someone curious about what makes a site look so good.

Whatever your reason, you’ve come to the right place. This guide is your one-stop shop for uncovering the colour codes behind any text on the web. We’ll walk you through everything, from the dead simple methods that take seconds to the more powerful tools built right into your web browser. Don’t worry if you’re not a tech whizz; we’ll explain it all in plain English, like having a chat with a mate down the pub. We’ll show you how to grab those colours with pinpoint accuracy, understand what all those funny-looking codes mean, and even organise them for your own projects.

Think of it as learning a secret handshake. Once you know it, you’ll see the web in a whole new light—a world full of specific, beautiful colours that you can identify and use yourself. Let’s get started.

Why Bother Finding a Font Colour?

It might seem like a small detail, but font colour is a massive part of what makes a website work. It’s not just about looking pretty; it’s about making things easy to read, guiding your eyes to the important bits, and creating a certain feeling or mood.

For professionals, getting the colour right is non-negotiable.

For Web Designers & Developers: Consistency is king. When you’re building or updating a website, you need to match the brand’s official colours perfectly. A client won’t be chuffed if their logo is a specific shade of ‘Royal Blue’ and you’ve used ‘Slightly-off-the-mark Blue’. Being able to pinpoint the exact colour code means your work looks professional and stays true to the brand’s identity. It’s the difference between a bespoke suit and one that’s just a bit baggy.
For Marketers & Brand Managers: A brand’s colours are its signature. Think of the iconic red of Coca-Cola or the calming blue of the NHS. These colours are instantly recognisable. When creating new marketing materials, whether it’s an email newsletter or a social media post, using the correct font colours ensures everything feels connected and reinforces the brand’s image. It’s about building trust and familiarity with your audience.
For Hobbyists & Content Creators: If you run a blog, a YouTube channel, or even just a popular Instagram account, having a consistent colour scheme makes your content look polished and professional. It helps you stand out from the crowd. Maybe you’ve seen a colour on another blog that you think would be perfect for your own headlines. Knowing how to grab it means you can create your own stylish look and feel.

Beyond the professional world, it’s also just plain fun. It’s like being able to identify a bird by its song or a classic car by its shape. It deepens your appreciation for the design choices that shape our digital world. You start to notice the little things that make a website feel calm, energetic, or trustworthy. And once you know how to find these colours, you have a powerful new tool in your creative toolkit.

The Basics: Understanding Colour Codes

Before we dive into the ‘how’, let’s quickly cover the ‘what’. When you find a colour on a website, it won’t be called “lovely soft grey” or “punchy orange.” It will be represented by a code. These codes are a universal language that tells computers the exact shade to display. It’s a bit like a recipe for colour.

There are a few different types of codes, but these are the ones you’ll bump into most often.

HEX Codes: The Six-Character Wonder

This is the most common one you’ll see. A HEX code is a six-character code that starts with a hash symbol (#). It’s made up of numbers (0-9) and letters (A-F).

Example: #FFFFFF is pure white, and #000000 is pure black. A nice, friendly blue might be #3498DB.

How it works (the simple version): The six characters are actually three pairs. The first pair represents Red, the second Green, and the third Blue (RGB). The characters tell the screen how much of each of those three primary colours to mix together. 00 means none of that colour, and FF (the highest value) means the maximum amount. So, #FF0000 is pure, bright red because it’s full-on red, with no green and no blue.

You don’t need to memorise this, but it’s handy to know what’s going on behind the scenes.

RGB and RGBA: The Detailed Recipe

Another popular format is RGB, which stands for Red, Green, and Blue. It does the same job as HEX but spells it out a bit more clearly.

Example: rgb(255, 255, 255) is pure white. rgb(0, 0, 0) is pure black. That same friendly blue would be rgb(52, 152, 219).

How it works: Each number represents the amount of red, green, or blue, on a scale from 0 to 255 (255 being the maximum). It’s just a different way of writing down the same colour recipe.

Sometimes, you’ll see RGBA. The ‘A’ stands for Alpha, which controls the transparency or opacity of the colour.

Example: rgba(52, 152, 219, 0.5) is our friendly blue, but at 50% transparency. An ‘A’ value of 1 is fully opaque (solid), and 0 is completely transparent (invisible). This is really useful for creating effects like semi-see-through backgrounds.

HSL and HSLA: The Artist’s Choice

Finally, there’s HSL, which stands for Hue, Saturation, and Lightness. This format is a bit more intuitive for humans, as it’s closer to how we think about colour.

Hue: This is the colour itself, represented as an angle on a colour wheel (0 to 360 degrees). For example, 0 is red, 120 is green, and 240 is blue.
Saturation: This is the intensity of the colour, as a percentage. 0% is grey, and 100% is the most vivid version of the colour.
Lightness: This is also a percentage. 0% is black, 100% is white, and 50% is the ‘purest’ version of the colour.
Example: hsl(204, 70%, 53%) is yet another way to write our friendly blue.

Just like RGBA, HSLA adds an Alpha channel for transparency.

The main takeaway? All these codes can describe the very same colour. It doesn’t really matter which one you grab, as most design tools will understand any of them. Just make sure you copy the whole thing, including the # for HEX or the rgb() brackets.

Method 1: The Eyedropper Tool – Quick, Simple, and Effective

Let’s start with the easiest method of all: the colour eyedropper. This is a tool that lets you click on any part of your screen, and it will instantly tell you the colour code of the pixel you’ve clicked on. It’s perfect for when you just want to quickly identify a colour without digging into any code.

These tools usually come in the form of a browser extension, which is a small add-on that gives your web browser extra powers. They’re safe, easy to install, and incredibly useful.

Popular Eyedropper Extensions

Here are a few of the most popular and reliable choices for different browsers. They all do pretty much the same thing, so you can’t go far wrong.

For Chrome & Edge: ColorZilla This is one of the originals and still one of the best. It’s been around for years and has a whole host of features, but its main job is picking colours.
For Firefox: ColorZilla Yes, the same one! It’s so popular it’s available for Firefox too, working in exactly the same way.
For all browsers: Eye Dropper Another brilliant, straightforward extension that’s available on the Chrome Web Store and for Firefox. It’s simple and does what it says on the tin.

How to Use an Eyedropper Extension: A Step-by-Step Guide

Let’s imagine we want to find the colour of a headline on the BBC News website. Here’s how you’d do it using an extension like ColorZilla.

Install the Extension: First, you’ll need to add it to your browser. Simply search for “ColorZilla” or “Eye Dropper” in the Chrome Web Store or Firefox Add-ons manager. Click “Add to Chrome” or “Add to Firefox.” A new little icon, probably an eyedropper, will appear in your browser’s toolbar at the top right.
Navigate to the Website: Open the webpage with the font colour you want to identify. Let’s head over to the BBC News homepage.
Activate the Eyedropper: Click on the eyedropper icon in your toolbar. This will activate the tool. Your mouse cursor will likely change into a crosshair or a magnifying glass.
Pick the Colour: Move your cursor over the text whose colour you want to find. As you hover over different elements, you’ll see a little box that shows the colour and its code in real-time. To get the most accurate reading for a font, it’s best to zoom in on your page a little (hold Ctrl and press +). This makes the letters bigger and easier to click on precisely.
Click and Copy: When your crosshair is right over a letter, click it. The extension will automatically copy the colour code (usually the HEX code) to your clipboard. You’ll often get a little notification telling you the code has been copied.
Paste and Use: Now you can paste that code (Ctrl + V on Windows, Cmd + V on Mac) into whatever program you’re using—a design tool like Canva, a graphics editor like Photoshop, or even just a simple text document to save it for later.

That’s it! In less than 30 seconds, you’ve accurately identified and saved a colour.

Pros and Cons of Using an Eyedropper

Pros:

Incredibly fast and easy: It’s the quickest way to get a colour code.
Works on anything: You can use it to pick colours from text, images, buttons, backgrounds—anything visible on the page.
No technical knowledge needed: You don’t need to understand code or web development at all.

Cons:

Can be tricky with tiny text: For very small or thin fonts, it can be a bit fiddly to click on a pure pixel of the colour. Zooming in helps a lot.
Doesn’t give you extra information: An eyedropper will only tell you the colour. It won’t tell you the font name, size, or weight.
Affected by screen settings: In very rare cases, your monitor’s colour settings could slightly affect the shade you pick up. For 99.9% of uses, this won’t matter a jot.

For a quick grab, the eyedropper is your best friend. But if you need more details about the text, or want to be 100% certain you’re getting the right colour, it’s time to level up and use the browser’s built-in tools.

Method 2: The Browser Inspector – Your Built-in Superpower

Every modern web browser—whether it’s Chrome, Firefox, Edge, or Safari—comes with a powerful set of tools for developers. They might sound scary, but don’t worry. We’re only going to use a tiny, simple part of them. This set of tools is often called “DevTools” or “The Inspector,” and it lets you look at the raw ingredients of a website: its HTML and CSS code.

This is the most accurate and reliable way to find a font colour, because you’re not just sampling what’s on the screen; you’re reading the actual instructions that tell the browser what colour to make the text.

How to Open the Inspector

There are two easy ways to open the Inspector, and they work on most browsers.

The Right-Click Method (Easiest):
- Find the text on the page that you’re interested in.
- Right-click directly on that text.
- From the menu that appears, choose “Inspect” or “Inspect Element.”
The Keyboard Shortcut:
- Press F12 on your keyboard. (On some laptops, you might need to press Fn + F12).
- Alternatively, use Ctrl + Shift + I (or Cmd + Option + I on a Mac).

When you do this, a new panel will open up, usually at the bottom or to the right of your screen. It will be full of code. It might look a bit intimidating, but you can ignore almost all of it.

Finding the Colour with the Inspector: A Step-by-Step Guide

Let’s go back to the BBC News website and find that headline colour again, but this time, we’ll use the Inspector for ultimate precision.

Inspect the Element: Find a headline you like and right-click on it. Select “Inspect” from the menu.
The Code is Revealed: The Inspector panel will open. On one side (usually the left), you’ll see the HTML, which is the structure of the page. The line of code corresponding to the headline you clicked on will be highlighted, usually in blue. This tells you you’re looking at the right bit.
Check the Styles: On the other side of the Inspector (usually the right), you’ll see the CSS, which stands for Cascading Style Sheets. This is the code that controls how everything looks—the colours, fonts, sizes, and spacing. This is where the treasure is buried.
Look for the color Property: In the CSS panel, you need to look for a property called color. This property specifically controls the colour of the font. You’ll see something like this:color: #1A1A1A;orcolor: rgb(26, 26, 26);There it is! That’s your font colour code.
Explore the Colour Picker: Most browsers make this even easier. Next to the colour code, you’ll see a little coloured square. If you click on that square, a full colour picker tool will pop up.
- This tool shows you the colour visually.
- It often lets you see the code in different formats (HEX, RGB, HSL). You can usually click a little arrow or icon to switch between them.
- It even has its own built-in eyedropper, so you can pick other colours from the page right from within the Inspector!
Copy the Code: You can simply double-click the code in the CSS panel to highlight it, then right-click and copy, or use Ctrl + C.

Why Is There So Much Crossed-Out Code?

As you look through the CSS panel, you might notice that some color properties have a line struck through them. This is perfectly normal. CSS code is ‘cascading,’ which means multiple rules can apply to the same element, but only one wins. The browser crosses out the rules that have been overridden by a more specific rule.

The rule to remember is this: the color property that is NOT crossed out is the one that is currently active. It’s usually one of the ones nearest the top of the list.

Uncovering More Than Just Colour

The best thing about using the Inspector is that you get a whole treasure trove of information about the text, not just its colour. In the same CSS panel, you’ll find other properties that tell you:

font-family: The name of the font being used (e.g., Arial, Helvetica, or a custom web font like the BBC’s Reith Sans).
font-size: How large the text is (e.g., 16px for pixels or 1.2rem for relative units).
font-weight: How thick or bold the text is (e.g., 400 for normal, 700 for bold).
line-height: The spacing between lines of text.

This makes the Inspector an incredibly powerful tool for designers and developers who need to replicate a style with perfect accuracy.

Pros and Cons of Using the Inspector

Pros:

100% Accurate: It gives you the exact colour code the developer intended.
Provides Extra Information: You get the font family, size, and weight as well.
No Installation Needed: It’s already built into your browser.
Helps You Learn: It gives you a little peek into how websites are built.

Cons:

A Bit More Intimidating: The sheer amount of code can be off-putting for absolute beginners.
Slightly Slower: It takes a few more clicks than a simple eyedropper.

Once you’re comfortable with it, the Inspector will almost always be the best tool for the job. That initial feeling of being overwhelmed by the code quickly fades once you realise you only need to look for one or two key properties.

Method 3: Viewing the Source Code – For the Determined Detective

This method is a bit old-school, and to be honest, it’s not the most efficient way to find a font colour. But it’s worth knowing about, as it gives you a deeper understanding of how a webpage is put together. It involves looking directly at the website’s CSS stylesheet.

A stylesheet is a separate file, ending in .css, that contains all the style rules for a website. Think of it as the master document that defines the entire look and feel of the site.

How to Find and View a Website’s Stylesheet

Go to the Website: Open the page you’re interested in.
View the Page Source: Right-click anywhere on the page (not on an image or link) and select “View Page Source.” This will open a new tab filled with the site’s HTML code.
Find the Stylesheet Link: Somewhere near the top of this code, in the <head> section, you will find links to the site’s CSS files. You are looking for a line of code that looks something like this:<link rel="stylesheet" href="[https://www.example.co.uk/styles/main.css](https://www.example.co.uk/styles/main.css)">The important part is the href attribute, which contains the address of the CSS file.
Open the Stylesheet: Click on that link. This will open the CSS file itself, which will be a huge wall of text containing all the style rules for the website.
Search for Colour Codes: Now, you can use your browser’s find function (Ctrl + F or Cmd + F) to search the document. You could search for:
- A specific element you’re interested in (e.g., h1 for a main headline, or .article-body for the main text).
- The property color:.
- Common colour codes like # or rgb.

Why This Method is a Bit of a Faff

As you can probably guess, this is a very roundabout way of doing things.

It’s like looking for a needle in a haystack. Modern websites can have thousands of lines of CSS, spread across multiple files. Finding the specific rule that applies to the specific text you want can be incredibly time-consuming.
You don’t know which rule is active. Unlike the Inspector, which shows you the live, applied styles (and crosses out the ones that don’t apply), a raw CSS file just shows you everything. You’d have to be an expert to figure out which rule is actually being used.

So, when would you ever use this method? It’s really only useful if you want to get a broad overview of a website’s entire colour palette. By scrolling through the CSS file, you can see all the different colour codes the developers have defined, often with helpful comments like /* Brand Primary Blue */.

For finding the colour of a specific piece of text, stick to the Inspector. It’s faster, easier, and much more direct.

Organising Your Found Colours: Creating a Palette

Finding a colour is one thing, but remembering it and using it is another. Just copying and pasting a code into a temporary note is fine for a one-off task, but if you’re collecting colours regularly, it’s a good idea to keep them organised. This collection of colours is called a colour palette.

Here are a few ways to save and manage the colours you discover.

Simple Methods

A Simple Text Document: The easiest way is to just open a text file (using Notepad on Windows or TextEdit on Mac) and create a list. You could organise it like this:My Website Palette --- Dark Grey Text: #333333 Primary Blue Link: #0077CC Button Green: #5CB85CIt’s basic, but it works.
A Spreadsheet: For a bit more organisation, you could use a spreadsheet in Excel or Google Sheets. You could have columns for the colour’s HEX code, its RGB code, and a description of where you use it (e.g., “Main Headlines,” “Footer Text”). You could even colour in the cell background to give you a visual preview.

Dedicated Palette Tools and Apps

For those who do this often, there are some fantastic tools out there designed specifically for creating and managing colour palettes.

Coolors: This is a brilliant website and app that lets you generate, save, and share colour palettes. You can manually enter the codes you’ve found to build up a scheme. It also has a great feature where you can upload a photo and it will automatically pull out a palette for you.
Adobe Color: If you use Adobe products like Photoshop or Illustrator, this is the tool for you. It’s a powerful web-based tool that syncs your saved colour palettes directly with your Adobe software. You can explore palettes created by other people, and it has advanced tools for checking things like colour harmony and accessibility.
ColorZilla’s Palette Viewer: The same browser extension we mentioned earlier has another neat feature. It keeps a history of the colours you’ve recently picked. You can open its palette viewer to see them all and export them as a collection.

Using one of these tools is a great habit to get into. It means you’ll always have your favourite colours on hand, perfectly organised and ready to use in your next project.

A Quick Word on Accessibility: Colour is Not Just for Looks

When you’re picking and using colours for a website, it’s really important to think about accessibility. This means making sure that everyone can read your text easily, including people with visual impairments like colour blindness.

The most important factor here is contrast. This is the difference in brightness between your font colour and the background colour it’s sitting on. If the contrast is too low (like light grey text on a white background), it can be very difficult for many people to read.

There’s an official set of guidelines for this, called the Web Content Accessibility Guidelines (WCAG). They give a specific ratio to aim for.

AA Standard: This is the minimum acceptable level. The contrast ratio should be at least 4.5:1 for normal text.
AAA Standard: This is the gold standard, offering an even better experience. The ratio should be at least 7:1.

You don’t need to calculate this yourself! There are plenty of free online tools that will do it for you.

WebAIM Contrast Checker: This is the most popular one. You just enter your font colour code and your background colour code, and it will instantly tell you the ratio and whether you pass the AA and AAA tests.
Browser Inspector Tools: Most modern browsers now have a contrast checker built right into their Inspector. When you use the colour picker, it will often show you the contrast ratio and a little tick or cross to tell you if it’s accessible.

Whenever you’re choosing font colours, especially for important body text, take a moment to run them through a contrast checker. It’s a small step that makes a huge difference to a lot of people. It’s a crucial part of responsible, user-friendly web design.

Conclusion: You Are Now a Colour Detective

And there you have it. You’re now equipped with all the skills you need to identify any font colour on any website. We’ve gone from the simple, point-and-click ease of a browser extension to the surgical precision of the built-in Inspector tool. You know what the different colour codes mean, how to organise your findings, and even why it’s so important to consider contrast and accessibility.

You no longer have to guess or try to match a colour by eye. You can now get the exact, perfect code every single time. This is a superpower for anyone who creates things for the web, whether you’re a seasoned professional or just starting out.

The next time you see a colour you love online, don’t just admire it—grab it! Open up the Inspector, use your trusty eyedropper, and start building your own library of beautiful, effective colours. The web is your oyster, and it’s a very colourful one indeed. Go and explore it.

The Guide to Finding Font Colours on Websites: From Eyedroppers to Inspector Tools

Why Bother Finding a Font Colour?