Color Theory Basics

CREATING YOUR WEBSITE'S COLOR PALETTE

Having an alluring and cohesive color palette is essential in creating a successful website. As the technology that drives the web has given us more granular control over the colors we can use, it has become more important to hone your precise color palette. In this guide we’ll explore the many aspects and considerations needed to help you create your website’s color palette.

This guide was written by Aleksandra Tamarina. If you're interested in learning more about web design, you should take a look at our Design Course or our UX Course.

Color Theory Basics

Having an alluring and cohesive color palette is essential in creating a successful website. As the technology that drives the web has given us more granular control over the colors we can use, it has become more important to hone your precise color palette.

Welcome to Thinkful's Color Theory Basics Guide! Click here to share what you'd like to learn about next :)

In this guide we’ll explore the many aspects and considerations needed to help you create your website’s color palette.

Get notified when new guides are released

On your journey to discovering your color scheme, first consider what kind of website you are creating. What is your site’s purpose?

Another important consideration is whether your website already has a brand. If you are working with established guidelines and/or style guides, you can use the existing color palette and expand it when needed by using tints, tones, or shades of those colors. If you are crafting a website or color palette from scratch, this article will help you explore the best color options that can work for your site.

Color and brand are inextricably linked. Color offers a way to non-verbally communicate a meaning or message. Our perception of colors and their meanings mainly come from our cultural environments. People see color before taking in anything else on your site. The colors set a mood and portray a feeling that your user subconsciously perceives. You can use this your advantage to evaluate your brand and website.

What kind of feeling or connection do you want your user to have when they interact with your site? This might stem from your brand identity if you have one, and your site is an extension of your brand. Spend some time thinking about your site purpose in relation to your brand.

Let's explore some of the emotions associated with popular brand colors across the U.S. Keep in mind that these will change based on location and culture.

Some brands use these color meanings better than others to influence perception. A great example of this is McDonald’s.

The yellow arches evoke a fresh, happy sentiment. Yellow is also said to boost your feeling of being hungry. Red’s inherent nature of activity, joyfulness, and energy stimulates people to leave the restaurant quickly. Being a fast food restaurant, these colors work together to form an overall emotion and brand story. Although mcdonalds.com needs some modern updates, its colors are quite simple and focus on the food or promotion. The red color on the website is reduced since the fast food giant wants to keep you browsing rather than leaving.

Not only does McDonald’s benefit from this color combination. Many other fast food restaurants have red and yellow in their branding, such as DairyQueen, BurgerKing, Wendy's, Sonic, or Pizza Hut. They all use this color psychology to draw people in to purchase then activate them to leave so more people can be served.

Another example of good use of color meaning in a brand is Whole Foods.

Green is associated with being natural, the environment, and healing. Whole foods is known for their organic, all natural foods, setting a higher standard for grocery stores. This natural food connection works perfectly with the green color of the Whole Foods brand. Wholefoods.com uses much green imagery to evoke that same feexling with black and white neutral colors to balance the site.

Publix is another grocery store that uses green branding. If you are familiar with the grocery store chain, do you think the Publix brand embodies the meaning of the color green? It is a brand that is trying to play up the natural and sustainable qualities of its food while generously facilitating community services and protecting its employees.

Google is an example of a multi-colored brand.

Multi-colored brands denote creativity, fun, and artistry. Google may have grown up a bit since its early days, but it still retains its creative, fun nature with google doodles and other initiatives. And they have certainly mastered the art of search. Since google.com is first and foremost a utilitarian site, it needs to be usable. Google has chosen its primary color as blue, which is reflected in the links and the smaller version of its logo. The other colors play supporting roles to give hierarchy and contrast to the content on the page.

Logos such as the original Apple logo and the Olympics logo utilize the multi-colored color scheme too. Apple went through quite the color streak of its bright iMacs Flavors, its colorful iBook laptops, and its playful iPod Shuffles. The vivid Olympic rings celebrate the spirit of the Olympic games and the unity of humanity joining in energetic competition.

