Week 8 Page 5: Color and Content

Selecting a Color Scheme for Content

An important aspect of developing color schemes is selecting colors that work well with the content. A designer's first step should be to look at the content of a project and assess what kinds of colors are needed. Look at the screen shot example above and see how the designer applied color to the content.

Here's an example of the procedure a designer might follow to assess content:

1. Do I need a page background color (or several background colors). Should it be light or dark? Neutral colors like black or grey?
2. Do I need a main content area background (that is different from the page background). Do I want a radical or subtle color contrast between them?
3. Are there any tables, divs, cells or sidebars that need color? Should I use a tint/shade of the main content background color?
4. Do I have a hierarchy of text content? How many different sizes of headings do I have? Should they use contrasting colors? How much text content do I have? What color can I select to ensure that the text content contrasts against the background color (and is readable)?
5. Do I plan to use graphics (like lines, shapes, icons) in the design? What color will work with the rest of the content or visually link them to the content? 

. . . . . . . . . . . . . . . . . . . . . . . . .

Using a Color Palette Generator

There are some amazing tools for generating a color scheme for your projects. In fact, these tools are such fun that you may never even get to your projects!

One of the best known color scheme sites is Adobe Color. Not only can you create your own color schemes but you can also select from ones contributed by other users. The system is fairly easy to use. You can either access it online or use the application within Photoshop, InDesign and Illustrator CC. Adobe Color: https://color.adobe.com/ Links to an external site.

Here's a helpful video on how to use Adobe Color:

How to Create a Colour Palette with Adobe Color CC Links to an external site.

Before you use a color palette generator for a design project, it's important to follow the steps above to assess your content first! In this way, you'll know what kind of colors you need before you get lost in the world of color palettes.

Here are a couple more color palette generators you might enjoy:

• http://paletton.com/ Links to an external site. This tool is nice because it shows colors layered on top of each other in addition to next to each other.
• http://coolors.co/ Links to an external site. 
  Here's a short video I made about using Coolors for another class.

. . . . . . . . . . . . . . . . . . . . . . . . .

Using a Photo to Generate a Color Scheme

The photos being used for a project can be a great source of color inspiration. You can use the eyedropper tool in Adobe Photoshop (or InDesign) to select colors that resonate with a primary photo in a design. InDesign also has a new tool in 2015 called the Color Theme Tool. It allows you to drag over an image and create an automatic palette from the colors. Of course, this may not be the perfect palette in terms of functionality (colors that contrast enough particularly for backgrounds) but it's a good start.

There are also online tools to help you with this. These allow you to upload an image and they use this to generate a corresponding color scheme.

Here's an example: http://www.pictaculous.com/ Links to an external site.