How to Write Your First Blog Entry
How to Add a Blog to Your WordPress Website
How to Add a Web Image to Your WordPress.com Posts

Color Palettes for Your WordPress Website

Color and preferences in color combinations for your WordPress website are completely subjective and based on what looks good to each individual’s eye. Because of this adage, it’s not necessary to tell you what colors look good and which color combinations work the best because those ideas are mainly based on preference and experience.

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)

    image0.jpg

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 use 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.

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

RGB is used to represent the display of colors through electronic devices, such as mobile devices and computer monitors. 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 monitors and mobile devices, 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 and the ones you find in your preferred graphics program, 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; those hexadecimals use combinations of 0–9 and A–F.

Color Hex Code
White #FFFFFF
Black #000000
Red #FF0000
Orange #FFA500
Yellow #FFFF00
Green #008000
Blue #0000FF
Indigo #4B0082
Violet #EE82EE
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Assign a Static Page as the Front Page in WordPress
Add Bio to Your Website with WordPress Widgets
Adding a Blog to Your Website
How to Create a Sandbox Environment to Test Your WordPress Designs
How to Assign a Static Page in WordPress
Advertisement

Inside Dummies.com