Color in content

Color and the techwriter

When do writers need to choose colors?

• Lone writer – needs to create a document from scratch

• Writer needs to adapt company-branded colors or logo and apply it to content

• Writer needs to adjust existing colors

• Other situation?

Best way to choose colors?

The short answer

Steal them.

“Good artists borrow, great artists steal” – Picasso

Take something and make it your own.

Adjust it to fit your needs.

If you just copy something it will never look right.

Workflow for choosing colors

• Intent – You want to create a certain effect. Usually calm and reassuring, but sometimes attention-grabbing. Or somewhere in-between.

• Find colors that have the effect you desire. The best ones are in a format similar to your content, so they have similar proportions.

• Adapt them to your content

Using the color wheel

• The color wheel is a useful tool for seeing the relationships between colors

Complementary (opposite)

Primary Color Complements Secondary Color Complements

Opposite (complementary)

• Tip: If your color combination seems dull, increase the amount of complementary color in one of the colors.

• A color combination is at it’s most energetic when it consists of a color and it’s opposing color on the color wheel.

Analogous

Automatically harmonious (analogous)

• Colors next to each other on the color wheel are automatically harmonious. They contain large amounts of the same color.

• Tip: If harmonious colors need more contrast between them, change their values, making some of them darker (shades) or lighter (tints).

Split complements

Split complements

The most interesting color combinations are often based on split complements.

Tip: When you are choosing accents for a main color, take the two colors that flank the complementary color on the color wheel.

Split complements

Muted, rich, split complements

Triads

Triads are three colors split evenly apart on the color wheel.

Triadic colors

Bright triad (well, mostly)

Muted triad

Muting colors

You can ‘mute’ paint colors by adding the complement of the color to the color.

This makes the color more rich and muted.

When digitally manipulating colors, you desaturate the color by using sliders to lower the amount of the main color.

Contrast

Importance of contrast

Contrast is important for good design. It differentiates and adds interest to content.

Effective contrast in design depends on:

• Different font styles and font sizes

• Graphic elements ( includes illustrations and photos) to break up text

• Color contrast

• Value contrast

Color contrast

• http://samesameordifferent.com/

• Part of the interesting ‘Color is relative’ web site http://colorisrelative.com/color/

Color is relative

The point of the previous screens is that colors exist in relation to other colors. Changing one color in a color combination can easily change the effect. This is another reason to find a color combination that has the effect you are looking for and then adapt it to your content.

The most important element of color is value

• A 10-value scale shows the 10 colors between white and black. For our purposes, value is the grayscale version of the colors in our content.

• Differences in value create contrast.

• This is important because:– Most documents are still printed in B&W– 8% of men have some degree of colorblindness– Sooner or later, we will all have weaker eyes, and

contrast is important for readability.

Value is relative. It depends on contrast with other values

We all love color, but…

Don’t let color overpower good design.

It is far more important to have good layout and good contrasts in your document.

Value trumps color when it comes to ‘reading’ the structure of a document.

Original iPad sunflower

• Selected and enlarged in Photoshop

Used Magic wand and Level adjustment to lighten value of yellow and darken blue

With revised graphic

Enough talk let’s do some stealing

Using Rainbow Firefox plug-in

The Rainbow Color Library

Framemaker color definitions

Applying ‘stolen’ colors to a document

Stealing from the Masters

The results

How about as grayscale?

Color on the Web

Blue is the most commonly used color for content.

• Long value scale = better B&W printing

Blue is a good main color as other colors ‘ pop’ against it.

It is also cool emotionally, even in large amounts

Summary: Rules of Thumb

To make color combinations more lively

Emphasize the amount of complementary color in your color combination. (‘Push’ at least one of the colors towards a hue complementary to one of the main colors.)

‘Un-mute’ your colors by lessening the amount of gray in them. Digitally, lighten them and increase the saturation.

Blue is your friend

• If you don’t have a lot of time to pick colors, use different values of blue. Use red and yellow accents (not too big!)

• Blue has a long value range, so it prints well in black and white.

• It has a cool emotional affect, so it doesn’t distract from the text content.

Value is relative and is the most important aspect of color

• If colors do not scan well in black and white, the document will not scan well either.

• A good value difference is 2.5 to 3 steps (10-step scale). This makes an easily discerned difference.

Color is relative

Changing one color in a color combination can easily change the effect.

This is another reason to find a color combination that has the effect you are looking for and then adapt it to your content.

Expect to do a LOT of tweaking to find the ‘sweet spot’

• The good news is there is slack. Color combinations can succeed even if they are a little ‘off’.

• But - there is a ‘sweet spot’ that you will recognize when you hit it…it makes everything work. (Though you can still be sabotaged by a screen with different color settings, so pay attention to value so your content will be legible!)

Thank you!

• Contact:gjurban@pacbell.net