Color: The Basics
Ever wondered what a colorless world would look like?
I’m pretty sure you’d imagine everything in shades of gray. But that too, being a color, is off the table. The point I’m trying to make is, we can’t really imagine our lives without color and it’s about time we realized how important it is. Moreover, allow me to elaborate on the crucial value it adds to design. Be it a logo or a website, the paint of a building or that of an artwork, it brings out the beauty of design and gives it a sense of emotion.
This is a two-part article in which we will go in full depth into the colorful world of, well, colors. I’ll be covering some basic concepts about colors and color combinations in this part and in the next, we will discuss how color interacts with the viewer’s mood and emotions. Moreover, this will help you develop a clear understanding of what your color palette should look like for a particular project.
Note: Some resources to help you through this process are linked at the end of this article.
A shade basically consists of three building blocks. These are Hue, Saturation, and Value. Hue being just another word for color is pretty simple to understand. The other two, on the other hand, are a little more complex and pave the way to an infinite supply of unique shades. These are discussed below.
Saturation refers to the intensity of color. In other words, whether a color appears more subtle or more vibrant.
The image above shows saturation increasing from left to right as we obtain colors from white to red going through the endless shades in between.
Value refers to how light or dark the color is.
The image shows value ranging from white to black as we move from left to right. Again, we get an endless supply shades in between.
THE COLOR WHEEL
A color wheel or color circle is an abstract illustrative organization of color hues around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors etc.
The color wheel gives us the basic idea of the colors we can use in our composition.
This mixed with the knowledge of Saturation and Value gives birth to an infinite possibility of color combinations. But do they all go well together? Well, not at all. Our job is not yet done.
The color wheel gives rise to a lot of ways in which color can be combined to go well together. Some of them are mentioned below. Please note that your intention here should not be choosing the exact color code, but a group of shades to work with. By adjusting your color palette’s Saturation and Value will you truely create something unique and beautiful.
ADOBE COLOR CC
Adobe Color CC provides a fast and easy-to-use interface directed specifically towards combining colors using the above techniques. Monochromatic, Complementary and all the other techniques can be chosen from a drop-down menu. Moving further, saturation and value of shades can be adjusted with the interface at the bottom.
Coolors, on the other hand, gives you complete control over your palette and enables you to create fully customizable color combinations. Even though this program does not respect the techniques talked about in the earlier part of this article, the best outcome can be expected when you keep them in mind. Giving you a basic and totally flexible starting point to let your imagination flow is what’s achieved by this program.
On that note, I’ll take my leave. Feel free to play with the above programs, to play with colors and soon(not so soon) choosing colors will become second nature. If you liked this kind of content make sure you check in for the second part of this topic. Till then, go create something awesome.
More from this Category
Learn about typographical hierarchy and font selection.
A great deal of audience is attracted if it looks hot. This pretty much what “UI” is all about. Now the audience is going to stay if it has a lot to offer. This is “UX”
What do colors mean?
Design is less about how they are happening, it’s more about how dope it looks while they are happening.
An introduction to an elaborate series on Design Concepts.