University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Choosing Colors

Once the meanings associated with colors are understood, one can begin to think about what colors they should use in their own designs. Depending on what feelings and emotions you want to evoke with your design, you would choose different colors. Once the intended feel of your website is decided, it is time to start choosing the individual colors to apply to your design.

Picture of Target's website.
With so many colors to choose from, it's important to narrow them down to the ones that work best for your design.

First, and arguably most important, you want to choose a primary color that will represent your design, and potentially brand, as well as possible. This color will be the one that is most associated with your design, so it is important to think hard about it, so that the viewer will not get the wrong idea. For example, if you were to create a design that provided information about autumn, it would be unwise to make this primary color blue, as blue can represent peace and spirituality, but not really autumn. On the other hand, a warm color such as orange could be chosen here to complement the autumn theme of the design, due to it often being associated with the seasons.

Picture of the Apple website
Apple's website uses a lot of white to give their brand a modern feel.

Next, you want to choose colors that will complement your primary color well. You do not want colors that will clash with each other when put side by side, because that will make the information on the page harder to digest and understand. Instead, you want colors that will still pop out, when necessary, but not compete too much with other aggressive colors. For example, a neon blue and neon purple right next to each other would clash too much and be hard to read. Try not to have too many colors that are meant to stand out, and instead have colors that will complement the important ones well. This is why neutral colors such as white and black and used so often, because they help the less used accent colors stand out more.

A second picture of the Apple website.
The slight use of blue on Apple's websites contrasts well with the surrounding white and black, leading the viewer's eye to it.

Finally, make sure your chosen color scheme looks good across different devices. Since designs can be opened from computers, phones, televisions, and other devices, it’s important that the color scheme works well when put on all shapes and sizes of screens. Do not be too stubborn with your color scheme and be open to experimenting to see what works best for your brand and the audience.

Apple's website when viewed on a phone.
Apple's color scheme is still functional on a phone screen.