Color Palettes for Animation
Color Design Tips with HTML5 and CSS3
The Color Wheel
The Color Palette
The color palette greatly affects user response to color animation. Colors can jar the senses, sooth emotions, draw attention, and set a mood.
The color wheel, illustrated above, provides an easy method to determine a color scheme based on the goal of your presentation. For example choose analogues for a natural effect or complementary colors to grab attention.
Analogues verses Complementary Colors
Analogues are colors which are next to each other on the color wheel.
For example, colors directly next to
yellow would be
Yellow, yellow-orange, and yellow-green together represent one set of three analogues.
The following graphic shows sets of analogues.
Analogous color sets read from left to right.
The first set's in the yellow range, the second set's in the red-orange range,
and the third set's in the blue-violet range.
Consider extending the set to four colors, however if so,
complementary colors sparingly.
Often analogues provide comforting, soothing, gentle, or natural effects. Additionally analogues set a mood, based on their location on the color wheel. For example analogues near blue, remind us of clear skies and clean water. Analogues near red, may remind us of fire, anger, or excitement.
Any set of colors directly next to each other on the color wheel, may be used to display an analogous color scheme. See the color wheel above for reference, and note the relatively gentle variation between colors adjacent to each other on the wheel.
Complementary colors are located directly across from each other on the color wheel.
yellow are opposite each other on the color wheel.
The following graphic displays three sets of compliments,
yellow with violet, orange with blue, and red with green.
Complementary colors placed next to each other create contrast.
Contrast often draws attention.
It's helpful to use complementary colors carefully. Too much contrast
can cause the eyes to
judicious use of color contrast can create
gorgeous compositions, and eye popping effects.
Graphic designers might add a small amount of complementary color,
to draw attention to an area of an image.
For example Photoshop's
Color Picker dialog box, includes a text box with the color expressed in hexadecimal format.
file or style sheet.
Many extraordinary effects can be created with color schemes. Consider animation which gently fades from one hue to the next, or jolting video with juxtaposed complementary colors. Consider animating colors behind semi transparent or fully transparent areas of a PNG image, for photographic realism combined with unique color.
Changes between colors should be gradual unless the effect is intentionally jarring. Minimize changes between the first and last color in a color cycle array.
Have fun and love learning!