Color Palettes for Animation

Color Design Tips with HTML5 and CSS3

Introduction The Color Palette Analogous Colors Complimentary Colors Prepare Colors Tips Summary More Color Tutorials!
Color Wheel

The Color Wheel

Introduction

Learn to design color palettes for JavaScript, HTML5 and CSS3 color animation. Color palettes set the mood for color animation. Working with colors from the color wheel helps choose hues which work well with online projects.

This tutorial explains the difference between complimentary and analogous colors, using the color wheel for reference. Learn concepts behind complimentary and analogous colors. 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 complimentary colors to grab attention.

Analogues verses Complimentary 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 analogues.

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

Complimentary 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.

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 jump. However, judicious use of color contrast can create gorgeous compositions, and eye popping effects.

Prepare Colors

Artists can use graphics programs such as Photoshop or Illustrator to convert what they see to hexadecimal format.

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. See the SVG Circle, Text, Rectangle example with tutorial, for more information about the SVG format.

Tips

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.

Summary

This article discussed methods to design color palettes for JavaScript, HTML5 and CSS3 color animation. Color palettes set the mood for color animation. Working with colors from the color wheel helps choose hues which work well with online projects.

This tutorial explained the difference between complimentary and analogous colors, using the color wheel for reference. This article discussed concepts behind complimentary and analogous colors. This lesson 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! See more HTML5 color examples.

See More HTML5 Color Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.