Color Palettes for Your WordPress Website

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Choose color schemes for your WordPress website with confidence after you review some basic color theory and terminology. Making the decision on a color scheme that’s just right can be very time-consuming because you know that first impressions count, and color scheme is an important part of the start of any design process.

People interpret colors differently, and what looks good to one doesn’t necessarily look good to another, and vice versa. Color and preferences in color combinations are completely subjective and based on what looks good to each individual’s eye.

Check out the color wheel

Almost every graphic design program or web-based color scheme includes a red, green, blue (RGB) color wheel that basically separates colors into three groups:

Primary colors: Includes the three main colors — red, green, and blue.
Secondary colors: Includes colors that you get when you mix equal amounts of primary colors together, such as mixing red and blue to create purple.
Tertiary colors: Includes colors that you get when you mix primary colors with secondary colors, such as cyan (blue-green), magenta (red-purple), or vermillion (red-orange).

Additionally, you can use the color wheel to discover two main color groups, or schemes:

Complementary colors: A pair, or group, of colors that exist directly opposite one another on the color wheel. Using the color wheel as the guide, an example would be yellow and blue.
Analogous colors: A pair, or group, of colors that are grouped closely together on the color wheel. Have a look at the color wheel, and you find analogous colors like orange and yellow, or red and orange.

You can find an easy-to-use online color wheel. To use this wheel, simply click in the color square on the left to find complementary or analogous color schemes on the color wheel to the right.

Examine the RGB and hex color models

In web design, the two main color models that you’ll deal with on a regular basis are the RGB and the hexadecimal (hex) systems, with the hex system being the most popular method to define colors in a Cascading Style Sheet (CSS).

RGB

The RGB color model is based on the idea that any color can be created by combining different levels of red, green, and blue. Because you’re designing for websites that are viewed through computer monitors, the RGB color model is the standard basis of color in web design.

RGB colors are represented by three numbers, each of which is indicative of how much red, green, and blue exist within the specific color. Each color has a numerical range of 256 levels of brightness represented by 0–255. You can mix and match colors by increasing or decreasing the numbers of each individual color until you find the color you like. Based on the 256 values available for each color, using the 0–255 numbers, here’s what each color equals:

Red: R: 255 G: 0 B: 0 (255, 0, 0)
Green: R: 0 G: 255 B: 0 (0, 255, 0)
Blue: R: 0 G: 0 B: 255 (0, 0, 255)

Luckily, interactive color wheels make it easy to point and click to mix and match colors to find their individual RGB values.

Hex

The most popular way that color is represented in web design is through the use of hex codes, or hexadecimals, that represent the colors in the RGB model. Two hexadecimal numbers together are a byte and represent up to 256 different colors. (Remember the RGB model also is based on 256 possible color values.) Each of the colors (red, blue, and green) is represented by two hexadecimals; and those hexadecimals use combinations of 0–9 and A–F.