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 complimentary colors to grab attention.
Analogues verses Complimentary 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
be careful not to include
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.
Complimentary 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.
Complimentary colors placed next to each other create contrast.
Contrast often draws attention.
It's helpful to use complimentary 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 complimentary color,
to draw attention to an area of an image.
Artists can use graphics programs such as Photoshop or Illustrator to convert what they see to hexadecimal format.
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, transparency, and other combinations of graphical or programming techniques. See the Bright Color Animation or the Sunset Color Animation. Both examples use a PNG file with alpha transparency. Animate colors behind the PNG.
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. CSS3 Animated Gradient Color Backgrounds, with colors specified in percentages, create smooth gradations between colors over time.
Have fun and love learning! Learn more about color for the Web!