![Thank you! Contact: Greg Urban [email_address]](https://image.slidesharecdn.com/tcukcolortalk2011-110921122338-phpapp01/85/Rules-of-thumb-for-using-colour-in-your-content-68-320.jpg)
Rules of thumb for using colour in your content
- 1. Color in content Presented by Greg Urban Contact: gjurban@pacbell.net
- 2. 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?
- 3. Best way to choose colors?
- 4. 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.
- 5. 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
- 6. Using the color wheel The color wheel is a useful tool for seeing the relationships between colors
- 7. Complementary (opposite) Primary Color Complements Secondary Color Complements
- 8. 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.
- 10. Analogous
- 11. 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).
- 13. 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.
- 15. Muted, rich, split complements
- 16. Triads Triads are three colors split evenly apart on the color wheel.
- 17. Triadic colors
- 19. Triad
- 20. Bright triad (well, mostly)
- 21. Muted triad
- 22. 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.
- 23. Contrast
- 24. 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
- 25. Color contrast http://samesameordifferent.com/ Part of the interesting ‘Color is relative’ web site http://colorisrelative.com/color/
- 28. 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.
- 29. 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.
- 30. Value is relative. It depends on contrast with other values
- 35. 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.
- 39. Original iPad sunflower Selected and enlarged in Photoshop
- 40. Used Magic wand and Level adjustment to lighten value of yellow and darken blue
- 42. Enough talk let’s do some stealing
- 43. Using Rainbow Firefox plug-in
- 44. The Rainbow Color Library Framemaker color definitions
- 45. Applying ‘stolen’ colors to a document
- 46. Colors applied to doc
- 47. Stealing from the Masters
- 48. The results
- 53. How about as grayscale?
- 54. Color on the Web
- 59. Blue is the most commonly used color for content. Long value scale = better B&W printing
- 60. Blue is a good main color as other colors ‘ pop’ against it. It is also cool emotionally, even in large amounts
- 62. Summary: Rules of Thumb
- 63. 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.
- 64. 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.
- 65. 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.
- 66. 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.
- 67. 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!)
- 68. Thank you! Contact: Greg Urban [email_address]
Editor's Notes
- #15: Green, red-orange, and light red-violet. If you wanted to add some more vibrancy, add blue dutch iris, as they are complements of the orange.
- #16: North Berkeley Library. The main yellow-orange is contrasted with a dark blue-green and a muted red-violet.
- #19: Often thought of as the primary colors triad. Often seen in children’s toys. But this is not a pure triad. Mondrian pushed the red towards red-orange and added a little red to the yellow. So it could be almost a complementary combination.
- #20: Light red-violet, teal, and light yellow-orange
- #21: Triads are pretty stong as the they have 3 contrasting colors that are as far apart as they can be on the color wheel. I am fudging on the bright here as the yellow is really muted and muddy.
- #32: Why value is the most important component of color
- #42: I realized after I did this that the color no longer read as ‘Aqua’ so that was probably why Apple decided to go with the lighter blue.
- #45: I manually copied the Hue, Sat, Val settings from the color library into Frame. Doesn’t actually work that well. But Frame didn’t offer me the option of using Hex.
- #47: Left is straight steal. I tried putting a complementary pumpkin on the note just to see how it worked.
- #52: Do you see a problem with these colors? They are pretty close in value. What are they in terms of a color combination. Analagous.
- #60: I made some comparison charts showing various hues and how they print in grayscale. Admittedly, I could probably tweak some of these colors, but these are the pure shades.
- #62: This page from Wired magazine shows the most common colors used in corporate logos. Mostly blue, with some red and a smattering of green. This was from 2003, nowadays there is probably a bit more green.
- #65: If pressed for time, or you lack the inclination to mess with colors. Use blue as your default choice. There is an old saying “No one ever got fired for buying IBM.” No one ever got fired for using blue text headings. Also, remember IBM’s nickname.