Color
Palettes and how to use them
Choosing the correct color for your touch panel layout is very
important. Most of us are not color experts so here we'll discuss
some very basic color theory and tools that you already have
in your tool box.
Most touch panels on the market today support millions of colors
but we are not going to need all of them. To make color selection
even easier, most software breaks this palette down to 48 colors.
To ensure that you keep your design consistent across all of
your screen, it is advisable to design your color palette before
you begin any work on the panel. Before we discuss how to design
a color palette, we first have to discuss how color works and
how people perceive it.
Color
- How does it work?
Okay, let's keep this easy... For our purposes we will discuss
two types of color. Cool colors and warm colors. Cool colors
tend to recede into the background of an image while warm colors
move to the foreground. Do you see where I am going with this?
Your background images, button face colors or anything that
is considered background should be a cool color. Anything you
want to stand out should be a warm color.
Typically
cool colors are in the blue range of the spectrum but it is
possible to have cool colors though the color spectrum - if
you mix a cool with a warm color.
Warm color are at the other end of the spectrum in the red area.
|
|
|
|
Cool colors recede
into the background while warm colors move forward
|
Color Palettes
What is a color palette? A color palette is simply a collection
of colors. In the case of your touch panel design, your base
color palette will probably be limited to 3 or 4 color. The
fewer the colors in your color palette, the easier it will be
for you to use in the design process and your users to use when
they are interacting with the touch panel.
Choose
a cool background for the screens
The
coolness of your button face colors depends on how many colors
or layers of color that you are using in your design.
Choose
a warm color for foreground elements like button faces in simple
color palette designs.
How to create a Color Palette
This is going to be far easier than you think! You have already
used the color picker tool when you previously designed your
layouts. Your design software comes pre-built to help you design
a great color palette.
|
|
|
|
Two Typical Color
Palettes
|
The principle in color palette design is the same for both
types of palette examples above. To create a palette of harmonious
colors (colors that "go together"):
Start
by selecting a color from anywhere on the outside of the grid.
I like to start coolest to warmest in color so I would normally
start in the blue colors.
Next,
simply select colors along a direct line either horizontally
or diagonally in the palette on the left or vertically or
horizontally for the palette on the right above.
Do
not sway from the line or you will not have a harmonious color
palette.
Continue
selecting as many color along this line until you have the
number that you need.
How to use a Color Palette
Using your color palette will become second nature after a short
time. Remember to layer your touch panel design with the coolest
colors in the background and the warmest colors in the foreground.
Select one color to start with and use your design software's
color palette as a guide to keep you on track using only the
harmonious colors.
Next we will discuss the importance of text and fonts.
|