This post shows the manual route first, using the developer tools that ship with every major browser. Then it covers how to separate real brand colors from incidental ones, how to read a font stack, why a color pair needs a contrast check before you reuse it, and what to put on a one-page brand sheet. If you want a faster route, the Brand Kit Extractor does the reading for you, and the sections below explain how to check its answer.
Why you would want to get colors from a website
The most common reason is a brief. A designer, a freelancer or an ad platform asks for your brand colors and fonts, and the only complete source is the live site. Rebuilding a landing page, adding a new section or commissioning a banner all go faster when the hex codes and font names are in front of you.
The second reason is consistency across channels. Ads, emails and social graphics drift away from the site over time, one slightly different blue at a time. Setting the site's values next to your ad creative shows the drift quickly, and it is worth doing before a campaign launch. The Google Ads vs Meta Ads comparison helps you decide where that creative will run.
The third is auditing your own site. Themes, plugins and several editors over the years can leave a site with eleven near-identical grays and three heading fonts. The fourth is study. Looking at how a competitor uses color, which colors carry buttons and which stay quiet, tells you something about how they position themselves.
Manual methods with your browser's developer tools
Right-click any element and choose Inspect. The Styles panel lists the CSS rules that apply to it, including color, background-color and font-family. Click a color swatch in the panel and most browsers open a picker that lets you switch between formats. The Computed tab shows the final value after every rule has been applied, which settles any conflict between rules.
For fonts, the Computed tab in Chrome and Edge has a Rendered Fonts section that names the font actually drawn on screen. That answers the question behind most searches for a website font identifier, since the font-family line only lists what the designer asked for. To see the font files themselves, open the Network tab, filter by Font and reload. Files ending in woff2 or woff are the web fonts, and their file names or the Google Fonts address that served them usually include the family name.
Modern sites often define colors once as CSS variables, such as --brand-primary, in a rule on the root element. Select the html element and read the Styles panel from the top. If the variables exist, you get the designer's own names for the palette, which is more useful than a list of codes. Two more places are worth a look. The theme-color meta tag in the page head sets the color of the mobile browser bar and is often the primary brand color. The logo, if it is an SVG file, contains its fill colors in plain text.
Hex, RGB and HSL: the same color in three notations
You will see colors written in three ways, and they are interchangeable. Hex is the most common: #1A73E8 packs the red, green and blue amounts into three pairs of characters. The same color in RGB is rgb(26, 115, 232), and in HSL it is hsl(214, 82%, 51%), which describes hue, saturation and lightness.
Use hex when you hand a color to a designer or an ad platform, because every tool accepts it. Use HSL when you want to build variations, since raising the lightness gives you a tint and lowering it gives you a shade without changing the hue. Keep one canonical notation in your brand sheet and list the others beside it if a tool needs them.
Tell brand colors from incidental colors
A page can contain dozens of colors and only a handful are brand decisions. Frequency is the first filter. Colors that appear across many pages, such as the header, headings and buttons, are intentional. A color that appears once in a testimonial widget probably came from a plugin.
Role is the second filter. Check what carries the main call to action button, link text and headings, because those are the colors people associate with the brand. Neutrals form the third group: the near-black used for body text, the grays for borders, the off-white backgrounds. Neutrals belong in the sheet too, but they are not the brand accent, and mixing them up produces a palette that is all gray.
Third-party elements add noise. Cookie banners, chat bubbles, embedded videos and review badges bring their own colors, and photographs contain colors that CSS never mentions. Leave all of these out. When two shades are nearly identical, such as #1A73E8 and #1B74E9, treat them as one color and pick the one used most often.
Let the Brand Kit Extractor do the reading
The Brand Kit Extractor reads a public page and its stylesheets, then reports the main colors ordered by how often they appear, the fonts named in the CSS, logo candidates, taglines and notes on voice. It also rates color pairs for contrast. The free 7-day trial includes 1 credit, which covers one extraction.
It has limits worth knowing. It reads one public page per run, so a color used only on another page can be missing. It can miss colors set by JavaScript after the page loads, and stylesheets served from other domains may not be read. When it cannot find a role such as an accent color, the report says so instead of inventing one. Compare its list against what the developer tools show for your buttons and headings, and correct anything that looks off.
Check contrast before you reuse a color pair
Finding a color on a site does not mean it works as text. The Web Content Accessibility Guidelines set the usual targets: a contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large text, which means roughly 18 point regular or 14 point bold and above. Interface parts such as button borders and icons use 3 to 1 as well.
Light gray on white is the classic failure, and so is white text on a bright yellow or a mid-tone green. Browser developer tools show the ratio in the color picker, and many free contrast calculators accept two hex codes. Test every pair you plan to use in text, in both directions, and record the approved pairs in the brand sheet. This matters again on landing pages, where unreadable form labels cost conversions, as the landing page conversion checklist explains.
Reading a font stack and understanding font licensing
A font-family line is a list, such as 'Inter', Arial, sans-serif. The browser tries the first name, and if that font is unavailable it moves to the next. The first named font is the one the designer wants. The names after it are fallbacks, and the last entry is a generic family such as sans-serif that guarantees something readable.
A web font is a file the site delivers to every visitor, and it can be any typeface the owner has the right to serve. A system font is one already installed on the visitor's device, such as Arial, Georgia or the default interface font of the operating system. Sites often list a web font first and system fonts behind it, so a visitor with a slow connection still sees readable text.
Finding the name does not give you permission to use the font. Many families, including most on Google Fonts, carry open licenses that allow free commercial use, and others are sold under licenses that cover specific uses such as web, desktop or app. A license for a competitor's site never transfers to yours. Check the foundry's terms before you download or embed anything, and when in doubt pick an open family with a similar look.
What goes on a one-page brand sheet
Keep it to a single page so people use it. List the primary color, secondary color and accent with hex and RGB values, then the neutrals used for text, borders and backgrounds. Add the approved text and background pairs with their contrast ratios. Name the heading font and the body font with weights, where each one comes from and what its license allows.
Include the logo files you have, the minimum size you allow and the clear space around it. Add a few lines on voice, such as sentence length, how formal the wording is, and two or three words you always use or avoid. A sample tagline helps new writers match the tone. If your page changes, weekly Monitoring reports shifts in the Marketing Audit checks, although it does not compare colors, so rerun the extraction after any redesign.
If you sell against a competitor, run the same process on their page, then compare it with your own findings in the Competitor Comparison. The method for reading the rest of their site is in competitor website analysis. For a full review of your own pages beyond color, work through the website audit checklist or run a Marketing Audit.
Your next step: open your homepage, inspect the main button, headline and body text, write down their colors and fonts, test each text and background pair against the 4.5 to 1 target, and save the result as a one-page sheet.
Frequently asked questions
How do I find the colors used on a website?
Right-click an element, choose Inspect and read the color and background-color values in the Styles or Computed panel. Check CSS variables on the root element for the full palette, and the theme-color meta tag for the main brand color. A brand extractor can list the most frequent colors in one pass.
What font does this website use?
Inspect a heading or paragraph and open the Computed tab, where Chrome and Edge list the rendered font. The font-family value shows the full stack, and the Network tab filtered to Font shows the downloaded font files. The first name in the stack is the preferred font.
Can I legally use the same font as another website?
Not automatically. Identifying a font does not give you a license. Open-source families, such as many on Google Fonts, are free to use commercially, while others require a purchase that covers web use. Check the foundry's license terms before you embed or download a font, and pick an open alternative if unsure.
What contrast ratio should my text colors meet?
The Web Content Accessibility Guidelines ask for at least 4.5 to 1 for normal body text and 3 to 1 for large text, roughly 18 point or 14 point bold and up. Check each text and background pair with a contrast calculator before you commit to it.
Why does my extracted palette miss a color I can see?
Colors set by JavaScript after the page loads, colors in stylesheets from other domains and colors that appear only on other pages can be missed by a tool that reads one page. Photos and embedded widgets are also outside the CSS. Inspect that element manually to confirm the value.