Color Theory for the Web

It’s time for another episode of Education with Emily. I thought it would be fun to explore different fundamentals of design and how I apply them to my sites! Today we’re exploring color!

Design principles are all meant to support the content and focus of the design. If it’s not contributing to the design in some way, it’s not helping. Colors that distract from the main focal point of the design don’t add anything even if they throw a bold pop of color into an otherwise drab space. Pull the color closer to the focal point to highlight it in some way. This utilizes the color in a meaningful way that helps the viewer find the focal point easier.

We can also use colors to aid in recognition. If we use a color for a button in one location, we may be inclined to use the same color for a button on another page. The viewer has seen the previous button and can recognize the second button more clearly. This also dips into the principles of pattern and repetition, but we’ll get to those later. Color can help us easily identify key target actions within a site. One you probably use every day is link colors. If text within a paragraph is styled differently, maybe with an underline or highlighted in a different color, we understand that those segments can be clicked on.

Color theory placard. Colour models, harmonies, properties and meanings memo poster design

We also know about how color affects our moods. Without consciously thinking about it, color immediately sets the tone for how we perceive the design. It can tell us if this is a more serious design, or a light and playful one. Usually, in my designs, I pull colors from the client’s existing logo; however, sometimes I get to create a palette from scratch or supplement a palette with some tertiary colors. I use this handy tool called It’s so fun to play with and find new palettes. One of my favorite and most used features is pulling colors from a logo. I can pull up to 5 colors within the logo range and save them for each project. Chrome also has an extension for Coolors so that I can pull up my colors and copy the exact color every time.

Wanting to rebrand? Even just swapping colors can make a huge difference (think “fresh coat of paint”)! Give us a call or fill out our quote form. We’re here to help!

Sign up for Our Newsletter!

Pin It on Pinterest