I still vividly remember one of my earliest art classes when, as a small, eager child, I was presented with a range of bright colored paints. I recall the delight of seeing primary colors mix into secondary colors for the first time, and I reasoned that if two colors could make one beautiful new color, all the colors together must make something even better! It was entirely disappointing to realize that no matter how I went about it, if I used all the colors at my disposal I inevitably ended up with a kacky color that can only be called “BLECH”.
Years later, as a fledgling web designer, I experienced something of the same process over again. As I was learning I fell into the inevitable trap of using too many colors, or combining them in the wrong way, only to end up with something a little “BLECH”.
I set about trying to learn how to create color schemes for the web, and I found a lot of fascinating information about color theory. I read about hues, tints, shades, tones, saturation and brightness, as well as analogous, monochromatic, triad, complementary and compound color schemes.
However without a practical framework to slot that information into, I found that at first it didn't get me all that much closer to creating well colored website design. In fact it was only after I started creating solid color schemes through pure trial and error that all the color theory I had read started to make sense.
In the process, I picked up some “safety guidelines” for website color schemes that I wish I'd known at the beginning. When you first get started, full color theory isn't necessarily what you need up front. Often you need to get the ball rolling with something a little less theoretical, and a little more “paint by numbers”.
In this tutorial I’ll be sharing with you six sure fire, “can’t go wrong” guidelines you can follow to get a foundational grasp on working with color in web design. These are not rules, as you'll create many color schemes in your career that will go in a completely different direction. Rather, they're a starting point, a safety guide for how to survive your first outings in the web design world without ever running into “BLECH”.
1. Color Scheme is the Canvas, Not the Painting
One of the most fundamental principles in web design is that no matter how much time you spend creating a glorious design, its ultimate role is to play second fiddle to the real star of the show; the content. Your color scheme shouldn’t ever make the site design “louder” than the content it presents. Your design should be in the background, helping to push the site's content into the foreground.
A very common process in web design is to create the design itself in relative isolation, often in software like Photoshop or Sketch. If you don't have any example content in place it can be easy to end up with a design that might look great by itself, and that a client may well love in mockup form, but which is too distracting for site visitors in practice. In fact, the web design process is so tightly tied in with content that many high quality web designs seem all but empty with no content in place.
It’s a great idea to start by laying out a sample of the type of content you expect to appear in the site, either in design software or straight into code, then designing around it. This is especially the case if photos or images of a particular style are to be involved, so you can make sure your design will flow harmoniously with them. Imagine that the site's content is a unique individual for whom you must tailor a perfectly fitting suit.
2. Start With a Simple Grayscale Base
There are an infinite number of color combinations you can choose for your main background and text base. However, my recommendation is to start by mastering the easiest one, and that's white and/or light gray in the background along with dark gray text.
If you look at any selection of popular websites, templates or themes, there's a good bet a majority of them will have this exact same base of dark gray text on white or light gray, and that's for good reason. With this combination you are virtually guaranteed to provide readability for visitors, and allow the text and image based content to come into the foreground.
With some example content in place draw up a basic grayscale layout, for example:
Generally speaking you should avoid using jet black for text as dark gray is a little easier to read. A comfortable range is anywhere from #333333 to #666666.
For your background colors, full white #FFFFFF is the safest bet for backgrounds immediately behind any main body of text. For other background elements you can go anywhere from #FFFFFF down to around #CCCCCC.
Again, these are not rules for colors you must use, just guidelines you know you can safely get started with.
3. Choose Just One Color to Highlight
The most common place color schemes go wrong is when wrangling several different colors. The more colors you use, the trickier it gets to keep them all under control. So to start with, just add one extra color on top of your grayscale base that will be used for the purpose of highlighting things like links, some headlines, menus, buttons and so on. Your highlight color can be blue, green, red or whatever you please.
Choose your highlight color by first laying out a box over your base so you can gauge how your color looks in relation to all the elements. Then open up your color picker and click in the center of the upper right quarter of the color map.
Move the slider bar up and down and choose a color you think will work well for your design.
At this point you’re now working with three basic colors; your background, text and a highlight. You can, and should, use more than one highlight color in the future, but for now think of it like juggling. You’re already working with three juggling pins, so get comfortable with just these three, and then add more into the rotation when you’re confident.
You Just Learned:
You just learned how to choose a "hue". In a nutshell, a hue is a base color. When you move the slider bar up and down you'll see the "H" value in your color picker change.
"H" stands for hue, and once you've chosen your highlight color, the number in that box is its hue.
4. If in Doubt, Use Blue
If you have any doubt at all over which highlight color to use, choose blue. Seriously. Blue is often the most flexible color to work with and will fit the highest number of site types. Colors like purple and yellow can be very pleasant, but can also quickly turn garish if used in the wrong way.
On the other hand you can do just about anything with blue as a highlight color and you can’t go too far wrong. If you’re not sure where to begin learning or what color to use in a project, just fall back on blue. The particular blue you choose can be anywhere from a navy blue (hue 235) through to an aqua (hue 190) and you're in pretty safe territory.
For my example layout I've chosen a hue of 205. When you have settled on your highlight color go ahead and add it to your design wherever you think it's required. If you're using your highlight color on buttons or any area with text on top of it, change the text color as well. In this case I've changed text over highlighted areas to white.
5. Add Variations on Your Highlight Color
Once you've chosen your highlight color leave the slider (hue) bar where it is from that point on. You're going to need extra colors for your design, but they're all going to be variations of that one highlight color you've already chosen in order to keep things simple.
To create color variations drag around on the map area of the color picker.
Use these types of color variations for things like:
Hover Effects
Borders
Subtler Text Over Highlight Color
Gradients
Light and Shadow Effects
6. Stay Out of the Top Right Corner
The top right corner of the color map is the land of high octane colors. Colors in the top right corner are like Formula 1 race cars; they can perform amazingly and are highly alluring, but generally it takes a lot of experience to use them well. Without that experience they can cause accidents, so it's best to cut your teeth on colors that are more toned down.
That's why in the third section of this tutorial I asked you to click the color map in the center of the top right corner before selecting your highlight color, to make sure you kicked off with a relatively subdued color.
To illustrate, watch what happens if I just change the hue of our design so far, without touching the color map.
It still looks pretty nice, right? However if I drag the color map up to that top right corner, suddenly it's not so nice.
Ouch my eyes!! If you want to make sure you don't scorch the retinas of your visitors, follow a general guideline of toning things down by staying out of the top right corner of the color map.
You Just Learned:
In the last two sections you actually learned to apply a few different aspects of color theory. You learned how to work with:
Saturation and Brightness.
When you drag around the map area of the color picker area you'll see the "S" and "B" values change, which stand for "Saturation" and "Brightness" respectively. You'll also see the hue number stays the same. So you're creating color variations by altering the saturation and brightness of your original hue.
Saturation and Tints
Saturation is how vividly your color is expressed. For example, think "My shirt was saturated with spilled red wine". On a typical color picker saturation is determined by how much white is mixed in with your base hue. The less white, the more saturated.
When you drag to the right on the color map you reduce the amount of white and hence increase the saturation so the "S" value goes up. When you drag to the left towards that all white corner you are decreasing the saturation so the "S" value goes down.
This mixing of white in with your original hue is also called creating a "tint". The term comes from paint mixing, where a white paint is mixed in with a colored paint.
Brightness and Shades
Brightness is how much black there is mixed into your color. The less black, the more brightness.
When you drag upward on the map you reduce the amount of black, increase the brightness and the "B" value on the color picker goes up. When you drag down you increase the black and the "B" value goes up.
Mixing black in with your original hue is also called creating a "shade". This also comes from paint mixing, where a black paint is mixed with a colored paint.
Tones
When you mix gray into your color this is called creating a "tone". When you move out of the top right corner as we did above you're lowering both your saturation and brightness which adds both white and black (gray), hence creating a tone. So basically any time both your saturation and brightness are less than 100%, that's a tone.
Again, this term comes from paint mixing, where a gray paint is created and then mixed with a colored paint. This is also where the phrase to "tone things down" comes from. Cool huh?
Monochromatic Color Schemes
A "monochromatic" color scheme is where you take a base hue and extend it with tints, shades and tones. You just learned what all of these terms mean in a practical setting. So by picking one highlight color and creating variations on it, you actually created a monochromatic color scheme.
What Next?
Keep practicing your monochromatic color schemes on a grayscale base until you feel really confident. Try creating them with different hues as your highlight color, experimenting to see how it changes the saturation and brightness settings you are able to use.
When you feel comfortable, move on to adding one extra highlight color. I recommend trying orange and blue in your first outing as they tend to be the easiest duo to work with. Then try green and blue, which in my experience is the second easiest. Both of these combos tend to be a hit with clients and customers.
The absolute best thing you can do to propel your understanding of color schemes for the web is to grab yourself a color sampler browser extension like Colorzilla, and use it to start examining how experienced designers do it. As you're browsing around the internet, when you see a color scheme that looks great break out the color sampler and take a look at the colors used on the page. For each hue you sample, take a look at what saturation and brightness levels work best with it. Also pay attention to which colors work in combination with others.
If in doubt, you can always fall back on your "safety first" guidelines and you'll be safe from the "BLECH" from here on.