Basic Color Theory for Web Developers
Tags: webdev, css, html, design
Published: 2019-01-25 13:37:16

---
title: Basic Color Theory for Web Developers
published: true
description: How to make your website look good when you can't even match your socks.
tags: #webdev #css #html #design
---

You would be hard-pressed to find an art class without a color wheel hanging somewhere on its walls. If you’ve ever taken an art class, you might have been introduced to paints and mixing paints by creating one of your own.

<img src="https://thepracticaldev.s3.amazonaws.com/i/cgr160zn3evkbry9h3l7.png" height="250" width="250">

You would have learned about <i>primary</i> and <i>secondary</i> colors. Maybe even <i>tertiary colors</i> if you continued to take art after elementary school. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/h1li6xy7lsolpx1pfd7y.jpg">

But unless you studied art in any capacity at a high school level or higher, you probably did not realize that the color wheel is the simplest way to demonstrate <a href="https://en.wikipedia.org/wiki/Color_theory" target="_blank">color theory</a>, the practice of mixing colors and the study of specific color combinations.

## But what <i>is</i> color theory?
<b>A brief history</b>: Color theory emerged when impressionists like Edouard Manet, Edgar Degas, and Claude Monet (you might have heard of them) started experimenting with capturing <i>light</i> rather than a perfect likeness.

<figure>
<img src="https://thepracticaldev.s3.amazonaws.com/i/qg743mrylv8mon76b4z0.jpg" height="300" width="300">
<figcaption>Monet's Haystacks</figcaption>
</figure>

<b>Short answer</b>: It comes down to how the human eye translates light waves into colors. Colors that match have similar or complementary waves.

Color theory can get into the science of light waves, and why colors look the way they do. For the purposes of this article however, we are going to focus on the questions:

<ul>
    <li>Why do certain colors match?</li>
    <li>How do I pick the "right" colors?</li>
</ul>

Color matching seems to be a "you either have it or you don't" kind of thing. Or the longest, most excruciating part of designing a webpage or an app is determining which exact green to use for your background.

Whatever your color-related woes are, here's a little cheat sheet to look at:

## Level One: Monochromatic
<b>Monochromatic</b> is simply one or various shades of one color.

<blockquote>
<b>In WebDev</b>: This is choosing a single <a href="https://www.w3schools.com/colors/colors_picker.asp" target="_blank">Hex Code</a> and making it lighter or darker without effecting the hue.
</blockquote>

<img src="https://thepracticaldev.s3.amazonaws.com/i/48ktxlwm7qq095mkwuoa.jpg" height="375" width="300">

This is the simplest way to color your webpage. Sites such as <a href="http://facebook.com" target="_blank">Facebook</a> and <a href="http://twitter.com" target="_blank">Twitter</a> use the (mostly) monochromatic color scheme to their advantage. Black, white, and a sky blue, this color palette is part of what makes these social media apps so easy to use.

The only differentiating colors come from users' avatars, links and photos, which can become recognizable to frequent users, making it easy to find posts by their favorite accounts.

If there were more colors on Twitter's webpage, it would be harder to differentiate separate posts and who posted what.

As a rule, even if you want more than one color, it's good to have one main color--either as the background color or the main header color.

<blockquote>
<b>Pro-Tip</b>: If your webpage is only monochromatic make sure each shade is easily discernible from one another. Otherwise your webpage may not be user friendly if they cannot read text or separate the webpage's elements.
</blockquote>

## Level Two: Complementary Colors
But what if you want more than just different shades of orange? What if you want your links to stand out but not clash with the nav bar or the background color?

If we're following basic color theory, one of the best ways to choose a color for immediate emphasis is to look for a <b>complementary</b> color.

A <b>complementary</b> color of another can be found at the exact opposite of side of the color wheel. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/3fj00kbhg6s8nqpm3ut9.jpg" height="300" width="300">

Each <b>primary</b> color matches with one <b>secondary</b> color for their complementary color. An easy way to remember which colors to match is that the <b>secondary</b> color matches with the <b>primary</b> color it does not use. For example: red's complementary color is green, which is made out of blue and yellow.

<blockquote>
<b>Pro Tip</b>: Add colors one at time and keep it simple. Do not sacrifice a clean, usable layout for a full rainbow. Otherwise you might accidentally channel the classic 90s websites like <a href="https://spacejam.com/" target="_blank">this</a>.
</blockquote>

## Leveling Up
As you get more comfortable with your burgeoning design skills, feel free to push the envelope. Color should never be scary work to with. Always be on the look out for <a href="https://www.alispit.tel/#/" target="_blank">developers</a> and designers who utilize color masterfully. Ask what you like about it, what you don't like, and why. This is how you build your own tastes and brand.

## WebDev Hack
Create color combinations/palettes with their hex codes/RBG numbers on hand. Or if you're a fan of SASS, store them in files to import on bigger projects. Especially if your job is to create the structure, not the look (which is determined by someone else, a customer or manager), then just view these colors as place holders that make the website easy to look at.

Just make sure:
<ul>
    <li>Everything is readable.</li>
    <li>Links, headers, anything you want to put emphasis on is obviously different from plain text.</li>
    <li>A user can easily discern different parts of your webpage (i.e. the nav bar, main content, separate the articles, etc.).</li>
</ul>

## Online Tools

<ul>
<li><a href="http://paletton.com/" target="_blank">Palleton.com</a></li>
<li><a href="https://coolors.co/" target="_blank">Coolors.co</a></li>
</ul>

Shout out to <a href="https://dev.to/ferkungamaboobo">Doug R. Thomas, Esq.</a> for the following links:

<ul>
<li><a href="https://color.adobe.com/" target="_blank">Color.Adobe.com</a></li>
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAIM - Color Contrast Checker</a> - makes sure that text is readable over backgrounds.</li>
<li><a href="https://www.color-blindness.com/coblis-color-blindness-simulator/" target="_blank">Coblis — Color Blindness Simulator</a> - tests screenshots of layout with colorblindness filters to make sure your content is readable for all audiences.</li>
</ul>

## Continued Reading 
Hopefully picking a color or a color palette for your website, page, or app is less daunting after reading this article. If this topic interests you, I highly recommend <a href="https://www.colormatters.com/color-and-design/basic-color-theory" target="_blank">reading more</a> about the subject. We've only really touched the surface, but you can get into <a href="https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/" target="_blank">hues and shades and more</a>.

Ultimately, there is no “wrong” answer when it comes to color, especially if you are making a project for yourself. Many assume taste is something you’re born with, but really it’s looking at successful designs and taking inspiration, trying different combinations, and finding what works best for you and your brand. Good luck and go create!