Computer Color Palettes and How to Use Them to Design Touch Panels

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 thuought the color spectrum - if you mix a cool with 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 Warm color are at the other end of the spectrum in the red area.

Cool colors receed into the background while warm colors move forward
Cool colors receed into the background while warm colors move forward
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 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. 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. 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.

Color Palette
Microsoft Windows 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. 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. 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. 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. 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.

Graphic Design for Touch Panels - Text and FontsText and Fonts