The student will gain an understanding of color theory as it relates to color trends and discover a few ways to effectively select a suitable working color palette for a web project.
- [Instructor] Good design can cash in on color trends but great design uses the colors that are right for a project, regardless of what everyone else is doing. In this lesson, we'll briefly examine color theory and color trends, and discover a few ways to effectively select a suitable working color palette for a web project. Each year, color houses like Pantone and CSI Color release their predictions for color of the year along with seasonal colors used by industries like fashion and interior design.
Many web and graphic designers also take cues from these predictions, which accounts for the recent flood of designs using mint and salmon, bordeaux and teal, pale blue and pink, purple to orange gradients, and retro 80s pastels and neon. So how do you choose the right colors for a job? Here are some suggestions. First, see what the competition is doing. Second, consider the identity or image of the company, product, or service you're designing for.
Third, determine the aesthetic color preferences of the target audience, including whether the project reach is local, regional, national, or global. Fourth, get out your color wheel and put your color theory knowledge into practice. And fifth, make a moodboard using your colors along with supporting aesthetic elements like type, texture, pattern, and photos. You might think there's no reason to continue using a color wheel after you've been designing for a year or two, but it's truly one of the best tools a designer can use.
The wheel itself is a beautiful representation of color theory, which explores the nature, history, and role of color in art and design, as well as color-mixing and color perception. Using the color wheel you can easily choose harmonious colors to set the right mood or meaning for the content in your web design. The most popular color combinations are monochrome, complementary, split-complementary, analogous, and triad. Choosing attractive color harmonies for your own web projects depends on several factors.
First there's the medium. On the web, colors are RGB, which tend to be more vibrant than color in print. This means you might not want to rely on a printed color book when choosing colors for a web layout. Instead, open up one of your graphics programs and play around with squares of different colors onscreen. The second thing is history. Every decade seems to have its own distinct color theme. For instance, color blocking is currently on trend in web design. You'll also see a lot of monochrome, pastels, rainbow hues, and nature-inspired brights.
Fads is another thing. Color harmonies often shift with the seasons. In fact, professional color consultants select new colors several times each year. Web trends often follow fashion so if you're seeking color inspiration look no further than the runway. And then there's competition. As much as you may admire what your competitors have done, it's probably not a good idea to use the same exact colors or anything too similar. Instead, create your own palette to make your site distinctive.
While there are no absolute rules for choosing color, I think it's smart to start with one color that's appropriate to your project's goals. From there, you can select analogous, monochromatic, triadic, complementary, or even split-complementary colors, or even break away from the color wheel and choose colors that are more organic. You can also sample colors from a key photograph that you intend to use to insure that your colors will be harmonious in some way. There are lots of tools you can use to choose color, like Adobe Color at color.adobe.com.
Or the color, color guide and color themes panels in Adobe Illustrator. You can also use an invert adjustment layer in Photoshop to get an exact complement of a selected color. And if you're using Adobe programs versions CS5 and up, you can integrate your own color palettes with your design through the Adobe Color Themes extension. There are other options, too. Some designers prefer to download a freestanding color picker app like colorpicker.com, or use an online color picker tool like this one from W3Schools.
Some people even install color browser extensions, plug-ins, or color apps for various devices. If you use Firefox there's an extension called PixelZoomer. Chrome users can check out an extension called Eye Dropper. There's also a nice list of color tools for designers on the Hongkiat blog. One thing that many of these tools have in common is that their preset options will display a set of five colors. In my experience, five is often too many for a web design project.
Strive instead to select one primary, one secondary, and one accent for a total of three colors. If you then need additional colors you can use tints, tones, or shades of your primary or secondary, that is, lighter or darker versions of your colors by mixtures of white, gray, or black. Wherever you find your color inspiration be sure to choose a palette that supports and complements your project. While following color trends might make a site appear contemporary at first, it can also make a design seem outdated only a few short years later.
When you carefully consider the project's goals along with the mood or feel you'd like to evoke, choosing colors can be one of the most enjoyable aspects of a design project.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices