Color Theory

Analysis of a company color scheme

The disadvantage of the color is that it can feel very heavy if used in large quantities. To create an inviting feel, the website of Danske Bank displays its main color prominently, but sparingly. When opening the website, the first items that pop out is the company logo, and the first of five cards that display different campaign messages.

The rest of the website uses alternative, light colors. These colors are based on an internal, corporate palette of secondary colors that have been designed to achieve harmony in both hue, saturation, and value. This sparing use creates contrast, and draws the eye more than if the entire website had used the dark blue color.

The other elements on the website complements the main, dark blue color, primarily using other shades of blue:

• The top navigation bar has a light blue background that nicely frames the page.
• Card three and four uses a field of light blue. These cards also have photographs with red elements; one as a natural element of the photograph, and the other as a superimposed graphic.
• The second card is a photograph with a largely uniform, yellowy-orange tint. Because it is a complimentary color to the dark blue, this creates a dynamic and interesting feel.
• The fifth card is a grey field used for more condensed text information. Being the least important element, the duller grey does not fight for the readers immediate attention.
• All text on light backgrounds, as well as iconography, uses the main, dark blue color.
• Calls to action are in the form of buttons. These buttons are either a light blue or dark blue, and as the only elements on the page have curved corners and a slight 3D effect. This makes these buttons instantly reconnizable throughout the website.

Creating a color palette

There are several freely available color scheme generators online. One such generator is Color Scheme Designer 3.

Color scheme generators often use geometric calculations on the color wheel to create colors that are theoretically harmonious. These geometric calculations use a starting point on the color wheel, for example 0 degrees, and then add additional hues at specific angles to this.

If the primary hue is set at 0 degrees, a single, secondary hue will be at 180 degrees. If there are two secondary hues, they will be at equal distances from the primary hue, for example plus and minus 90 degrees.

In addition to the angle of the hue, value and saturation will be set at the same level for all the hues.

While this approach will indeed create harmonious colors, they can easily appear somewhat mechanical and soulless. The real world is never symmetrical, and so, mixing things up can make them a little more interesting.

To create an example, let us assume that we want a color scheme that is calm, yet powerful and striking. Colors that could accomplish this could be deep red and brown. To create a starting point, we can play quickly set up a color scheme to work from:

This color scheme is harmonious, but also boring. Creating an interesting design using these colors would probably prove tricky.

To make things a little more interesting, let us play around with the values:

• The brown is pleasant, so we will use it as the primary hue instead a secondary one. It is a bit dark, however, so we will increase its brightness to 75 percent.
• The maroon is attractive, so we will keep it as a secondary hue without any changes.
• The purple is very dominant, even for a secondary hue, so we will drop that entirely.
• Green is a good contrast to a brown and maroon. The current green is boring, however, so we will move it 15 degrees towards yellow to make it a bit more fresh.

That’s it. By changing the scheme a little bit, we have a much more interesting base color, with two interesting accents. As long as you only adjust one value for each color (angle, brightness, saturation, light, or shadows), the colors will retain harmony and consistency.

Implementing this color should use the lightest brown as the background color. The text should still be black, to keep a high contrast, though we could probably get away with making it the darkest brown.

The page border and can be set in the darkest (middle) brown, to make the contents pop out better.

The brightest (left-most) green can be used for decorative page elements, to add color without drawing too much attention.

The brightest green can also be used for headlines, quotes, and minor text elements. The color is dark enough to ensure good contrast for small amounts of text. At the same time, it makes the headlines and quotes pop out better, making it easier to scan the page.

The brightest (left-most) red can be used for the main menu, to instantly grab the attention of users. In addition to the red text, a border similar to that in the page section can be added to the red text to really highlight the menu.