Welcome to the tenth lesson of our Web Design for Kids series, all about Color.
In this tutorial we will jump into color theory, different ways of using colors in our CSS, the meaning of certain colors, and review how to select the perfect colors for our sites. We’ll finish up with some tips for using color on the web.
Don’t forget to ask any questions in the comments section at the bottom of this page!
Color Theory
Color Theory involves a lot of things, but the main focus is looking at how colors behave with each other in a design. We call a group of colors chosen to be used together a Color Palette. A well designed color palette will have colors that complement each other and have good contrast and vibrancy. We’ll talk about what these words mean in a moment.
Choosing the right colors and knowing why certain colors work and others do not can determine whether or not our design will work. Poor color choice can make our site difficult to use, or our text impossible to read and the user will leave our website.
Some Terminology
Before we get too far into our tutorial let’s talk about some basic color terminology that we will be mentioning a lot. We’ll use these terms to help us better understand what makes each color so unique.
Hues
A hue is (more or less) an object’s color. When we refer to things as “red” or “yellow” we are talking about their hue.
Saturation
Color saturation refers to how vivid, or strong, a color is. A low saturation creates a color that appears washed out, while a high saturation produces and very vivid color.
Brightness or Lightness
Brightness refers to the lightness or darkness of a color. This goes from black (no brightness) to white (full brightness).
The Color Wheel
The color wheel is based on red, yellow, and blue and is pretty well known among artists. As designers, understanding how colors are created helps us get a better idea of which colors complement each other and why.
The left wheel on the car below shows the three primary colors. With these three colors we can create all other colors.
The wheel to the right on the car above shows secondary colors too: colors that were created by mixing the primary colors. For example, blue and yellow make green, while blue and red make purple.
The left color wheel on the car below shows one more layer: tertiary colors. These are colors created by mixing a primary and secondary color. For example, mixing blue with purple creates a dark bluish purple.
Web Color Systems
There are a number of color systems (ways to describe colors) but only certain systems are suitable for the web.
RGB
RGB stands for “Red Green Blue” and describes how we view colors on electronic displays. These three colors can be combined to produce many other colors. The three values are listed in order and each range from 0 to 255.
body {
background: rgb(138,138,226);
}The above CSS produces a yellow-orange background on a page. Within the brackets you can see various red, green, and blue values.
We have only used a color’s hexadecimal value so far in this series, but we can use a color in our CSS in many different ways.
Visit this site for a quick list of Hex and RGB values for 500 specific colors.
HSL
HSL stands for “Hue Saturation Lightness” and the value is made up of three numbers in that order.
We can declare the same yellow-orange on the body of a page using an HSL value instead of the color’s Hex or RGB values:
body {
background: hsl(43,100%,57%);
}The first value here, 43, represents an angle on a color circle. This is what gives us the hue. Red is 0 or 360 degrees, while green is 120 degrees and blue is 240 degrees.
The second value gives us a percentage of saturation for the color, with 100% here being complete saturation.
The final value, lightness, determines how light or dark the hue is. 100% is white, 0% is black, and anything in between will set a combination of the two.
Which value we use in our CSS is entirely up to us, but HSL values are more straightforward to guess by selecting an angle value moving counter-clockwise from red (0) and then adding the percentage of saturation and lightness we want.
Color Names
There are a limited number of colors which have names which we can use in our CSS, no numbers required.
body {
background: green;
}A complete list of these color names can be found here.
Quick Note On Conversion Tools
If we ever have a Hex value and need that color’s RGB or HSL value (or vice versa!) there are some neat tools that will do this work for us, like rgb.to and Colorrrs.
The Meaning of Colors
Colors carry a lot of meaning. Depending on what country you live in, a certain color can be used to mean danger, love, happiness, or evil. Colors can make users react with certain feelings, so having an understanding of this is important in order to communicate our message to the user.
Take a look at this chart which shows how different colors mean different things in various cultures.
Let’s briefly discuss some meanings behind the three primary colors: yellow, red, and blue.
Yellow
Yellow attracts a user’s attention more than any other color and usually represents happiness and sunshine. On the other hand, yellow can also mean “caution”, as shown with many traffic signs.
Using yellow on the web can be very eye catching, so it’s best to not overuse it and make sure we are highlighting important information only.
Red
Depending on what country you live in, red can mean anything from danger, to anger, to energy, to love and happiness. Whatever it might mean, red is always used to represent an extreme feeling or action.
In web design red is often used to communicate deletion or errors. It’s a bold color that grabs the user’s attention so it can work well as an accent color. Too much red on a site can be overwhelming and it may be difficult to tell what’s especially important.
Blue
Blue represents both calmness and sadness for the most part and is a very popular color on the web.
The feel created by using blue in designs will greatly depend on what shade and hue we select. While a dark blue will communicate strength and reliability, a lighter blue will be more fun and friendly.
Selecting a Color Palette
Most sites will have a series of colors that work to give hierarchy and set the feeling of a design. Our color selection can be just as important as all the other design decisions we have had to make so far, so we need to have a good eye for what colors work together, whether or not we have achieved a good contrast throughout the page, and if the colors carry the same feel or meaning as our content.
Here’s another look at the main color palette used throughout the Tuts+ Town tutorial series:
The lighter colors are used as backgrounds while the darker colors are used for text or to highlight certain sections.
Complementary & Contrasting Colors
Generally speaking, colors existing across from each other on the color wheel are considered pleasing to the eye. These are complementary colors–when combined they produce a shade of gray. It’s possible for colors residing next to each other on the color wheel to work well together, but it might take a bit of saturation and brightness adjusting to get the right pairing.
We also touched a bit on contrast in the previous tutorial on design basics, but let’s briefly take another look.
Proper contrast reduces eyestrain and makes visual hierarchy clear. The best example of good versus bad contract can be seen by comparing certain background and text color combinations.
The image above shows poor contrast on the left with better contrast on the right. The text with poor contrast is difficult to read and hurts our eyes, creating a blurred effect.
Color Palette Tools
There are tools that supply us with lists of lovely color palettes to choose from, which can be a real time saver and serve as great inspiration.
Coolors
Coolors.co is one of the easiest to use color selectors available at the moment.
It supplies us with beautiful color palettes that we can customize and change by pressing the spacebar.
Adobe Color
Adobe Color is another color selection tool that makes great use of that amazing color wheel we talked about earlier.
We can make changes to the color wheel, determining our palette, and then make further adjustments to each individual color.
Adobe Color also lets us save our favorite palettes and browse popular, pre-selected ones.
General Tips
When choosing colors for the web, and applying them to elements on the page, it’s important to keep a few things in mind to make sure these colors improve the user’s experience.
Contrast
Contrast is so important that, when in doubt, go with the safest option; even if it seems a bit “boring”! Some of the most important duties we have as designers are making sure things are functional, easy to use, and easy to read. Poor contrast will prevent our users from being able to read our wonderful content.
So while it’s OK to be adventurous with your color choices, these choices should never take away from the overall operation of the site or distract from the content.
Number of Colors
Color palette selection tools, like Coolors, will often provide us with five colors. Five colors allow us to have one or two dominant colors and a few less dominant colors for things like buttons and links.
Having much more than five different colors puts our designs at risk of being inconsistent and difficult to follow; though white, black, and grays should not be counted here.
Common Patterns
It’s really important not to stray from color use that is generally acceptable by a lot of people. For example, most people are used to green meaning “add” and red meaning “delete”. Reversing this on our website would be a bad design decision because it’s not what is expected and will probably confuse users.
Wrap Up
In this tutorial we discussed the theories and rules of color and how to properly select and use them on the web. Every color carries its own message. We need to make sure this message matches that of our content through carefully thought out palette choices.
Next we’ll be finishing off our series with some final thoughts and different ways we can share our hard work with friends and family online.
See you around town!
