Colors always fascinated me. After all, they are present in everything that we see around us. As I write these lines, I feel a bit sad about those who are color blind and for those among us who are completely blind. Makes me realize how fortunate most of us are to be able to experience all the beauty that surrounds us.
And we as programmers and web designers spend most of our waking hours staring at computer screens and interacting with a myriad of colors. Just like 'real life', colors are omnipresent on the web as well, most of them in the form of images. But with newer and better browsers, its becoming increasingly possible to create absolutely amazing coloring effects even without the use of images. Yes, you guessed it right, I am talking about the various new ways in which colors are entering the landscape of web designers by adapting the new CSS 3 specification.
I believe that almost every web designer is quite familiar with the RGB color scheme. However due to some (INSANELY BIZZARE) circumstances you are not aware of this scheme, then of course you need to google a bit, because a basic understanding of this scheme is a must if you want to enjoy making and delivering a design.
Working on the web has made us quite used to the RGB scheme. However, as most of us might know, there are also a few other popular color schemes called the CMY and the HSV color scheme. CMY is used in the print industry. And HSV is important solely because I am going to be discussing about it in this post.
Ok ok, that's not the only reason why HSV is important. HSV is a very important color scheme, and in fact in my opinion, even more important than the RGB scheme, because this is the scheme that represents the way we actually perceive light and colors. When I say light, what I mean to say is 'wavelenghts', because after all, that is exactly what light is. And the HSV scheme speaks of colors in terms of wavelengths.
In this article, I am going to walk you through the HSB color scheme and its relationship with the RGB color scheme.
My intention is that after reading this article, if anyone tells you the HSV values of a color, you should be able to make a mental picture of the color and then almost be able to guess the RGB values for the HSV colors. I believe that the more you do it, the better you will get at guessing and your accuracy may also improve.
Sounds like a fun thing to do, is'int it? Well then, lets get started.
In the RGB scheme , R stands for Red, G for Green and B for Blue. Whereas HSV stands for Hue, Saturation and Values. However, for an easier understanding in this article, i am going to replace the V with a B. B for Brightness. So, while the actual color scheme is HSV, throughout this article, i will be referring to it as HSB, where B is nothing but the Brightness Value.
The RGB scheme is popular because it is the first thing that comes to our mind when we write our CSS. However, almost all color pallete's also give us an option to select a color based upon the HSB scheme.
First the Basics
In the RGB scheme, each color can be represented within a range of 0 to 255.
The value of R represents strength of the color Red in a given color combination of Red, Green and Blue. The same holds true for Green and Blue. So, you can say that the RGB scheme is like an artist's coloring palette where he can mix the three colors to create all the other colors.
The HSV schema differs because it organizes colors in the order of wavelengths. I believe that when you think of HSV, you can think of yourself standing and staring at a colorful circle. This circle can be divided into three equal arcs of 120 degrees wherein each arc represents the most dominant color withing that degree range. The three dominant colors in the HSV circle are Red, Green and Blue. These dominant colors are also called primary colors.
For now, you can imagine your circle to be something like the below image. You can call it your color wheel.
But in reality, in the actual color wheel, within each dominant section, the color varies across the radius and circumferenece to produce an effect as follows.
Lets understand how our colors vary in the color wheel.
I will need you need to first imagine yourself shrinking all of a sudden and finding yourself standing at the edge of the color wheel. I am going to ask you stand at an an angle of 0 degrees on our color wheel, which is the mid point of the red zone on the circumference as depicted in the image above. Now I ask you to take a stroll along the circumference of the circle in the anticlockwise direction, i.e in the increasing order of the angle. As you were to walk and note the values of the colors that your come across, you would make the following observations.
From 0 to 60 : red stays 255 , green 0 changes from 255 , blue stays 0
From 61 to 120 : red changes from 255 to 0 , green stays 255 , blue stays 0
From 121 to 180 : red stays 0 , green stays 255 , blue changes from 0 to 255
From 181 to 240 : red stays 0 , green changes from 255 to 0 , blue stays 255
From 240 to 300 : red changes from 0 to 255 , green stays 0 , blue stays 255
From 300 to 360 : red stays 255 , green stays 0 , blue changes from 255 to 0
Hue
There are a few things that you need to know about your stroll.
- As you walked along the circumference, ie at a fixed distance from the center of the circle, you observed the color change. Such a color change that takes place with an increase in the angle is known as the HUE of the color. Hence one could say that at a fixed distance from the center, the HUE of a color is based solely upon the angle. Hence, the value of HUE ranges from 0 to 360, which is just as expected.
- You were walking at a fixed distance from the center.
- The intensity of the various colors varied from a min of 0 to a max of 255.
- Within a given 120 degrees of a dominant color, no other color had a value greater than that of the dominant color at any point of the stroll.
- Graphically, the dominant range and the zero range lie opposite to each other on the circle and they span 120 degrees each.
Take a moment and make a note of the following patern
For any given color there is a range where the color is dominant. That range covers and angle of 120 degees. The most important point to be noted is that the intensity of a dominant color remains constant and is the highest in its dominant range as compared to the other colors.
- Red : 300-0/360-60 : Total : 120 degrees, i.e. The intensity of Red color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.
- Green : 60-120-180 : Total : 120 degrees, i.e. The intensity of Green color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.
- Blue : 180-240-300 : Total : 120 degrees, i.e. The intensity of Blue color in this range is a FIXED_HIGH, and is always greater than or equal to the other colors.
Then, for the next 60 degrees after its dominant range, the intensity of the dominant color gradually drops to 0 from its current value.
Red : 60-120 : Red value drops from FIXED_HIGH to 0.
Green : 180-240 : Red value drops from FIXED_HIGH to 0.
Blue : 300-0/360 : Red value drops from FIXED_HIGH to 0.
After a color drops to 0, it remains in a steady zero state for the next 120 degrees.
Red : 120 - 240 : Red stays 0
Green : 240 - 360/0 : Green stays 0
Blue : 0/360 to 120 : Blue stays 0
Hence the trend followed by all the colors in the circle is :
- Rise to the FIXED_HIGH over a range 60 degrees.
- Then stay at the FIXED_HIGH over the next 120 degrees.
- Then fall to 0 over the next 60 degrees.
- Then stay at 0 over the nenxt 120 degrees.
Note that in the above statements I have made use of the term FIXED_HIGH, and not a value of '255'. That is what takes us to the next step where we discuss the other components of colors - namely saturation and brightness.
Brightness
Brightness determines the value of the strength of the color, which in our case is the variable FIXED_HIGH. The range of the brightness value is from 0 to 100 in the HSV scheme.
Taking our stroll analogy, if we consider our color wheel to have a radius of 255 units, a brightness of 100 means you are waking at 100 percent of the radius, i.e. 255.
A brightness value of 50 indicates that you are walking at 50 percent of the radius , hence the FIXED_HIGH is 128.
A brightness value of 25 indicates that you are walking at 25 percent of the radius , hence the FIXED_HIGH is 64.
So ho do we calculate the RGB for a given hue and brightness ?
First determine the RGB value based on the hue. i.e. the degrees of the arc.
Then the actual RGB at a given brightness = X percent RGB where X is the value of Brightness.
Let us see a few examples to see how this is done.
At 30 degrees, you get a color of orange which is composed of Red and Green but no blue.
Case 1 : At Brightness/FIXED_HIGH of 100 %
Red : 255 , Green : 128 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)
Case 2 : At Brightness/FIXED_HIGH of 50 %
Red : 128 , Green : 64 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)
That covers brightness.
Saturation
Saturation determines the amount of non-dominant colors with respect to the dominant colors.
Saturation is applied to the non dominant colors only, that too only after Brightness has been applied to the original combination.
I like to think of saturation as a way of saying how pure a mixture of colors is. The more the saturation, the less is the presence of the non dominant colors, and hence more is the purity of the mixture.
The value of saturation varies from 0 to 100 just like Brightness.
So, how to we calculate the RGB based upon a hue, saturation and brightness level? The algorithm is pretty simple.
First determine the RGB based on the hue.
Then calculate the RGB based upon the brightness : RGB = X percent RGB where X is the value of Brightness.
Determine the difference between the dominant color's value and the non dominant color's value for each color.
For each percentage DECREASE in the saturation, INCREASE the color of the non dominant's by the same percentage of the calculated difference.
The above algorithm should become clear with the example below:
At 30 degrees, you get a color of orange which is composed of Red and Green and no Blue.
Case 1 : At Brightness of 100 %
Red : 255 , Green : 128 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)
Here saturation is 100 percent. i.e. This is a 100 percent pure form of the color at maximum brightness.
Case 2 : At Brightness of 50 %
Red : 128 , Green : 64 , Blue : 0 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)
Here saturation is 100 percent. i.e. This is a 100 percent pure form of the color at 50 percent brightness.
Now lets modify the saturation to 50 percent and see
When we say 50 percent saturation, what we mean is that as compared to the color at a given brightness, the quantity of the non dominant colors have increased by an amount of 50 percent of the difference between their current value and the dominant color's value.
Case 3 : At Brightness of 50 % and saturation 50 percent
Red : 128 , Green : 96 , Blue : 64 (Red is the dominant color, Green is the secondary color, Blue is 0 at 30 degrees)
This is a 50 percent pure form of the color at 50 percent brightness.
To do the Math for case 3.
Initially assume saturation 100%
Step 1 : Identify dominant color
Dominant Color at 30 degrees : Red
Step 2 : Determine the mix at 30 degrees and At Brightness:100%
At Brightness:100%, RGB = R:255, G:128, B:0
Step 3 : Determine mix at 30 degrees and At Brightness:50%
At 50 percent brightness, RGB = R:128, G:64, B:0
Step 4 : Now, consider the saturation for the non dominant colors
(Red value) minus (Green value) at 100 % saturation = (128) - (64) = 64
50 % saturation means = 50 % of 64 = 32
Final value of Green at 50 percent saturation : 64 + 32 = 96
Similarly, we calculate the final value for Blue as
(Red value) - (Blue value) at 100 % saturation = (128) - (0) = 128
50 % saturation means = 50 % of 128 = 64
Final value of Blue at 50 percent saturation : 0 + 64 = 64
Now we are finally done with our HSV scheme. So, the next time that you find yourself playing with a color palette, and you decide to fiddle with the HSV values, I believe that this article would help you have a better understanding of what changes in the color you can expect when you make changes to the respective HSV values. And moreover you should be easily able to tell the RGB colors based upon you HSV colors by doing some mental maths.
Hope you had fun!
Signing Off
Ryan
