Coding and Colors: A Practical Approach to HEX and RGB Values
I was recently working with OpenCV while trying to track worms (a story I will cover later) when I realized in several functions there was a color parameter that I did not know how to use. It was a tuple taking in 3 numbers (0,0,0). I figured that they were RGB codes, and the inputs would be 0–255, but given the code I would not be able to make any color I want without extensive googling.
Unrelated, at the same time, my father was trying to come up with a reliable color codes for a project he was working on, so we decided to go through and check out what makes a color code work?
It all comes down to what is known as the HSV (Hue, Saturation, Value). This is based off the color wheel where there are values 0–360, one for each degree. Each primary color is on the wheel at positions 0º (Red) 120º (Green) and 240º (Blue). These degrees are important, because we can then infer that at 60º, halfway between red and green, we get yellow. Or at 180º, halfway between green and blue, we get cyan. This can be observed in the wheel below.
So, how do the numbers come into play? While to get the secondary colors, we just merge the two adjacent primary colors together. So as shown above, yellow is (255, 255, 0), for (Red, Green, Blue). For the tertiary colors, let’s take orange, this would be half of 255 (technically 127, but shown here as 125) since 30º is halfway between 0º and 60º. So for a hue of 15º, we would take a quarter of the value of green to match with all of red, or (255, 63, 0).
If we want to get a darker shade, we would use less of each color, instead of (255, 255, 0) maybe (127, 127, 0). To get a lighter shade, add some of the last tertiary color (255, 255, 127). White is (255, 255, 255) and black is (0, 0, 0).
These colors can easily be shifted into Hex codes once we understand Hex a little better. In Hex, the numbers 0–255 are represented by 00-FF. How does this work? While numbers 0–9 are 00–09, not much different. But instead of going to 10, we go to 0A. Since we ran out of numbers, we have to use letters! So 10, 11, 12–15 would be 0A, 0B, 0C -0F. 16, we would loop back to A0 and then count past A9 to AA to AF, then B0-BF, then C0-CF all the way to FF.
The hex for white is #ffffff. This can be broken up into thirds, or #ff-ff-ff. Each ff pair represents the number 255, so there is no difference with this and RGB. Since Hex works of base 16, the values go 00,01,02,…0a, 0b, … 0f,…up to ff. So red has the value 60º, so in RGB this is (255, 0, 0) and is HEX, #FF0000. Orange has the value 30º, so (255, 127, 0) in RGB, and #FF7F00. This is much harder to calculate in your head as getting half of a HEX number is difficult, as half of 255 is 127, then in HEX would be 7•16 +15, or 7F (15).
Hopefully colors make a little more sense now, and while googling is still needed for complicated colors, it should make at least the secondary colors doable, and hopefully I shed a little more light on the whole system.
