Palette Content

Color Selections

You can find entire books on the psychology and science of colors and the implications for desining online presentations. We're not going to be that deep here--just some general guidelines.

Also, as with our remarks in the section on navigation, our ideas here aren't applicable to most pages on Writing.Com.  Our focus is on launch pages for more complex content.  By a launch page, we mean that users access the content by clicking on buttons that either launch new pages or use dropnotes to reveal the content without leaving the main page.   The actual content is most often best formatted with convential text formatting tools.

With that out of the way, let's talk a little bit about things you can and can't control.

First, every page will have a primary color.That's not true for every web page, but it's true for the pages we can create as users on Writing.Com. It's a good news/bad news situation, though.  The good news is that we don't have to choose a primary color--it's something the user sets in their account practices.  The bad news is that this color could be white, light yellow, or varying shades of gray.  Whatever the user has selected is automatically the background for the page and hence the dominate color. That pretty much makes it the primary color.

However, the default background color is white, so it's a good bet that most users will have that as their background.  Moreover, all of these colors are neutral, so they won't clash with almost other color choices. However, the darkest background can have implications for contrast--more on that later.

Given that any page has a default primary color, you still need to choose a color palette.  For launch pages, which is what we are writing about, these will primarily be for things like the graphical elements used as navigational links and maybe the text colors used in those elements. 

How many colors? ▼

The keep it simple rule is usually good here. Using too many colors runs the risk of making your page look noisy.

Web pages often follow the three color rule: 60% primary color, 30% secondary color, and 10% accent color.

However, the background color is going to be your primary color, so if you apply this rule on your Writing.Com pages, you'll only have two colors. That can work, since you can use different tints shades , and tones of these colors for variety, but it's not a bad thing to add a fourth color. 

For graphical elements, you might consider a modified three color rule: 60% main color, 30% secondary color, and 10% accent color., where the color choices apply to your graphical elements.

Color Palette. ▼

Your color palette is your choice of which basic colors you will use for the main, secondary, and accent colors.  The color wheel is a useful tool in making these selections.

Most color wheels show twelve basic colors.  This one shows various tints of these colors--the basic color is in the outer ring, and the inner rings mix that color progressively with shades of white, to get different tints.  The second graphic shows the names of the twelve basic colors, starting with blue-green in the nine-o'clock position and proceeding counter-clockwise around the wheel.  Shades mix the basic colors with black to obtain darker versions.  Tones mix both white and black.

The palette for this set of pages is basically monocrhomatic: it uses different shades and tints of blue for the navigational elements.  The artbrush background for the buttons is basic blue, the text is a darker shade of the same color, and the glow around the text is a lighter tint.

The text in the header graphic is similar, with the text itself the basic blue color, outlined in the darker shade of blue, and with a slightly darker tint for for the glow.  The "brand" for this site is more colorful and not constrained by the palette, for variety.

Choosing your Palette ▼

When choosing your palette, it's important to consider contrast. In the case our choices for this site, we used a glow around the text to help set it off from the background, increasing the contrast. We might have made other choices for the secondary color though, that didn't require a glow.  For example, if instead of blue we had chosen red.  Then the "Palette" button would have looked like this, and no glow would have been needed:

We even thought about a rainbow text for this button, but decided to stick with the basic monotone scheme.


While we used a monochrome strategy for our palette, there are other possiblities.

Complementary palettes choose two colors from the opposite sides of the color wheel. These can be effective because they create both visual balance and tension, To avoid too much tension, it's best if one is the basic color and the other is one of the accent colors.

Analogous palettes choose colors from adjacent spokes on the color wheel.  This makes the colors fit together in appealing ways and can result in beautiful designs. Attention to contrast via shade, tint, and tone can be important with these.

A triad palette choses three equally-spaced colors from the wheel. This should be used with caution, though, as it runs the risk of making your page look noisy.

The Psychology of Color. ▼

This is where you can find graduate-level textbooks and is beyond the scope of this little set of ideas.  Instead, we're going to list some common cultural associations with color from Stephaie Corrigan.  

Red: passion, power, love, danger, excitement
Blue: calm, trust, competence, peace, logic, reliability
Green: health, nature, abundance, prosperity
Yellow: happiness, optimism, creativity, friendliness
Orange: fun, freedom, warmth, comfort, playfulness
Purple: luxury, mystery, sophistication, loyalty, creativity
Pink: nurturing, gentleness, sincerity, warmth
Brown: nature, security, protection, support