University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Using Color in Web Design

Using color in web design is crucial to making a website appealing, cohesive, and memorable. There are many different ways to approach adding color in web design, with one method being the 60/30/10 method. This method involves choosing 3 colors for your website. The first being referred to as the “primary” which contrary to its name, does not actually have to be a primary color. You also need a secondary color and an accent color. Using these three colors, 60% of the webpage should be the primary color, 30% should be the secondary color, and 10% should be the accent color. This method is used to balance out the color and ensure there is not too much going on visually to take away from the content of the page while still keeping it visually appealing.

60 30 10 Rule color scheme example
This is an example of a 60/30/10 color scheme that shows the use of a primary, secondary, and accent color. Courtesy of My Design Days.

Things to keep in mind

It’s important to note a few things when choosing a color palette. The first thing to note is that organizations may have certain colors associated with them. For example, if you are creating a webpage for UNH, you are going to need to incorporate the dark blue color that is associated with the school. Another thing to note is how the colors you are choosing will look on other devices. With the increase in handheld devices, it’s safe to assume that a webpage you are creating most likely will be accessed from not only computers, but phones, tablets, etc. Lastly, you want to ask yourself, what emotions am I trying to invoke? Colors can have a significant impact on how we feel about something we are looking at and it is important to note that when choosing them. If you are trying to make a positive website, you most likely want to use a green color, rather than red or blue.