Colors are the first things users see and directly impact the way they interpret content. Not only that, but colors affect the readability of your site. Learn more about creating a color palette and how to apply it to your site effectively.
Picking a good color combination can make basic site designs appear professional, but this also means that poor color combinations can make top-quality sites look bad. To create a good color scheme that complements your design, you need to understand what color palettes are, how to create your own, and how to use them without reducing content readability.
Your color palette, also known as a color scheme, is the basis of all the colors present on a website. There are countless combinations out there and they are not all suitable for website design, so pick a palette that suits your brand identity and apply them using the information below:
- Pick at least 3 colors: dark, light, and an accent (bright).
- Apply the dark or light color to either the background or text. Don’t make the text and background color similar to one another, only one can be light or dark at a time.
- Apply the accent to places you want attention, such as buttons or links.
You can add more colors for different reasons, but we recommend a maximum of 5 colors.
The following example has colors that are simple but complement one another well:
To replicate the same color, you need to use hexadecimal codes (e.g. #ffffff for white). These are what you insert in color-pickers to make sure you get the same color every time. To do this, use free services such as Google’s Color Picker.
As you can tell, our example’s palette has three colors that follow the color rules:
- White for the main background
- Very dark blue for plain text and headings
- Dark cyan as an accent color for buttons, links, and special backgrounds
Since these colors complement one another, they won’t clash and distract users from the content of the site.
Here is how this looks on a webpage:
Color contrast is how well a color stands out from another color, and it controls whether or not people can read the content on your site. To make sure your site has good readability, never let your background color be too similar to your text or image colors.
For example, the WordPress theme Twenty Twenty-One follows these color contrast rules:
Please note that if you find it difficult to follow contrast rules, you can use a service such as ColourContrast to help you test your color combinations.
You can easily use online services to help you choose the perfect color combination, such as Colors.Muz, Color Hunt, Coolors, and Colormind. These work by suggesting colors that are complementary to the ones you want to use or save.
In case you do not know what to pick for your website palette, we suggest the following combination:
- Your brand’s main color
- Dark grey
If you want to base all of the colors on your brand design then you can just take the colors from your logo by selecting:
- The lightest shade on the logo, or the lightest shade of your main color
- An eye-catching accent that complements the other colors, or simply the main color
- The darkest shade on the logo, or the darkest shade of your main color
If you have a business with a purple logo, the site palette might look like this:
If you are not familiar with design, you can also hire a graphics designer to create color scheme proposals from the logo you want to use.
To add the color palette you want, go to Appearance → Customize and find the Colors or Base Colors panel. Sometimes this has a different name or is located in different panels in the Customizer. Refer to your theme documentation if you aren’t sure where it is.
Some themes only offer basic color customization. If you need to customize all of your site colors, check that the theme you want to use allows this. You can also install plugins that add this functionality to your site.
For more information, visit the official WordPress documentation about colors.
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- How to Design and Choose Images and Illustrations
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Creating a Hero Section
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally