Exploring Color in Interface Design

Color, according to Josef Albers, a 20th-century abstract painter, is the most relative medium in art. In his book, The Interaction of Color, he discusses the nature of color and how it relates to the human being, as well as how context-dependent it is. This aspect of color was the focus of his paintings as well as the empirical research carried out by his apprentices. His educational goal was to be a 'eye opener.' That is, to raise color awareness and perception while abandoning the use of rules in color application. He aimed at the development of a medium –perhaps color- and to use that medium efficiently.

Color is a broad topic ranging from colors, their different hues, to color- the light value concentration, and in the engagement of software tools for coloring. However, as we explore interface design in our case, will major in choosing and combining colors and their interactions to create various effects.

Color in Design

Color can make elaborate illusions. Boundaries can vibrate, blend, blur or sometimes, become more distinct depending on the color application scheme and during these scenarios affect each other’s pigmentation. Like styling and structuring, color is a useful design tool and depending on how it is applied it might hinder or foster design. Color preferences are among some of the objects that tend to remain unique to individuals. However, in design, the color choice should not be a matter of personal preference. Liking two colors should not warrant their use. A proper understanding of problem-solving should be developed to enable one to see how colors should be applied to achieve intended results.

As with development, color application starts with problem definition, “What problem am I trying to solve?” For example, is one trying to get the user to recognize a significant event such as a plane running low on fuel? Are they trying to provide assistance on a task a user is currently engaged in, like in differentiating sets of information? Or is the choice of color merely a tool meant to establish the mood for the people transacting with the organization?

Color Studies

Efficient handling of colors rests much upon experience and on an understanding of its principles. Albers students, to develop a discerning eye carried out experiments on colors to study their properties and effects. The main elements of research, in this case, were the hue, the light value of the colors and their relationships with each other. Hue describes the color, red, purple, orange, etc. and the light value is the light intensity, its lightness or darkness.

Effects on Edges

In areas of bordering colors, hard or soft edges can be created depending on your choice of colors. The hard edges are characterized by sharp contrasts between object borders and often the creation of a visual effect, vibration. Soft edges, on the other hand, bring less definition between borders and can, therefore, result in blurring. As was shown by Albers, complementary color combinations in colors with similar light values can be quite powerful, if text were displayed in such a manner in a web browser, the interaction between the characters (described as vibrating characters) would render the text too difficult to read. Such text would effortlessly draw attention from the message to the colors in the page. There are, however, a few pros to this kind of coloring. For example, alerts from a system over an occurring event that needs to be attended to can be easily delivered in this manner.


The positioning of two colors on top of each other can lead to blurring along their edges. Including a third color to separate them allows the edges to be clearly visible. Blurring occurs because the colors involved are of same light intensity, therefore, making them quite indistinguishable. A typical application of blurring is dithering. Pixels are interspersed and used to create color. For example, early computers could only display color in 8bit (256 colors). They were not enough to cover the whole color spectrum in nature so dithering was done to imitate some colors the computers could not generate.


In some cases, it is necessary to provide a clear distinction between two items. For example, in an electronic money management tool modeled after a checkbook- a checkbook provides a familiar feel in that money changing business. While reading, one might easily lose track of what they were reading. Paper checkbooks counter this by creating color variations on the rows. Sometimes, color choice renders the demarcations more indistinct adding further confusion to the readers. A correct way to combat this is to ensure that the previous row color is of a much higher light value than the subsequent one. This ensures that the edges will always be sharp and distinct. The marking colors, however, should not make the message in the book appear secondary. The designer should beware.

Color Changing Color

Colors can take different appearances. One color can affect another in such a way that a third color seems to emerge from their interactions. Such phenomena can be viewed in Albers’s work where two rectangles of the same color are positioned against different backgrounds. The shapes inside the rectangle appear different both in hue and light intensity despite the rectangles sharing the same color. This can be explained by Chevreul’s, nineteenth century, principle of complementarity. It states that hue will project its complement into the neighboring hue and value (light value) its complement into the neighboring value. This principle explains the color change effect. Another way to express this concept is that the background subtracts its hue or value from the foreground element. A complement implies an opposite which for colors is the hue on the color wheel that lies exactly halfway around the wheel from their current position. Some examples of complementary colors are red and green, and blue and yellow. The light complementary of black is white. In the rectangles with the same colors placed in different backgrounds, it was observed that when on a dark background, the rectangle appears much lighter and on a lighter color, the rectangle appears less green.

In another experiment featuring a calculator the buttons were colored blue, and the color of the rest of the calculator varied. A white background emphasizes the dark nature of the blue colored buttons. It also made them appear smaller as the white color seemed to have radiated into the neighboring regions. This on its own, however, is not a problem. The problem arises when the blue color is required to match the blue in other parts of the interface. The scheme might become unstable when an individual color becomes predominant. The demarcation between buttons might cease to exist if the blue color is stretched out beyond the buttons, say to the background.

This form of color interaction can be problematic in design and can cause errors in message interpretation. For example, take a system for temperature representation across a country employing colors for temperature distinction. In this scenario, green and blue denote the cold belt regions and yellow and red the warmer regions, an area of green bordered by a red region would result in an orange color that might be interpreted as yellow- a hot region. This information becomes inaccurate.

Optical Mixtures and the Effect of Transparency.

It is well known that colors can be combined to create a third. For example, green and red to create orange, yellow and red to create green. This concept can be developed further to create transparency through a skillful choice of colors.

When you consider the middle image, there are three rectangles, but the figure appears to made from to overlaid shapes. They take the form of colored glass laid one on top of the other. Creation of this illusion is reliant upon defining a correct color for the child (the area where the shapes seem to be overlaid). The child must take on the right hue and light color value to match the parents. Just like there are many children to parents, there are multitudes of color pigmentations and light values that could agree to the two colors. Assembling of colors and their mixtures is a technique for combining colors harmoniously no matter how different their origins. It is also used to create an illusionary perception of depth. One noticeable feature in the top and bottom combinations is that the child is closer to one of the parents and that parent then appears to be more opaque and above the other. The central image, however, lacks a clear sense of an object that is lying above the other. These are all results obtainable through optical mixtures and transparency.

Color and the Illusion of Three-Dimensional Space

Different light values can be used to mimic 3D effects even in 2D displays such as computer screens. Colors can seem to emerge from a background or disappear into it. If the light value of a color is in sharp contrast to the background, it hedges to the foreground. Low contrast makes objects seem far away. For instance:

On the right-hand side where the color is most separated the from the dark background, the image appears to come forward into the foreground. On the opposite side, where the color seems to be disappearing into the background, the object then looks to be sinking further and further away.

The figure above is a representation of user interface design employing spatial effects. The rectangles in space represent documents. Their light values, size, and overlap define their position in space. The darker objects seem to disappear while the lighter one’s advance. A similar example would be the Windows 95 shutdown dialog box. During the event, the rest of the window would dim leaving the box to progress (apparent) to the screen to interact with the user.


Quality designs are consistent with coherent ideas. They are not formed from personal preferences and choices, past user interfaces or joint reasoning on how to create every little item. Through the development of an acute sense of color design, we gain a powerful tool for effective interface design. The range of aspects of dynamic color interfaces is broad, and through its exploration, we should come across more interesting items than those listed here.

Deadline is approaching?

Wait no more. Let us write you an essay from scratch

Receive Paper In 3 Hours
Calculate the Price
275 words
First order 15%
Total Price:
$38.07 $38.07
Calculating ellipsis
Hire an expert
This discount is valid only for orders of new customer and with the total more than 25$
This sample could have been used by your fellow student... Get your own unique essay on any topic and submit it by the deadline.

Find Out the Cost of Your Paper

Get Price