Starting at the top category, Color Palette, we can quickly add our color scheme to the entire site.
Here we define the color palette used for the entire website. Sticking to one simple color palette creates an enjoyable and professional look. The colors we choose will automatically be assigned to backgrounds, text and other elements. These can also be be directly assigned to elements in the “Typography”, “Background” and similar sections within this Customizer tool. We will cover each of these as we go.
For those already familiar with using a defined color palette, this section should be pretty simple. For those who usually just assign colors by the element, sticking to a few pre-defined colors will make a big difference in achieving an organized and clean appearance. For great color palette ideas, there are many tools online to help, with Design-Seeds.com being a personal favorite.
We will make use of only two to four colors by default, but all colors entered in this color palette will be available for individual elements in the Typography and Background sections (we will cover each in this tutorial).
This theme will use two important colors to create the overall appearance. The first color is the Accent color. This will become the most prominent color on the website. This will be a defining color, but will usually not appear as a background or in a large area. Instead, this will be placed strategically throughout the website and often used against the Primary color.
The second important color we call the Primary color. This will become the common background color. Text will often sit on top of the primary color, so it is usually best to make it either very light or very dark. This will allow for either black or white text show well. Like with any of these colors, we can change the default color assignments in other sections. if, for example, we use a very dark Primary color here, we can make the text a white color in the the “Typography” section of this Customizer tool.
Next we move on to the Secondary, Alternative Light and Alternative Dark color settings. These three colors are not used by default, but can be useful when setting individual elements
High Contrast Black is the default text color. The text color can be changed to anything else in the Typography section, but this will be best for most websites with a light color for the background. Ultimately, this is the text color that is used in conjunction with the High Contrast White setting for the default Post and Page text areas. These areas are where the most reading takes place, so it is important to make sure these allow for clear and legible text.