Begin by writing down adjectives that describe what type of personality and message your site is trying to convey. Do some of the words match up to any of the color meanings? Look at established brands/websites that are in the same category. What are some of their primary colors? Do the color meanings reflect the brand’s corporate values and how target users perceive them? Here are some examples of emotions some brands want to evoke:

Do you want to inspire confidence?

Virgin is a mega brand that does just that with its use of red and white. Red conveys action, energy, and excitement, which embodies the brand’s strength.

Reader and viewers need to feel confident in their news source. The red color has a leadership quality that implies CNN is the leader in its category bringing passion and energy to reporting the news.

Do you want to make your users feel exclusive?

Burberry uses dark grays to exude mystery, elegance, and sophistication. The user feels if they purchase a product from Burberry, they will have something luxurious.

Groupon uses green along with dark grays to promote the sense of money savings and exclusivity.

Do you want to be trusted?

Blue gives the user a sense of security, trustworthiness and stability. All the qualities you want in a credit card.

Facebook needs to be trusted by its users for them to continue to post information about their lives. The choice of blue for their brand adds to this trust factor.

After writing down adjectives about your website and matching them to colors, you should have at least one color to begin with. In order to dig a bit deeper, you need to understand some basic color terminology.

The terminology of color properties allow us to distinguish and describe color. Knowledge and understanding of these terms empowers us to adjust the colors to our needs confidently and speak the color language with designers.

Hue – the perceived value of a color, the color itself

Saturation or Chroma – the overall intensity or brightness of a color

Value – the lightness or darkness of a color

Tone – addition of gray to a pure hue or color

Shade – addition of black to a pure hue or color

Tint – addition of white to a hue or color

Color has many properties that can influence an object’s visual weight. For example, more saturated hues attract the user’s focus more than less saturated hues. The value of the color also alters its visual weight. Most importantly the hue itself carries a visual perception. There are certain hues that stand out more than others.

Red (most prominent)

Blue

Green

Orange

Yellow (least prominent)

When you use a red hue, it pops on the page more, which can be used as an advantage to call for stronger action and demand to be noticed. Whereas a yellow hue recedes into the background more and doesn’t scream off the page the way the red does.

Color relationships play an important role when pairing them for a color palette. The way colors work with each other can help you create a visually stunning site with the right focal points. To better see these relationships, many designers and artists use the color wheel.

The color wheel is an organizational tool of color that shows relationships between primary colors, secondary colors, tertiary colors, etc. This tool is one of the best ways to pick a color scheme that works.

The color wheel originated from a series of experiments published in 1672 by Sir Isaac Newton. Newton used prisms to view the different wavelengths of light that he mapped on a circle. He demonstrated that the maximum saturated hues lay on the outer circumference of the wheel, while the achromatic white was in the middle. The color wheel, Newton thought, would be useful for artists who could use his conceptual arrangement of colors to enhance the optical contrast in their work. This circular model proved to be quite effective in producing color schemes that helped to create beautiful works of art.

Now, in the modern day, the color wheel is still a relevant and useful tool than can benefit any designer or artist. When starting out creating a new website or brand, the color wheel can give you color combinations that work together to give you a cohesive look. Since the wheel is limited to the number of colors it produces in one combination, it is more of a good jumping off point rather than a final scheme.

Traditionally the color wheel has been a physical device made up of 2 or 3 pinned wheels that rotate on top of each other. A great online version of the analog color wheel is kuler.adobe.com. Another good resource is colorhexa.com.

With the color you chose earlier, follow along and use that color as your primary in these color scheme configurations using your color wheel.

Analogous - These are adjacent colors on the color wheel. One color is the primary color and the others would be supporting the design as secondary and tertiary colors. Analogous colors form a sense of harmony since they are from a similar color family.

Monochromatic - Tints, tones, and shades of a single hue. This type of color scheme is more subtle.

Triadic - These are three colors equally spaced on the color wheel. Using three colors makes the scheme vibrant and offers visual contrast.

Complementary - Colors on directly opposite sides of the color wheel. Complementary hues cancel each other out. For a colorblind person this may be an issue. If you want to use complementary colors, but want to make sure everyone can see the content, then do not overlay them on top of each other.

Compound or Split Complementary - Uses complementary colors and also adds analogous hues from the primary color. This color scheme is great for beginners since it provides strong visual contrast and is difficult misuse.

Achromatic - These are neutral colors like black, white, and all grays. Achromatic colors are a great supporting player in a website color palette.

Custom - This is any arrangement of colors that does not follow a traditional color scheme. If you prefer to be more adventurous and craft your own color scheme, you can always go the custom route.

The most important thing to keep in mind is that colors on a website should enhance the reading experience not distract from it.

When designing your color palette, you want to ensure that your content can be seen by everyone, even people who suffer from color blindness. You want to provide enough visual contrast in all of your content and not overlay complementary colors on top of each other. A good way to test this is to fully desaturate your content/design to grayscale in Photoshop or with an online tool. If you can still discern the most important parts of the page, read all the words, and understand all the imagery and graphics, you are good to go.

At this point you should have a better sense of the colors that will work for your website. Try to choose at least two colors, a primary and a secondary. These colors should be a good jumping off point to creating your website. Where needed, you can always add more colors along the way as you develop a visual language for your site.

You can extend your color palette by including shades, tones, and tints of your primary and secondary colors.

An important part of any color scheme

As you layout your website with your colors, look at the overall direction the colors are leading the user. Identify the main actions you’d want the user to take on a particular page and emphasize the areas that are important. Shades, tones, and tints can help you reduce some of the vibrancy and distraction to push the user in the right direction.

Many times you’d want to direct the user towards a call-to-action button. While the button itself may use the primary color in its normal state, it is important to differentiate between the other states, such as hover or disabled. Generally you don’t want to have wildly different colors for these subtle transitional states that the user needs to interact with. Many times, designers opt to use shades and tints of a primary or secondary color to represent these states.

For example, let’s say your primary color is #00AEEF.

Buttons often have 4 states: normal, hover, pressed, and disabled. In order to stay close to your color palette, you can use shades, tones, and tints to create the button states without veering off too far from center.

Here you can start with your primary normal button color of #00AEEF. Then you can add black or a shade for the hover state resulting in #0077A1. You can pick up a darker shade for the pressed button as well to represent a physical button receding. If a button is disabled, generally you want to make it lighter. A light tint or tone of your primary color stays within the scheme and creates a cohesive family of colors.

User interfaces have many elements with specific behavior and states. In order to differentiate the states and still stay true to your color scheme, shades, tones, and tints can help you expand your color range and give you the variety that you need to create those elements.

Add balance and contrast to your website

On many websites you’ll notice that the main body copy of the site is usually black or dark gray text on a white background. This is an old tried and true combination that is highest in contrast and excellent for legibility.

The beauty of achromatic colors is that they go with any color scheme. You can add achromatic colors to your palette to help with typography and readability issues. You can use gray scale to enhance the interface elements to provide appropriate feedback and hierarchy of information. Not every element on your website needs to be a bright color. Some can be neutral so that users don’t get distracted when trying to achieve their goal on your site.

For example, Digital Ocean, a cloud hosting provider, uses grays throughout their design to tone down the overall site and allow for good legibility while using their main colors to draw attention and create visual interest. The green CTA shines amongst the grays to call the user’s attention and drive action.

Usually a good basis is having a primary and secondary color. You can always add more as you begin to use the color scheme, but using shades, tints, and achromatic colors can help bring everything together.

A convenient trick to use is the 60 30 10 rule. You generally shouldn’t use equal amounts of your colors across the design. The colors will conflict with each other. With this rule your primary color should cover 60% of all main UI elements unifying the theme of your design. Your secondary color should cover 30% to create visual interest and provide contrast. The last 10% should be an accent color to give your design that touch of elegance.

Best Buy is an example of a site that uses the 30 60 10 rule of their main UI elements with a primary blue color, a secondary yellow color and a red accent color.

Some sites get a little too color happy and go a bit over the top to the point where it impedes the user from actually using the site effectively. In this example, it is confusing which things are buttons vs. static copy.

Other sites are a complete catastrophe like the one below. Please do not do this!

By this point, you should have:

Picked a primary and secondary color based on your website’s purpose and message