How to change website background color in Edge, Chrome and Firefox

Surprisingly Chrome, Edge, Safari, and Firefox lack options to change the background color of a web page. That's unfortunate, as the background color modification options on sites with weird color schemes are helpful in making text and page content clearer.

However, you don't have to rely on web designers to implement good color schemes on the website. You can manually change the background color on web pages with some browser extensions. Here's how you can customize the background color on web pages using 3 extensions for Chrome, Edge and Firefox.

How to change website background color with Stylebot

Stylebot is one of the best website color customization extensions for Chrome, Firefox and Edge. This extension allows you to customize the background color and text color on the web page to create a new style. You can apply the best website design color trends to websites using a variety of settings and features. In addition, Stylebot also allows you to customize the text on websites with that extension.

To add this extension to the browser, open the Stylebot download page for Chrome, Firefox or Edge respectively below. Click the Get or Add button on the extension's download page to add it to the browser. To pin an extension to the toolbar in Chrome, click the Extensions button , right-click Stylebot , and select Pin.

Now, try this extension by opening the YouTube video page. Click the Stylebot button on the toolbar and select the Open Stylebot option. Then move the cursor to the top left of the page so that all (or most) of the page is hghlighted and click the mouse button to select that background element.

How to change website background color in Edge, Chrome and Firefox Picture 1

With the main background element selected, click the Background box in the Stylebot sidebar. Then choose a color on the palette. The selected background element on the web page will change to the color you selected.

How to change website background color in Edge, Chrome and Firefox Picture 2

The important thing to note about Stylebot is that it allows you to change the background color for different page element areas. So you may need to change some elements to have a consistent background color across pages for some websites. To select another element, you need to click the Select an element in the page to style it button on the sidebar.

How to change website background color in Edge, Chrome and Firefox Picture 3

You can customize the text on a web page by pressing the Select an element button and clicking a paragraph on the page. Then click in the Text box to apply a different color to the selection. Click Text in the sidebar to reveal other customization options. You can change the text by choosing alternative options in Font, Size , and Style.

How to change website background color in Edge, Chrome and Firefox Picture 4

Stylebot has a hotkey for disabling and re-enabling the page styling you've applied. Press Alt + Shift + T to disable/enable styling. You can also click the Stylebot toolbar button and click the on/off switch for a site to disable/enable the styling.

You can remove the style by clicking the extension's button and selecting Options. To do so, click Styles to the left of the Stylebot tab. Then, select Delete for the style you want to delete.

How to change website background color in Edge, Chrome and Firefox Picture 5

Stylebot also incorporates a CSS editor that allows users to modify a website's color scheme with code. You can access it by clicking the Code button at the bottom of Stylebot's sidebar.

How to change website background color in Edge, Chrome and Firefox Picture 6

For more details on using Stylebot, see the instructions for that extension. You can view the tutorial by clicking Help on the Stylebot tab. This Help tab provides an overview of the extension's features and shortcuts.

Get Stylebot for Google Chrome | Firefox | Edge (Free)

How to change website background color with Color Changer

Color Changer is a simpler extension than Stylebot with which you can change background and text colors on web pages. One caveat is that this extension does not save color changes applied to web pages. However, Color Changer can still be useful for changing color schemes that are difficult to deal with on pages you visit less often.

You can add Color Changer to Chrome and Edge from the link at the bottom of this section. After installing the extension, open a website to try it out. Then click the Color Changer button and the Background option ; Drag the sliders on the Red, Green and Blue bars to change the background color of the page.

How to change website background color in Edge, Chrome and Firefox Picture 7

You can change the text color on a page in a similar way. Click the Font button to display the RGB bars for the text. Then drag the sliders on those bars to modify the text color on the page.

Download Color Changer for Google Chrome | Edge (Free)

How to change background color on web page with Color Changer

Color Changer is a Firefox and Chrome extension (also available for Edge) to change the background color, text, and links on web pages. This add-on is also easier to use than Stylebot, as it allows you to change the background color on web pages without selecting page elements. So some users may prefer Color Changer's more direct simplicity.

Click on one of the Color Changer for browser download links below to install this extension. You will then see a Color Changer button on your browser's toolbar or Extensions menu. If it's on the Extensions menu , choose to pin the extension to the toolbar.

Open the Google.com search engine in your browser. This tool has a simple white background, ideal for trying out Color Changer. Click the Color Changer button to see the extension's options. Click the Background Color button. Then choose one of the colors on the palette to apply to the background. Drag the slider to adjust the color contrast/brightness.

How to change website background color in Edge, Chrome and Firefox Picture 8

To try out the text and link color changing options, enter a keyword in the Google search box and click Search. You will then see lots of links and text to apply the color change to in the search results. You can change their color like the background color by clicking on the Text or Link Color option.

How to change website background color in Edge, Chrome and Firefox Picture 9

Color Changer saves the modifications you make to web pages. If you want to restore a website's original color scheme, open a page on that website and uncheck the Change Colors box. Or you can click the extension's Reset button.

Download Color Changer for Google Chrome | Edge | Firefox (Free)

David Pac

Update 27 February 2023