Your logo is deep green. Your website buttons are the bright blue the theme shipped with, and the links in your blog posts are a third colour nobody chose. You have a brand guide somewhere with exact colour codes, and you would like the site to match it without hiring a designer for an afternoon’s work.
You can change colours in WordPress yourself, and if you do it in the right place, one change carries through the whole site. The trick is to set colours globally first, through the palette, and only then touch individual blocks.
Before you start: collect your colour codes
Websites use hex codes, a hash sign followed by six letters and numbers, such as #1F5C3A. Your brand guide, your logo designer or the person who made your printed materials should have them. If you only have a logo file, a free colour picker in your browser or design app can read the codes from it.
Then give each colour a job. A small business site rarely needs more than these:
- Primary: your main brand colour, used for buttons and key highlights.
- Accent: a second colour for smaller touches, used sparingly.
- Text: a very dark grey or near-black for paragraphs.
- Background: white or a very light tint.
- A light neutral: a pale grey or tint for boxed sections.
Writing these down before you open WordPress stops the slow drift towards a site with a dozen nearly identical shades.
How to change colours in WordPress with a block theme
In block themes, you set the colour palette from the Site Editor, under Styles.
- Open the Site Editor from Appearance → Editor and select Styles (some versions also want a click on the pencil icon).
- Open Colors, then Palette. You will see the theme’s colours and space for custom ones.
- Click a theme colour to change its hex code. Replace the theme’s primary colour with yours, and so on down your list.
- Add any extra colour under the custom section, giving it a clear name such as “Brand green”.
- Go back to Colors and set the elements: Background, Text, Links, Buttons and Headings, depending on what your theme lists.
- Click Save.
The palette earns its keep later. When a block uses a palette colour, WordPress remembers the palette entry rather than the raw code. Change the entry later and every block using it updates. A block given a one-off custom colour keeps that exact code, so it will not follow future palette changes.
The palette is one part of the wider Styles system, which our post on site-wide styles in a block theme explains in full.
Changing colours in a classic theme
Go to Appearance → Customize and look for Colors, or for a global settings area. Astra, for example, keeps its colour palette under Global. Some themes split colours across header, footer, buttons and links; others offer only a background and an accent colour.
Make your changes, watch the live preview, and click Publish when you are happy. Leaving the Customizer without publishing discards everything.
If your classic theme has no colour options for the part you want to change, a few lines of CSS usually solve it. Our guide to adding custom CSS shows where to put them so updates do not remove them.
Colouring one block
Sometimes you want one section to stand out, such as a coloured band behind a call to action.
- Open the page in the editor and select the block, or the Group block around the section.
- In the block settings sidebar, open the Styles tab, the half-filled circle icon, if your version shows tabs.
- Under Color, choose Text, Background or Link.
- Pick from your palette swatches rather than entering a custom code, so the block follows future palette changes.
Page builders work in the same spirit. Elementor, for instance, has global colours in its site settings. Set them there and pick them in widgets, rather than typing codes into each one.
Contrast: make sure people can read it
Brand colours are not always good text colours. A light yellow, orange or pale green can look lovely as a background and be almost unreadable as text, or behind white text.
The usual standard is the Web Content Accessibility Guidelines (WCAG). At level AA, normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. Free contrast checkers online, such as the one from WebAIM, tell you the ratio for any two hex codes.
The block editor helps too. If you pick a text and background pair that is hard to read, it shows a warning in the colour settings. Take it seriously. A few more habits:
- Keep paragraph text dark on light. Save reversed text, light on dark, for short headings and bands.
- Do not rely on colour alone to mark links in body text. An underline helps people who cannot tell the colours apart.
- Check your buttons on a phone outdoors. Low-contrast buttons disappear in sunlight.
Too many colours and weak contrast both feature in our list of common WordPress design mistakes, along with how to fix them.
What the palette will not change
- Colours baked into images, including text inside graphics.
- Your logo file.
- Page builder sections styled with their own colours.
- Forms, sliders and other plugins with separate colour settings.
- Colours set in custom CSS, which overrides the palette.
If one area refuses to change, it is almost always one of these.
Undoing a colour change
Block themes keep a history: the revisions button in Styles lists each saved version, and you can apply an older one, or reset everything to the theme’s defaults from the menu there. In a classic theme there is usually no history, so write down the original codes before you begin, or take screenshots of the Customizer panels. After any change, clear your caching plugin before deciding something did not work.
For other owner jobs beyond design, our WordPress owner’s guide collects them in one place, and the overview of WordPress themes explains how colours fit with the rest of your theme.
Frequently asked questions
What is a hex code, and do I have to use one?
A hex code is a six-character code, written after a hash sign, that describes one exact colour on screens. You do not have to type codes, since every colour picker in WordPress lets you choose visually. Using your brand’s exact codes, though, is the only reliable way to make the website match your logo and printed materials.
Can different pages have different colour schemes?
Yes, within limits. You can colour sections on any page with block settings, and some themes add per-page settings for things like the header. A completely different scheme on each page usually confuses visitors, so most sites keep one palette and use it in different combinations on different pages.
Should my website colours match my logo exactly?
Your primary colour should, so the site feels like the same business. The rest of the palette does not have to come from the logo. Neutral greys and whites do most of the work on a good website, and a logo colour used everywhere can be tiring. Use the brand colour for the things you want people to notice.
Can I change the colours of the WordPress dashboard itself?
Yes, for your own account. Go to Users, then Profile, and choose an Admin Color Scheme. This changes only how the dashboard looks to you when you are logged in. It has no effect on what visitors see, and each user can pick their own scheme.
Some owners would rather send over the brand guide and leave it there. Setting a palette up across theme, builder and plugins is part of our theme customization service, done on a backup or staging copy of your site where possible.
Next in this series: WordPress Global Styles: Site-Wide Design in Block Themes
