Ultimate Guide to Color Theory

If a picture is worth 1000 words, then how much can we say about an interface? Well it turns out quite a lot, and there’s often many different topics worthy of discussion. One such topic is color theory which comprises the basic techniques of picking a matching color series. The colors you choose when designing your website can convey different thoughts and emotions about your brand, so it’s imperative you choose the right colors for your brand. For example, if you were building a website about top beaches in the U.S. verses if you were creating an online store that offered daily deals like Groupon, you’d want to use very different color combinations when designing each site since they convey differing messages – one site conveys relaxation while the other conveys adrenaline pumping excitement for getting an awesome deal.

This guide explores the subject of color relative to web and graphic design. The information is meant to be introductory while also getting into more applicable topics for digital designers. Advanced color theory is something best learned through practice rather than theory, but in order to improve, you have to start somewhere. Along with helpful tips and ideas for designing with color, you’ll also find plenty of valuable resources interspersed throughout the article.

The Purpose of Color

Delving into color from an artistic perspective should make the topic more lucid. There is a major difference between a drawing and a painting, yet they can both emanate similar information. This is true in any type of design including web design.

The purpose of color is to deliver a more impactful experience to the viewer. Websites could be designed completely in black and white just like a graphite pencil drawing. But there would be a lot of missing information, emotionally and tonally. In fact there are plenty of black and white websites online, but most of them are minimalist and simplified.

Adding color into a layout provides a richer canvas for expression. Graphics, fonts, buttons, hyperlinks, everything can be styled in a way to match an overarching tone. For example the color of a vineyard website might be different than that of an aquarium site. Why? Because those two types of websites are trying to convey a different meaning, purpose, or emotion to the audience.

So when thinking about color, keep in mind that it has very little to do with the page structure. You should be able to structure a layout using only grey and still get the message across. Color has more to do with the page flow and how information is conveyed to the visitor.

HSV Basics

Most color theory articles discuss the ideas behind each color and the emotions they exhibit. I think the topic of emotion is much more subjective, and while it is accurate, choosing a color scheme often goes beyond just mood. Instead I want to examine how color works together and how to begin practicing on your own.

A good place to start is the Hue, Saturation, and Value scale (or HSV). You should understand all of these terms as a measurement of color, but I’ll go out and say that value is exceptionally important. Value is what you get in a black and white picture – nothing but shades of greys. Taking a website screenshot and converting it to grayscale will show you the raw values.

With that said, value should be recognized as the spectrum from dark to light. Hue relates to the traditional color wheel from grade school which measures actual color like blue, red, or yellow. Hue is fairly straightforward, but you can internalize the concept by memorizing the color wheel.

Saturation (or chroma) relates to the level of purity and vibrancy in a color. Most people recognize saturation as the comparison between banana yellow and pastel yellow. Pastels are much more “washed out” and seem less vibrant because they have a lower level of saturation. Take a look at the following diagram from the Munsell color system to get a better understanding:

This diagram is worthy of comprehension because colors are all relative. So a “cool” color like blue might not be seen as cool if it’s used in the lights alongside a warmer color in the darks. Color theory is a strange topic because it mostly works in relation to other colors. This probably doesn’t make sense right now, but it will as you study examples and spend more time practicing on real project work.

Harmonic Patterns

There are quite a few different patterns you can follow when choosing a color scheme. Granted not everyone understands how to pick out colors, and thankfully there are handy resources online to help with this task. I think this color harmonies page does an excellent job recapping examples, but let’s cover some of the more interesting choices.

Complementary colors are opposite on the color wheel and typically produce a lot of contrast. For example purple icons on a yellow background should stand out with a certain vibrancy expected of high-contrast matching. Naturally this would depend on the level of saturation in each color which is best understood through practice. Just remember: opposites contrast!

Analogous colors are located right next to each other on the color wheel. It should be apparent this color scheme does not produce a high level of contrast. But it’s still useful when designing graphics, banners, textures, or backgrounds that need to match throughout a webpage. Not everything in the layout should be high-contrast.

Triadic colors are three separate colors which are equidistant apart on the color wheel. When toying with this color scheme, it’s important to let one color be more dominant than the others. Balance is achieved by working with the colors to decide how they should fit into the overall layout. Saturation plays a role, but still doesn’t change much regarding the overall color scheme pattern.

Split-complementary colors are very much like the original complementary scheme with a slight variation. Starting from one point on the color wheel, this scheme uses two others which are adjacent to the opposite color. The matchup is less harsh than a direct complimentary pairing while also offering a little wiggle room for color choice.

Tetradic colors are the most difficult to harmonize, yet the richest when balanced properly. This color scheme uses two pairs of complementary colors which are 2 spaces apart. I wouldn’t recommend starting with this scheme because it can be difficult to command without experience. However it can work beautifully in larger designs, so it is worth keeping in mind.

Color Contrast

The subject of contrast appears perpetually in regards to web design. Contrast is the level of clarity between two objects on the page. Most notably this includes text like paragraphs, links, and headings. If there’s not enough contrast between the text and background colors, then text is rendered unreadable (either too bright or too dim).

The safest choice is to always revert back to a value scale – grey on white or white on grey. Dark text is always much more visible on a lighter background and vice-versa. However some colors frequently produce a jarring effect, like red and green. This juxtaposition is beautifully artistic in some cases but not every case. You have to be careful when picking colors for links and buttons that appear on colorful areas of a layout.

Looking at the homepage for Duplos, you can see a handful of various speech bubbles using the same white text. Since the background colors are dark enough, text is readable in every situation. This is a worthy goal to aim for and not just with text-based interfaces.

Consider the level of contrast needed for icons or call-to-action buttons. High-contrast elements with balance naturally draw attention. When a certain button or signup field requires more attention, higher contrast is often a great solution. Color is able to produce balanced contrast when used properly.

Avoid Pure Black

Some more advice taken from the world of fine art is to avoid pure black. When you look at objects in real life, you almost never see pure black. Things may look very dark, but it’s unlikely that their HEX value would be #000. You might even try snapping photographs and testing the HEX values in Photoshop.

Recently I found an article written by Ian Storm Taylor entitled Never Use Black. He states that by avoiding pure black colors in an interface will reflect real-world believability. This may be a tendentious claim, but over the years I’ve found it to be excellent advice.

As practice for this concept try to avoid #000 when working on lighter backgrounds. Instead opt towards a darker grey with the potential of a mixed color (dark blue, dark green, dark orange, etc). I’ve always found that grey text on a white background is 10x more readable than pure black text.

The abyss of pure black has a very large contrast in comparison with other colors. At this point I find it annoying even though it doesn’t make that much of a difference. But even a slightly positive difference is still a difference, so my advice would be to avoid #000 altogether.

Refining Color Schemes

When first getting started in color theory, it might be easiest to start with a single color and use online tools for guidance. Nobody is born with an innate understanding of color selection. But with constant repetition, it becomes like second nature.

The time to choose a color scheme would be after starting a web project and gathering ideas (wireframing, sketches, page elements). This could happen before or after designing a simple mockup, but the process is still the same. Just select a color that could work nicely with the layout based on content, form, style, or emotion.

Online webapps such as Paletton are indispensable when it comes to early scheme design. You input a single color and then select which matching scheme you prefer (analogous, triadic, tetradic, etc). Each color scheme allows for an additional complement which is opposite your chosen color.

Paletton is my personal favorite because it offers a series of relative colors based on adjustments in saturation. It also offers preset schemes based on the same range of colors you’ve chosen. And best of all, it’s completely free!

The other popular choice is Adobe Color, which has very similar options but also comes with a slightly more complex interface. You still choose between color scheme matches based on a single color input. However Adobe Color uses a color wheel to demonstrate the matching color choices. Every color is flexible and easy to move while maintaining consistency within the pattern of colors.

When it comes to refining your own color scheme, I would highly recommend either of these two options. They’re both free web-based tools that provide enough functionality to get you started building lovely and colorful projects.

Online Tools & Webapps

Aside from the amazingly helpful color scheme generators, there are other tools worth saving for future reference. I find these tools and resources to be most helpful in relation to digital design like graphics or website layouts. But you should pick and choose the resources which prove to be the most beneficial to your workflow.

If you’re looking for pre-built color schemes, there are plenty of websites available. One option is ColorSchemer which has a lot of extras like a mobile application and desktop software. But the website itself is free and offers a large color scheme gallery built by users.

Another option is Colrd which pulls colors out of photos and other graphics. This is a curious web application because it doesn’t always prove useful in the realm of web design. But there’s a lot you can learn by studying photographs and the colors associated with them. A general rule of thumb is that nature always gets it right, so if you study life and photographs you’ll recognize new ideas for matching color.

But when it comes to digital design, there’s a lot you can learn by studying other websites. An online tool Check My Colours will pull any website and check the contrast between text and background colors. This is an excellent resource for testing other websites along with your own designs.

The results are listed in a table format explaining the difference in contrast and brightness for each page element. It certainly isn’t perfect, but it does offer a fantastic starting point for new designers.

Browser Extensions

Most of us know about the color picker found in Adobe products like Photoshop or Illustrator. This is a much-needed tool because it offers the full spectrum of colors along with an RGB and HEX value. But most web browsers have plugins that can replicate a similar color picker.

Chroma is a free Google Chrome extension which is meant for designers and color enthusiasts. It comes with a typical color picker both square and circular, along with a wide range of color matching tools. Mozilla Firefox has a similar extension named ColorZilla which includes the eyedropper functionality for picking out a color from a webpage.

If you’re an Opera user, then check out the extension aptly named Color Picker. It has the same interface style as you’d find in Photoshop which makes it more familiar than Aunt Gertrude’s cheek hug.

With the right extensions, all of these browsers can be converted into color resources without even touching another program.

Nicely-Colored Websites

Instead of just listing a gallery of websites, I’d like to unravel the color choices of specific examples. These examples may not be the absolute pinnacle of color matching, but they do provide a reliable learning experience for web designers.

The website for Barcamp Omaha 2014 uses a lot of different colors in successive page areas. What stands out the most is that text has been designed to blend nicely into each background section. The items which have the most contrast are often graphics or buttons on the page. You can see this effect all throughout the website down to the footer links.

While this may not be the best style for every site, it serves as an excellent example of color blending. The page is easy to read but doesn’t feel overly-contrasted with bright vibrant content. Finding a sweet balance of color is the ultimate task for a designer.

iForex Water is a parallax website showcasing information about water consumption. Unlike my last example, this site uses the same colors in each section although the background is continuously changing. But because the colors are all dark, they still work as backgrounds.

This example is an interesting comparison which shows that you can match colors appropriately given the right circumstances. Also notice the change in color relationships when scrolling between different sections. In the world of color theory, the best results are relative.

Digimurai is a simpler but exemplary website on the topic of color theory. It should be obvious that the layout focuses predominantly on a shade of dark blue. This comes across as the dominant color and consumes a majority of the design.

But you will notice throughout the layout, there are other highlighted tones. Small splashes of orange and light blue stand out conspicuously against the darker background. Keep this in mind when picking a color scheme because it is possible to design brilliant websites using only 2 or 3 distinct hues.

Closing

Ultimately I hope this guide can offer a reliable starting point for digital artists and web designers. Color theory is very much like music theory where the primary lessons are learned through practice rather than traditional analyzation. But getting started can be troublesome until you have the basic concepts down and some resources to move things along.

If you really want to understand the process of selecting a color scheme, just keep practicing. Don’t be surprised if your first couple of attempts aren’t so great – in fact you should expect bad results in the beginning. As you continue to practice with new projects and new methods of color selection, everything will become easier with time.

Jake Rocheleau.