Color Palettes for Animation
Color Design Tips with HTML5 and CSS3
The Color Wheel
Introduction
Learn to design color palettes for JavaScript, HTML5 and CSS3 color animation. Color palettes set the mood for animation as color changes over time. Working with colors from the color wheel can help you choose hues which look great with online animated projects. However additionally, most color theory concepts apply to anything with color, from paintings, to Web design and architecure.
This tutorial discusses the difference between complementary and analogous colors, using the color wheel for reference. Learn how complementary and analogous colors often convey emotion. This article presents methods for artists to prepare color palettes with Photoshop and Illustrator, in order to apply those colors to JavaScript or CSS.
Animation Methods
Atleast two methods exist to animate colors with HTML5. Animation with CSS3 color attributes can provide gradual changes between colors. Animation with JavaScript color cycling is both versatile and time tested.
JavaScript color cycling displays an array of colors repeatedly, over time. The colors are assigned to background or foreground HTML elements. We've all experienced annoying blinking ads designed with JavaScript color cycling. However, color cycling provides the opportunity to create unique or beautiful effects, depending on color choices, elements, and timing. Use of color determines the style and quality, more than anything else.
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
Analogues are colors which are next to each other on the color wheel.
For example, colors directly next to yellow
would be yellow-orange
, and yellow-green
.
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,
include
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
Complementary colors are located directly across from each other on the color wheel.
For example violet
and 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 jump
. However,
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.
Prepare Colors
Artists can use graphics programs, such as Photoshop or Illustrator, to convert what they see to hexadecimal format. Hexadecimal format helps transfer colors selected by eye, with graphics applications, to code and markup such as JavaScript, CSS and HTML. In other words, convert the hues and values you can see, to digits useful in applications and Web pages.
With a graphics program such as Photoshop or Illustrator, the designer can see each color, before applying the color to JavaScript, or CSS. Graphics applications allow designers to choose the color scheme or mood visually.
For example Photoshop's Color Picker
dialog box, includes a text box with the color expressed in hexadecimal format.
Designers can see the colors, then just copy the value from the text box in Photoshop, to a JavaScript
file or style sheet.
Graphics applications which save or export gradients to the SVG file format prove useful when preparing arrays of color gradients. For example, Adobe Illustrator includes the ability to save SVG graphics to an editable text file. Prepare a gradient visually with Illustrator and save the file as text. Open the file in a text editor, then copy and paste the gradient values to your JavaScript, HTML or CSS file.
Tips
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.
Summary
This tutorial discussed methods to design color palettes for JavaScript, HTML5 and CSS3 color animation. Color palettes set the mood for animation as color changes over time. Working with colors from the color wheel can help you choose hues which look great with online animated projects. However additionally, most color theory concepts apply to anything with color, from paintings, to Web design and architecure.
This tutorial discussed the difference between complementary and analogous colors, using the color wheel for reference. Complementary and analogous colors often convey emotion. This article presented methods for artists to prepare color palettes with Photoshop and Illustrator, in order to apply those colors to JavaScript or CSS.
Have fun and love learning!
