Change an HTML Page's Colors to Match Your Brand

By the Qorlize team · Last reviewed November 12, 2026

Finipage guide · Edit HTML files without code. Open Finipage

You have a page that works, maybe from a template or an AI tool, and it is in the wrong blue. Your brand color is #0F766E, a dark teal, and the page uses something like #4F46E5 on every button, link and heading. Changing it sounds like a one-minute job until you find the same blue in twelve places, three different spellings and one hover effect you only see with the mouse over a button. Knowing where colors are stored tells you whether you are facing one edit or forty.

Where a page keeps its colors

A color can be set in five places in an HTML page, and many pages use more than one.

Inline styles on a single element: <a style="background:#4F46E5">. They affect only that element and win over most other rules.
A <style> block in the <head>: .button { background: #4F46E5; }. One rule can color every element with that class.
An external stylesheet linked with <link rel="stylesheet" href="css/style.css">. The rules work the same way, but they are in a separate file you have to open.
CSS custom properties (variables), usually defined at the top: :root { --primary: #4F46E5; }, then used as background: var(--primary);. Change the value once and every use follows.
Utility classes, common in AI-generated pages that use Tailwind: class="bg-indigo-600 text-white hover:bg-indigo-700". The color is part of the class name, so changing it means editing classes, or redefining the theme (see below).

Colors also hide in places people forget: gradients (linear-gradient(...)), shadows, borders, :hover and :focus states, SVG icons with a fill attribute, and images. A color baked into a PNG or JPEG cannot be changed with CSS at all; you need to edit or replace the image.

Finding the rule with Inspect

Every desktop browser has developer tools that show which rule colors an element. In Chrome, Edge and Firefox, right-click the element and choose Inspect (or press F12). Safari needs Show features for web developers turned on in its Advanced settings first.

Right-click the button or heading whose color you want to change and choose Inspect. The element is highlighted in the HTML tree.
Look at the Styles panel beside it. The rule that wins is listed nearest the top. A property that is crossed out has been overridden by a rule above it.
Find color, background, background-color or border-color. Next to the rule you will see where it comes from: element.style for an inline style, a file name and line number such as style.css:42 for an external file, or the HTML file for a <style> block.
If the value reads var(--primary), the real color is in the variable. Search the Styles panel for --primary to find where it is defined, usually on :root.

You can change values in the Styles panel to preview a new color, but nothing is saved. Refresh and it is gone. Use it to experiment, then make the change in the file.

To see hover colors, the Styles panel has a :hov button (Chrome and Edge) where you can force the :hover state on the selected element.

Hex, rgb and hsl in two minutes

The same color can be written several ways, which matters when you search a file for it.

Notation	Example	How to read it
Hex	`#2563eb`	Red, green and blue as two hexadecimal digits each (00 to ff). Upper or lower case means the same thing. Three-digit forms like `#fff` are shorthand for `#ffffff`.
rgb	`rgb(37 99 235)` or `rgb(37, 99, 235)`	The same three channels in decimal, 0 to 255. An alpha value adds transparency: `rgb(37 99 235 / 0.5)`.
hsl	`hsl(221 83% 53%)`	Hue (0 to 360 degrees around the color wheel), saturation and lightness. Handy for making a lighter or darker shade of the same color: change only the last number.

All three examples above are the same blue. When you search a file for the old color, try the hex value in both cases and, if you know them, its rgb and hsl forms. Brand guidelines usually give a hex value; the browser's color picker converts between formats if you click the small color square next to a value in the Styles panel.

Keep text readable

The brand color that looks great on a logo can be hard to read as button text or on a light background. The Web Content Accessibility Guidelines (WCAG 2.2, success criterion 1.4.3) set a minimum contrast ratio of 4.5:1 between normal text and its background, and 3:1 for large text, defined as at least 18 point or 14 point bold (roughly 24px, or 18.5px bold).

Check every pair you create: white text on the brand color, brand-colored links on white, and the hover shade.
Chrome and Edge show a contrast ratio in the color picker when you click a text color swatch in the Styles panel. Online contrast checkers do the same if you enter two hex values.
If your brand color fails with white text, use a darker shade of it for buttons (lower the lightness in hsl) and keep the exact brand color for large headings, borders and decoration.
Light brand colors such as yellow or mint usually need dark text on top, not white.

One element at a time, or one variable

There are two ways to make the change, and which is better depends on how the page is built.

Changing an element directly. In Finipage, click an element and the properties panel shows three color fields: text color, background color and border color. Each has a color picker and a box where you can type a value such as #0F766E. The change applies to the selected element only. If you drag across part of a heading's text, the text color goes on that part only. This is quick and visual when you have a handful of buttons and headings, or when you want one section to look different. Finipage does not edit stylesheets, <style> blocks or variables, and has no CSS or source editor, so on a page with forty blue elements you would be changing them one by one, and hover colors are not shown there.

Changing the source once. Open the HTML (or its CSS file) in a text editor such as VS Code or Notepad.

If the page uses variables, change --primary (and any related ones such as --primary-dark) in :root. Everything that uses them updates.
If not, use Find and Replace (Ctrl+H in both editors) to replace the old hex value with the new one. Search in both upper and lower case, and check each hit before replacing all.
For Tailwind pages, either replace class names (bg-indigo-600 to bg-teal-700, hover:bg-indigo-700 to hover:bg-teal-800), or, if the page defines its own colors in a Tailwind configuration block inside a <script> or <style> tag, change the value there.
Save with UTF-8 encoding, open the page in the browser and check the hover states.

A practical mix: change the shared colors once in a text editor, then open the page in Finipage to adjust the few elements that need something different, such as one dark section with light text.

Keep a copy of the file before a find-and-replace across the whole page. Keeping versions of your HTML files describes a simple way to do it.

Colors and type usually change together when a page is rebranded. How fonts work on a web page covers the font side, and editing an AI-generated landing page covers the rest of what such pages tend to need.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.