Introduction
Most WordPress themes allow you to customize the colours used throughout your website.
Common colour settings include:
- Header colours
- Footer colours
- Button colours
- Link colours
- Text colours
- Background colours
This guide explains how to change website colours in WordPress.
Step 1 – Log Into WordPress
Open your browser and visit: https://yourdomain.co.za/wp-admin
(Replace yourdomain.co.za with your own domain name.)
Enter your WordPress username and password.
Click: Log In
Step 2 – Open Theme Customization
For traditional themes:
From the WordPress Dashboard
Click: Appearance
Then click: Customize
For Block Themes:
From the WordPress Dashboard
Click: Appearance
Then click: Editor
Step 3 – Locate Colour Settings
Depending on your theme, colour settings may be located under:
- Colours
- Global Styles
- Theme Options
- Design Settings
- Typography & Colours
Locate the colour settings provided by your theme.
Step 4 – Select the Element to Edit
Common elements include:
- Background Colour
- Text Colour
- Link Colour
- Button Colour
- Header Colour
- Footer Colour
Select the element you wish to change.
Step 5 – Choose a New Colour
Click on the colour selector.
Choose a colour from the palette provided.
Some themes also allow you to enter a colour code.
Example:
#0057B8
Changes are usually displayed in the preview window immediately.
Step 6 – Review the Design
Review your website preview carefully.
Confirm that:
- Text remains readable.
- Colours match your branding.
- Buttons remain visible.
- Links are easy to identify.
Avoid using colours that make content difficult to read.
Step 7 – Save the Changes
Click: Publish
or
Click: Save Changes
depending on your theme.
Colour Selection Tips
When choosing colours:
- Use colours consistent with your brand.
- Maintain strong contrast between text and backgrounds.
- Limit the number of primary colours used.
- Ensure buttons remain clearly visible.
- Test colours on both desktop and mobile devices.
Common Problems
Cannot Find Colour Settings
Some themes place colour options under:
- Theme Options
- Global Styles
- Page Builder Settings
- Theme Builder
Refer to your theme documentation if necessary.
Colours Change on Some Pages Only
Certain page builders or themes may apply colours separately to individual pages.
Check the page-specific design settings.
Text Is Difficult to Read
Increase the contrast between the text and background colours.
Accessibility should always be considered when selecting colours.
Conclusion
Updating your website colours is an easy way to improve branding and create a more professional appearance.
Using consistent colours throughout your website helps reinforce your brand identity and improves the overall visitor experience.
