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.
Understanding a color palette
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:
A minimalist color palette
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:
An example of a website that uses colors effectively to enhance its content
Using color contrast for site readability
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:
Adjusting the color automatically updates the text to a better color
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.
Creating your color palette
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.
Examples of color palettes generated from online services
In case you do not know what to pick for your website palette, we suggest the following combination:
White
Your brand’s main color
Dark grey
A website color palette consisting of White, Coral Pink, and 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:
A website color palette consisting of variations of Purple
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.
How to add colors to your site
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.
Setting up the website palette in the Customizer
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.
Envía tus comentarios a nuestro equipo de documentación