Introduction to Color Theory and Web Colors
Getting Started
Color theory and web colors can seem intimidating at first. As web developers, we should be aware that proper color choices and implementation are crucial for visually appealing and engaging projects.
Usually, that's where our fellow designers can pitch in. However, we strongly recommend getting accustomed to the practical and theoretical aspects of using colors for the web. To ease things further, we can also rely on additional tooling such as color pickers as well as many others.
But before we jump to using tools, and adjacent color concepts, let's cover some of the basics and supplement our existing technical know-how.
Color Theory: A Brief History
We won't get into the nitty-gritty and provide a short historical context. Color theory has a rich history that dates back to ancient Greece, where philosophers such as Aristotle and Pythagoras explored the relationship between color and light.
Fast forward to the 17th century, and we'll find the work of Isaac Newton, who first described the color wheel and the relationships between primary, secondary, and tertiary colors.
Today, fundamentals of the color theory remain a valuable tool for artists, graphic designers, and web developers alike.
The Color Wheel: A Visual Guide
The color wheel is a familiar concept to many, especially those who have taken art classes. It's a circular representation of color hues, showing the relationships between primary, secondary, and tertiary colors.
Traditionally, the color wheel contains 12 hues — 3 primary colors, 3 secondary colors, and 6 tertiary colors. We also should note that there are two types of color models we can use.
The subtractive color model is all about blending pigments, inks, paints, or dyes to create new colors. It's called subtractive because each time a new color is added, the mixture reflects less light and becomes darker, ultimately tending towards black.
In the art world, the subtractive color model is based on the primary colors red, yellow, and blue. But the subtractive color model is based on cyan, magenta, and yellow in printing and design. By mixing these three hues along with a key color, usually black, we can achieve a wider range of accurate colors.
We'll be mostly concerned with the additive color model, used in a digital context, where red, green, and blue are its primary colors. When we talk about this approach, we're referring to the way colors mix and become progressively lighter as more hues are added.
It's like a mixing pot of colors that eventually results in a bright, pure white when all colors are combined.
Tints and Shades: Adding Depth to Colors
Simply put, tints and shades are variations of a color created by adding white or black. While tints are created by adding white to a base color, making it lighter and softer, shades are achieved by adding black to it, becoming darker and more intense.
Color Psychology: How Colors Affect Users
Have you ever wondered why some websites make us feel calm and relaxed while others seem energetic and exciting? The answer lies in color psychology, the study of how colors impact human behavior and emotions.
Front-end professionals should always consider the psychological effects of colors on users. For instance, warm colors like red and yellow can stimulate excitement and energy, while cool colors like blue and green can evoke associations with calm and tranquility.
Let's observe popular web apps like Facebook and Twitter. They use blue as their primary color, known for its calming and trustworthy associations.
Specifying Web Colors
Fortunately for us, several formats help us include colors on our web pages. These formats are used to specify and represent colors in HTML, CSS, and SVG. We'll focus primarily on CSS since we'll practically use it most of the time for such needs.
Note that each format provides a unique approach to specifying colors, and with experience, we'll be more equipped and flexible to choose an option that suits our needs.
Hexadecimal Values
With hexadecimal values, also known as hex triples, we can represent colors using a six-digit, three-byte code. So, each byte refers to the red, green, and blue components of the color, with the values ranging from 00 to FF (or 0 to 255 in decimal notation). With such syntax, we gain access to a vast range of colors that we can combine and use.
For instance, the hexadecimal value #FF0000 represents red because the green and blue components are set to their maximum values, while the red component is set to its minimum value.
.text {
color: #FF0000;
}
As you noticed, we denote hexadecimal values using the pound (#) symbol followed by the six-digit code. Moreover, if all the values for the red, green, and blue components are doubles, we can neatly shorten the hex code to three digits.
.text {
color: #F00;
}
RGB and RGBa Values
RGB values are a handy way to specify colors because they may seem more intuitive and easier to use, especially for beginners.
So, to use this format, we leverage the rgb() function and provide a list of three numeric values separated by commas, ranging from 0 to 255. Logically, each value will correspond to the intensity of the red, green, and blue components.
If we wanted to produce a green color we can simply specify it as rgb(0, 255, 0), where the value of green is at maximum while the others are set to minimum.
.text {
color: rgb(0, 255, 0);
}
Additionally, we can specify a fourth value that sets the opacity of the color and can range from 0.0 (fully transparent) to 1.0 (fully opaque). For instance, rgba(0, 255, 0, 0.2) will output a more semi-transparent green color.
.bg {
background-color: rgba(0, 255, 0, 0.2);
}
HSL and HSLa Values
Finally, let's also take a glance at the HSL format. As the abbreviation suggests, with this format we can define colors as a combination of hue, saturation, and lightness values.
First off, the hue value represents a specific color on the color wheel, with 0 or 360 degrees indicating red, 120 degrees representing green, 180 degrees representing cyan, and so on. Saturation, the second value in HSL, is responsible for determining the intensity of the color and is expressed as a percentage value. The third value, lightness, sets the brightness of the color which we also specify with a percentage.
With HSL, we can fine-tune colors by adjusting these three values. For instance, to create a shade of blue, we can specify it as hsl(240, 100%, 50%), setting it to a 240 degrees angle on the color wheel, referring to blue, and the saturation and lightness values to 100% and 50% respectively.
To visualize and test the examples we covered, we suggest checking out Colors.to, which contains a comprehensive representation of the different color formats. Plus, you'll be able to copy each color format easily and test it in your environment, or simply check out your chosen color's tints, shades, and tones, and even find supplementary choices for a decent color palette.
Final Thoughts
So far, we went through the basics of color theory and explored some practical aspects of using colors for the web. By understanding the intricacies and impact of colors, we can slowly turn to tools that help us produce various color schemes, palettes, and more. We'll cover more on tooling in subsequent articles.
Useful Resources
Visual Design Terms Cheat Sheet by NNgUX